iOS
AutoLayout
More than 1 year has passed since last update.


はじめに

21日目は、スマートテック・ベンチャーズの奥寺(@okuderap )が担当いたします。

今回は、AutoLayoutについてです。

私自身AutoLayoutにはいつも頭を悩まされているので

基礎からまとめてみたいと思います。


そもそもAutoLayoutとは

iPhone SEにiPhone 7, iPhone 7 Plusといった

異なる画面サイズに対して自動的にレイアウトを調整してくれるヤツ。

画面回転によって縦横に比率が変わった場合にも対応してくれるヤツ。

なかなか扱いに困るヤツ。


Constraint(制約)について

AutoLayoutは、各要素に制約を設定してレイアウトを決めていきます。

制約の種類として、今回は以下の2種類について書きます。

・Pin: 要素の大きさや位置を固定する

・Align: 要素を画面の中央に揃えたり、複数の要素を等しい高さに揃えたりする

※Pin, AlignだけでなくStackも重要ですが

 今回は超基礎編ということでカットします(>人<)


Pin

要素の大きさや位置を固定します。

pin.png

Spacing to nearest neighbor (A-1 ~ A-4)

中心にある□マークの周りの赤色の点線を選択して

実線にするとそのPinが有効になる。

A-1: top

要素の上端を固定

A-2: leading

要素の左端を固定

A-3: bottom

要素の下端を固定

A-4: trailing

要素の右端を固定


▼で制約の基準を選択

topの▼マークを選択すると、以下のように表示されどこを基準にピン留めするか選択できる。

スクリーンショット 2016-12-21 2.44.48.png

例えば、

ステータスバーのスペースを空ける場合は

「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

要素を画面の中央に揃えたり、複数の要素を等しい高さに揃えたりします。

align.png

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さんです。

お楽しみに!