【Swift】AutoLayoutまとめ

昔書いていた記事が中途半端に残っていたのでメモ程度にまとめた。

やっぱりmixiのが勉強になるのかな
Auto Layout入門 · mixi-inc/iOSTraining Wiki · GitHub

この本も参考になる

◼︎AutoLayout

「制約」ベースのレイアウトシステム。
既存のレイアウトシステムであるAutosizingを置き換える目的で導入された昨日

◼︎Constraint

レイアウトを決定するための「制約」を表している
他のUIコンポーネントとの相対的な位置やサイズを制約として定義するもの。
NSLayoutConstraintというクラスのインスタンスによって表現sれている

iOS6 Auto Layout

◼︎制約の種類

親ビューの上や左から何ポイント離すか。Viewの幅や高さの指定。
兄弟のViewに対してどれくらいの幅を持たせるかなど。
Pinの例

幅(Width)
高さ(Height)
兄弟ビューに対して水平方向にどれくらい間隔をあけるか(Horizontal Spacing)
兄弟のビューに対して垂直方向にどれくらい間隔をあけるか(Vertical Spacing)
親ビューに対して左側にどれくらい間隔をあけるか(Leading Space to SuperView)
親ビューに対して左側にどれくらい間隔をあけるか(Trailing Space to SuperView)
Top Space to SuperView
Bottom Space to SuperView
兄弟ビューと幅を同じに揃える(Width Equally)
兄弟ビューと高さを同じに揃える(Height Equally)

Leading(文字列の先頭側)
Trailing(文字列の末尾側)(アラビア語とか)

から制約をつける概念がある

Align

隣り合うViewの端を揃えることができる。
constraintの例

左端揃え(Left Edges)
右端揃え(Right Edges)
上揃え(Top Edges)
下揃え(Bottom Edges)
水平方向に並べ、縦方向の中心を揃える(Horizontal Centers)
垂直方向に並べ、横方向の中心を揃える
Labelやボタンなどのテキストの下を揃える(Baselines)
親ビューの中で縦方向の中心で揃える(Horizontal Center in Container)
親ビューの中で横方向の中心で揃える(Vertical Center in Container)

■Resolve Auto Layout Issue

Update Frames: 制約とInterface Builderでの位置がずれている時、Interface Builderでの位置を移動する。黄色い線が現れてる。

Update Constrains: 制約とInterface Builderでの位置がずれている時、Interface Builderでの位置に合わせて制約を変更する。

Add Missing Constraints: 制約が足りない場合、足りない制約を自動的に追加する。

Reset to Suggested Constrains: 設定されている制約を一度削除して、適切と思われる制約を自動的に追加する。

Clear Constrains: 指定されている制約を削除する。

◼︎いろいろなレイアウトサンプル

中央から上に100の場合

Horizontal Center in Containerにチェック
Vertical Center in Containerにチェックして100を入力

画面いっぱいにView

簡単そうだが注意が必要。
デフォルトのままで上下左右を0で指定すると、「左右にマージンがあり」、「ステータスバー分の空きあり」になるらしく実際には上と左右に少し隙間が空いてしまうみたい。
左右のマージンを使わない時は「Constrain to margins」のチェックをとる。
ステータスバー分空けない時は以下の画像のように「View」にチェックする。
f:id:komu11:20160822132638p:plain:w250

画面の下から左右いっぱいの複数のボタンを縦横の比率を固定で積み上げたい時

Pinを使って左、下、右端からの距離をそれぞれ0にする
「Aspect Ratio」にチェックする

画面中央に、画面サイズを基準にした幅(画面の60%)のViewを表示したい時

Alignで中心にする
「Aspect Ratio」にチェック
Viewを右クリックしたまま横方向にドラッグして背景のSuperViewで離す。
メニューから「Equal Widths」を選択する
Superviewをクリックしてから、サイズインスペクターで「Equal Width to: 」をダブルクリック。
Second Itemが「Superview」になってることを確認
もしFirst itemが「Superview」になってたらプルダウンメニューから「Reverse First And Second Item」を選択してSecond itemと入れ替える。
Multiplierを「60 : 100」にする。(「First item : Second Item」の比率)
黄色い線が出たらSelected Viewsの「Update frames」で治す。

複数のボタン(3つ)を同じ幅で並べて表示したい時

一番左のボタンの左端のPinを0に、一番右の右端のPinを0に、真ん中の左右のPinを0にする。高さは全て合わせる
左端のボタンを右クリック&ドラッグして、真ん中のボタンで離して「Equal Widths」を選択する
左端のボタンを右クリック&ドラッグして、右端のボタンで離して「Equal Widths」を選択する

複数のボタン(3つ)を等間隔で並べたい時

Pinで左のボタンは上と左、右のボタンは上と右の距離を0にしてサイズは50×50。
真ん中は上だけ0にしてサイズは50×50。
スペーサーを2つつくる。左スペーサーと右スペーサーそれぞれPinで両隣との距離を0に。
左スペーサーを右スペーサーにドラッグしてEqual Widthで2つの幅を同じにする。

コムブロ