#はじめに
21日目は、スマートテック・ベンチャーズの奥寺(@okuderap )が担当いたします。
今回は、AutoLayoutについてです。
私自身AutoLayoutにはいつも頭を悩まされているので
基礎からまとめてみたいと思います。
#そもそもAutoLayoutとは
iPhone SEにiPhone 7, iPhone 7 Plusといった
異なる画面サイズに対して自動的にレイアウトを調整してくれるヤツ。
画面回転によって縦横に比率が変わった場合にも対応してくれるヤツ。
なかなか扱いに困るヤツ。
#Constraint(制約)について
AutoLayoutは、各要素に制約を設定してレイアウトを決めていきます。
制約の種類として、今回は以下の2種類について書きます。
・Pin: 要素の大きさや位置を固定する
・Align: 要素を画面の中央に揃えたり、複数の要素を等しい高さに揃えたりする
※Pin, AlignだけでなくStackも重要ですが
今回は超基礎編ということでカットします(>人<)
#Pin
要素の大きさや位置を固定します。
Spacing to nearest neighbor (A-1 ~ A-4)
中心にある□マークの周りの赤色の点線を選択して
実線にするとそのPinが有効になる。
A-1: top
要素の上端を固定
A-2: leading
要素の左端を固定
A-3: bottom
要素の下端を固定
A-4: trailing
要素の右端を固定
###▼で制約の基準を選択
topの▼マークを選択すると、以下のように表示されどこを基準にピン留めするか選択できる。
例えば、
ステータスバーのスペースを空ける場合は
「Top Layout Guide」を選択し、ステータスバーの下を基準とする。
ステータスバーのスペースを空けたく無い場合は
Viewを選択し、Viewの上端を基準とする。
A-5: Constrain to margins
画面左右のマージン(デフォルトはチェックが付いていてマージン有)
B-1: Width
要素の幅を固定
B-2: Height
要素の高さを固定
C-1: Equal Widths(複数要素選択時のみ)
複数の要素の幅を等しくする
C-2: Equal Heights(複数要素選択時のみ)
複数の要素の高さを等しくする
C-3: Aspect Ratio
要素の縦横比を固定
C-4: Align(複数要素選択時のみ)
複数の要素を揃える
#Align
要素を画面の中央に揃えたり、複数の要素を等しい高さに揃えたりします。
A-1: Leading Edges
複数の要素の左端を揃える
A-2: Trailing Edges
複数の要素の右端を揃える
A-3: Top Edges
複数の要素の上端を揃える
A-4: Bottom Edges
複数の要素の下端を揃える
B-1: Horizontal Centers
複数の要素の水平方向の中心を揃える
B-2: Vertical Centers
複数の要素の垂直方向の中心を揃える
B-3: Baselines
複数のLabelなどのテキストの下を揃える
C-1: Horizontally in Container
画面の水平方向の中心に揃える
C-2: Vertically in Container
画面の垂直方向の中心に揃える
#最後に
今回は、AutoLayout超基礎編ということでPinとAlignについて
それぞれどんな制約を設定できるのかまとめてみました。
スマートテック・ベンチャーズでは、未経験だけどiOSの開発をやりたい！という人を募集しています。
Advent Calendarのスマートテック・ベンチャーズページに会社およびWantedlyのURLをのせていますので、興味のある方は是非ご覧ください。
http://qiita.com/advent-calendar/2016/stv
明日は@KentaKudoさんです。
お楽しみに！