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

前回からの続きです。

次に、横置き用の画面を作ります。編集画面の下に表示されているサイズクラスが Any Width と Compact Height の組み合わせになるように選択しておきます。

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

img20150314_autolayout_11 img20150314_autolayout_12

3つのボタンも横置き用に再配置します。Aボタンは下端、Bボタンは中央、Cボタンは上端です。ボタンの大きさは縦置きのままです。

img20150314_autolayout_13 img20150314_autolayout_14 img20150314_autolayout_15

次に、横置きの時にだけ使われる配置の制約を設定します。

青いビューは上端・下端・左端が親のビューに張り付きます。右端は赤のビューに張り付きます。縦置きの時と違うのは下端と右端の設定なので、その2つだけ制約を追加します。

img20150314_autolayout_16

赤いビューは上端・下端・右端が親のビューに張り付きます。幅はデバイスの画面サイズに関わらず固定です。縦置きの時と違うのは上端と幅の設定なので、その2つだけ制約を追加します。

img20150314_autolayout_17

ボタンは、横方向の位置は赤いビューの真ん中に揃えます。縦方向の位置は3つとも異なり、Aボタンは赤いビューの下端を基準、Bボタンは赤いビューの中央、Cボタンは赤いビューの上端を基準にします。いずれも、縦置きの時と違うところを制約として追加します。

img20150314_autolayout_18 img20150314_autolayout_19 img20150314_autolayout_20

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

この時点で、縦置き用の制約と横置き用の制約が衝突しているのでレイアウトエラーになっていると思います。

次回に続きます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください