iOS 7になってから、全画面表示が基本になりました。またXcode 5になってから、Interface Builder(以下IB)のAuto Layout関連のUIもガラリと変わりました。

今回は数回にわたってiOS 7 + Xcode 5 + Auto Layoutについて、解説していきたいと思います。

ごめんなさい、UIRectEdgeNoneを使った方法を書いてましたが、1ViewController + 1Storyboardの組み合わせの方が良いと思いましたので、記事を訂正しました。 2013/11/3

またiOS 7でViewが全画面になったことに関する理解がまだの人は、こちらの記事から先に読んだほうがよいかもしれません。

iOS 7の全画面対応

上記の記事に書いたように、

  • 全画面対応はStoryboard + Auto Layoutで行う
  • 1画面は1ViewController + 1Storyboardの組み合わせにする

を前提として進めていきます。

詳細は上記リンクの記事で述べましたが、改めて手短に理由を並べると以下のとおりです。

  • xibではLayout Guideに対応できない
  • 1つのStoryboardファイルで複数のViewControllerを管理すると、みづらいし、チーム開発でコンフリクトしやすい

Xcode 5で一新されたInterface Builder

Xcode 4.6.*でInterface Builder(以下IB)を使ったAuto Layoutは保守性に問題があったと思います。苦労して設定したConstraintが、ちょっとSubviewを移動しただけで消えてしまったり、IBが自動で他のConstraintへ置き換えてしまうことがあったからです。

Xcode 5のIBではこの問題が解決しています。もはやIBが自動でConstraintを追加することはありません。Constraintはユーザーが追加することが前提となり、Viewを移動したときも勝手に書き換わるようなことは起きません。Constraintを修正する必要があることを警告するだけです。

Auto Layoutでよく使うボタンやメニューについて説明します。

Pinボタン

ViewとSuperview(親View)、Layout Guide、他のViewとの間隔、View自身のサイズなどを設定する時は、Pinボタンのポップアップで設定します。

02

Resolve Auto Layout Issuesボタン

Constraintの再設定などは、Resolve Auto Layout Issuesボタンのメニューから行います。

08

Alignボタン

Viewを垂直方向、もしくは水平方向の中心に固定したい時などはAlignボタンのポップアップから行います。

11

これらの実際の使い方は次回以降の記事でサンプルと一緒に説明していきます。

その2へつづく