[iOS 7] Xcode 5 で始める Auto Layout 入門 #2 – Interface Builder 編

Xcode 5 の Auto Layout サポート機能

iOS 6 で Auto Layout が導入された際に、Xcode 4 の Interface Builder においても Auto Layout における制約を編集する機能が追加されました。しかし、慣れないうちはこちらが意図しない挙動をしているように見えやすく、また、コンポーネントの数が多くなると制約の数が爆発的に増えてしまう事もあり、この機能はお世辞にも使いやすいとは言い難いものでした。

Xcode 5 では、Auto Layout における制約の編集機能が一新されています。やはり、Auto Layout の制約に関する最低限の知識は必要とされるものの、制約の編集がしやすくなったことで格段に使いやすくなりました。

今回は、Xcode 5 の Auto Layout 関連機能を確認したいと思います。

Auto Layout の切り替え

まずは、Auto Layout を有効にするかどうかを切り替える方法です。Xcode プロジェクト内に適当な Storyboard ファイルを作成して開いてみましょう。

Xcode 5 上で設定を変更したい Storyboard もしくは Xib ファイルを選択すると、File Inspector に「Use Autolayout」という項目が表示されます。このチェックボックスをチェックすると Auto Layout が有効になります。チェックを外すと、従来の Autosizing を利用したレイアウトを利用できます。

この設定は、各 Storyboard, Xib ファイルそれぞれで設定が独立しており、特定の Storyboard のみ Auto Layout を利用しないといった使い方をすることが可能です。

なお、iOS 5.x 以前のデバイスで Use Autolayout を有効にしたアプリを動作させようとすると、クラッシュしますので注意が必要です。

Interface Builder - Document Outline 上の表示

Use Autolayout オプションを有効にしていると、Document Outline に Constraints という青いアイコンの項目が表示されるようになります。これは Constraints の親ノードのコンポーネントとそのサブビューに紐づく制約の一覧を表しています。コンポーネントとそのサブビューに紐づく制約というのは、コンポーネントとそのサブビューとの間に適用された制約、もしくは、コンポーネントのサブビュー同士の間に適用された制約のことを指します。

下図の例の場合、赤線で囲んだ制約の一覧は同じく赤線で囲んだ UIView とそのサブビューに紐づく全ての制約を表示しています。

Interface Builder - Canvas 上の表示

ビューの上に表示されている I 字型の青い線は現在選択しているコンポーネントに紐づく制約を表しています。

さらに、ドロップシャドウがかかっている制約は、現在選択中であることを示しています。

Interface Builder - Canvas 上のメニュー

Canvas の右下にいくつかボタンがありますが、このうち、中央にあるボタン群が Auto Layout の編集機能にアクセスするためのものです。

左から順番に見ていきましょう。

Align

これらはコンポーネントのアライメントに関する制約を追加・編集します。

これらの制約の詳細については、次回説明したいと思います。

Pin

これらはコンポーネントの相対的な位置やサイズを固定する制約を追加・編集します。

これらの制約の詳細については、次回説明したいと思います。

Resolve Auto Layout Issues

ここでは、制約をうまく調整するための機能が用意されています。

上から順番に確認していきましょう。

Update Frames

選択中のコンポーネントに設定された制約とCanvas 上の座標（Frame）が矛盾している場合に、コンポーネントの座標を制約に合わせて変更します。

Update Constraints

選択中のコンポーネントに設定された制約とCanvas 上の座標が矛盾している場合に、コンポーネントの制約を座標に合わせて変更します。

Add Missing Constraints

選択中のコンポーネントについて、レイアウトを決定するのに十分な制約が設定されていない場合に、不足している制約を自動的に追加します。追加する制約は、Canvas 上の座標を基に適切なものが選択されます。

Reset to Suggested Constraints

選択中のコンポーネントについて、現在紐づいている制約を全て削除した上で、レイアウトを決定するのに十分な制約を自動的に追加します。追加する制約は、Canvas 上の座標を基に適切なものが選択されます。

Clear Constraints

選択中のコンポーネントに紐づく制約を全て削除します。

その他

セパレータより下にある"〜 in View Controller"と表記されている項目は、上記の機能を ViewController 内にある全てのコンポーネントに対して実行する機能です。

Resizing Behavior

Interface Builder上でコンポーネントをリサイズした場合に、周辺コンポーネントに既存の制約を適用して移動やリサイズなどを行うかを設定するメニューです。

各設定項目の内容は下記の通りです。

Siblings and Ancestors

親と兄弟に制約を適用する。

Descendants

子に制約を適用する。

Interface Builder でのプレビュー

Xcode 5 から、Interface Builder 上でレイアウトをプレビューできる便利な機能が追加されました。プレビューでは以下の項目をシミュレートした結果のレイアウトを確認することができます。

• iOS 7 以降のデバイスで実行した場合
• iOS 6 以前のデバイスで実行した場合
• デバイスのオリエンテーションがポートレイトの場合
• デバイスのオリエンテーションがランドスケープの場合
• （iPhoneの場合）スクリーンサイズが 4 inch の場合
• （iPhoneの場合）スクリーンサイズが 3.5 inch の場合

プレビューの表示方法

作成したレイアウトをプレビュー表示するには、まず、Assistant Editor を表示します。

Assistant Editor はデフォルトでは Automatic が選択されていると思います。Xcode 5 では、ここに Priview というモードが追加されていますので、それを選択します。

これで Assistant Editor にレイアウトのプレビューが表示されるようになりました。

OSを切り替える

Assistant Editor の右下にあるメニューボタンのうち、左側のボタンがシミュレートする OS を切り替えるボタンです。

このボタンを押して表示されるメニューから、"iOS 6.1 and Earlier" を選択すると レイアウトが iOS 6 以前のデバイスで実行したものに変わります。

デバイスのオリエンテーションを切り替える

Assistant Editor の右下にあるメニューボタンのうち、中央のボタンがプレビュー表示上のデバイスのオリエンテーションを切り替えるボタンです。

このボタンを押下すると、プレビュー表示のデバイスのオリエンテーションが切り替わります。

デバイスのスクリーンサイズを切り替える

Assistant Editor の右下にあるメニューボタンのうち、右側のボタンがプレビュー表示上のデバイスのスクリーンサイズを切り替えるボタンです。

このボタンを押下すると、プレビュー表示のデバイスのスクリーンサイズが切り替わります。

プレビューはうまく表示されないことがある

非常に便利なプレビュー表示ですが、設定したレイアウトがうまく反映されないこともあります。このため、プレビューの利用はレイアウトの編集時のみとして、最終的な確認はシミュレータおよび実機で行うことをおすすめします。

Utilities Pain - Size Inspector 上の表示

Auto Layout 有効時には、コンポーネントを選択していると Size Inspector にも Auto Layout 関連の項目が表示されます。

上から順番に確認していきましょう。

Frame

従来どおりの Frame を編集する機能です。

Content Hugging Priority

選択中のコンポーネントについて、水平・垂直方向の Content Hugging Priority を編集します。Content Hugging Priority については、次回以降で説明します。

Content Compression Resistance Priority

選択中のコンポーネントについて、水平・垂直方向の Content Compression Resistance Priority を編集します。Content Compression Resistance Priorityについては、次回以降で説明します。

Intrinsic Size

選択中のコンポーネントについて、Canvas でレイアウトを編集する際の Intrinsic Size の導出方法を指定できます。Placeholder を選択することによって、Interface Builder での編集時のみ有効な Intrinsic Size を設定することができます。Intrinsic Size については、次回以降で説明します。

Contraints

ここには選択中のコンポーネントに紐づく制約が表示されます。

Utilities Pain - Attribute Inspector 上の表示

制約を選択している際には、Attribute Inspector に選択している制約の情報が表示されます。ここで制約を編集することが可能です。

Relation

下記の Constant で指定した値がレイアウトに適用される際の条件を指定します。条件は下記の３種類です。

• Equal
• Less Than or Equal
• Greater Than or Equal

ボタンの幅に関する制約の場合を考えてみましょう。Constant の値が 20 であれば、ボタンの幅は Equal では 20pt、Less Than or Equal では 20pt 以下、Greater Than or Equal では 20pt 以上であるという制約になります。

Constant

上記の Relation で説明した通り、制約の具体的な値を指定します。

Direction

制約において左右を表す方法を指定します。以下の２種類が選択できます。

• Leading to Trailing
• Left to Right

デフォルトでは Leading to Trailing です。

Priority

設定した制約同士が競合する場合の、レイアウトへの適用の優先順位を指定します。1 〜 1000 までの間で、数値が大きいほど優先順位が高くなります。

Placeholder

このオプションを有効にすると、対象の制約を Interface Builder での編集時のみ有効な Placeholder として扱います。

まとめ

今回は、Xcode 5 から Auto Layout を編集する際に必要となる機能について確認しました。少し項目が多いですが、使っているうちに自然と覚えられると思います。

次回は、制約の種類について確認したいと思います。