Auto Layoutで縦と横の画面切り替え #1

StoryboardでAuto Layoutを使って、縦置き(Portrate)と横置き(Landscape)で異なる配置の画面を作ってみます。プログラムのコードによる配置は使わずにInterface Builderの設定だけでやってみます。

img20150314_autolayout_00

iPhone 6 PlusやiPadのサイズを考慮しだすと個別の設定が複雑になるので、今回はiPhone 4SとiPhone 5のサイズのみでかつiOS 8をターゲットにします。

最初に、縦置き用の画面を作ります。編集画面の下に表示されているサイズクラスが Any Width と Any Height になっているのを確認しておきます。

画面の大部分を占める青い色のビューと小脇にある帯状の赤いビューを配置します。それぞれの大きさは、青いビューを600×520で、赤いビューを600×80にしました。

img20150314_autolayout_01 img20150314_autolayout_02

赤いビューの中にボタンを3つ配置します。Aボタンは左端、Bボタンは中央、Cボタンは右端で、ボタンの大きさは全て50×50にしました。

img20150314_autolayout_03 img20150314_autolayout_04 img20150314_autolayout_05

次に、配置の制約を設定します。

青いビューは上端・左端・右端が親のビューに張り付きます。下端は赤のビューに張り付きます。

img20150314_autolayout_06

赤いビューは下端・左端・右端が親のビューに張り付きます。高さはデバイスの画面サイズに関わらず固定です。

img20150314_autolayout_07

ボタンは、3つとも縦と横のサイズを固定にします。縦方向の位置は赤いビューの真ん中に揃えます。横方向の位置は3つとも異なり、Aボタンは赤いビューの左端を基準、Bボタンは赤いビューの中央、Cボタンは赤いビューの右端を基準にします。

img20150314_autolayout_08 img20150314_autolayout_09 img20150314_autolayout_10

縦置き画面についてはここまでです。

クラスサイズ Any での制約は、他のクラスサイズで制約が指定されていないときの保険です。今回のボタンの大きさのように、どのクラスサイズでも変わらないものについてはAnyに設定しておくのがよいと思います。

次回に続きます。

コメントを残す