AutoLayout1

AutoLayoutのポイント

・Constraintsを設定する前に、だいたいの大きさや位置はpreviewで設定しておく。そうしないと、Constraints変になる

①全画面にimageViewを表示する

UIImageViewを選択した状態で、add new constraintsを選択する。

Marginを上下左右0に設定。Add 4 Constrainsを押すのを忘れずに。

f:id:ichi6161:20170418155810p:plain

黄色いボタンwarning button が出たら、previewとconstraintsがずれているという意味。
f:id:ichi6161:20170418155804p:plain

黄色い部分をクリック。Fix Missplacemantをクリックする
f:id:ichi6161:20170418155759p:plain


②ボタンやラベルを高さ50で3つ重ねる場合

それぞれのボタンで同じように設定すれば0K f:id:ichi6161:20170420004359p:plain


③ボタンの高さと幅を同じ割合で配置

f:id:ichi6161:20170420005259p:plain

Aspect Ratioにチェックを入れる

f:id:ichi6161:20170420005307p:plain

Multiplierの所でwidth:heightで設定できる

f:id:ichi6161:20170420005221p:plain


④中央に以下のように、画面中央に、画面幅の60%の幅で、ボタンを配置する

f:id:ichi6161:20170420010301p:plain

まずは中央に配置
f:id:ichi6161:20170420011034p:plain

buttonを押した状態で、controlを押しながら、viewと結びつけ、まずはEqual Widthsにチェック
f:id:ichi6161:20170420011137p:plain

Multiplierで0.6に設定
f:id:ichi6161:20170420011350p:plain

図だと一応Aspect Ratioも設定している

f:id:ichi6161:20170420011657p:plain


⑤複数のボタンを上から100ピクセルの位置に、同じ幅で3つ配置する。ボタンの高さは50ピクセル

f:id:ichi6161:20170420141341p:plain

まず基準となるbuttonのConstraintsを設定
f:id:ichi6161:20170420141359p:plain

2番目のbuttonの設定

f:id:ichi6161:20170420141441p:plain

最後のbuttonの設置
f:id:ichi6161:20170420141625p:plain

赤、緑、黄色の順でクリックし高さと幅を基準(黄色)に合わせる
f:id:ichi6161:20170420141724p:plain

最後に3つのbuttonの中心が基準と同じになるように設定
f:id:ichi6161:20170420141844p:plain

Remove all ads