iOSアプリケーションでAuto Layoutを利用してコントロールを画面の幅に合わせて表示する手順を紹介します。
Xcodeを起動し、プロジェクトを作成し、Main.storyboardファイルを開き、UIデザイナを表示します。今回は単純化のため Single View Application を作成しています。
右下のコントロール一覧から[Text View]をデザイナに配置します。
デザイナウィンドウの右下にアイコンが4つ並んでいます。この右から2番目のアイコン[├□┤]をクリックします。
下図の[Add New Constraints]ポップアップウィンドウが表示されます。
ウィンドウに値を入力します。上部のマージンに"10"、左右のマージンに"5"を入力します。下部のマージンには入力しません。上と左右のテキストボックスと中心の四角をつなぐ線が赤くなっていますが、下のテキストボックスとの線はオレンジ色の点線になっていることに注意してください。下方向の制約は作成しないことを意味しています。
テキストボックスと中心の四角をつなぐ線が赤くなっている場合はクリックしてオレンジ色の点線に変更します。
マージンエリアの下部の[Height]の左側のチェックボックスをクリックしてチェックをつけます。また右側のテキストボックスに160を入力します。設定ができた状態が下図です。
設定ができたらウィンドウ下部の[Add 4 Constraints]ボタンをクリックします。
この制約によりTextViewを画面の上端から10の位置、左から5の位置に配置し、右端は画面の右端から-5の位置まで、高さは160のコントロールサイズにします。
左側のコントロールのツリービューに制約(Constraints)が追加されます。ルートのノードの[View Controller Scene]の右側の右矢印が黄色のアイコンになっていれば正常です。
下方向のマージン制約をつけてしまった場合は、[View Controller Scene]の右側の右矢印が赤になります。赤の場合は制約が足りないか制約が競合しています。
制約作成後、デザイナウィンドウの右下の4つのアイコンの一番右のアイコン[├△┤]をクリックします。
下図のポップアップウィンドウが表示されます。下から5番目の[Update Frames]メニューをクリックします。
制約条件に従って、コントロールが再配置されます。画面の幅いっぱいにリサイズされたことが確認できます。
プロジェクトを実行します。iPhone 6s Plusのシミュレーターで表示した結果です。TextViewが画面幅に収まっています。
いったん実行を停止し、iPhone 4sのシミュレーターで実行します。下図が実行結果です。iPhone 4sの場合でもTextViewが画面幅に収まって表示されていることが確認できます。
画面幅に合わせてTextViewを配置できました。
