StoryboardでAuto Layoutを使って、縦置き(Portrate)と横置き(Landscape)で異なる配置の画面を作ってみます。プログラムのコードによる配置は使わずにInterface Builderの設定だけでやってみます。
iPhone 6 PlusやiPadのサイズを考慮しだすと個別の設定が複雑になるので、今回はiPhone 4SとiPhone 5のサイズのみでかつiOS 8をターゲットにします。
最初に、縦置き用の画面を作ります。編集画面の下に表示されているサイズクラスが Any Width と Any Height になっているのを確認しておきます。
画面の大部分を占める青い色のビューと小脇にある帯状の赤いビューを配置します。それぞれの大きさは、青いビューを600×520で、赤いビューを600×80にしました。
赤いビューの中にボタンを3つ配置します。Aボタンは左端、Bボタンは中央、Cボタンは右端で、ボタンの大きさは全て50×50にしました。
次に、配置の制約を設定します。
青いビューは上端・左端・右端が親のビューに張り付きます。下端は赤のビューに張り付きます。
赤いビューは下端・左端・右端が親のビューに張り付きます。高さはデバイスの画面サイズに関わらず固定です。
ボタンは、3つとも縦と横のサイズを固定にします。縦方向の位置は赤いビューの真ん中に揃えます。横方向の位置は3つとも異なり、Aボタンは赤いビューの左端を基準、Bボタンは赤いビューの中央、Cボタンは赤いビューの右端を基準にします。
縦置き画面についてはここまでです。
クラスサイズ Any での制約は、他のクラスサイズで制約が指定されていないときの保険です。今回のボタンの大きさのように、どのクラスサイズでも変わらないものについてはAnyに設定しておくのがよいと思います。
次回に続きます。