Auto Layout 入門

株式会社ミクシィ　武田祐一

Auto Layout とは

• iOS/OSX のアプリケーションで UI のパーツを配置するときの位置やサイズを指定する方法

• iOS6 以降 , OSX 10.7 以降で利用可能 • iOS5 でビルドしたらクラッシュする原因の一つ

Auto Layout V.S. Auto Resizing

Auto Layout

• 親ビューや兄弟のビューに対しての制約で記述

• 親ビュー以外にも、兄弟のビューなどが変化した時にもリサイズされる

Auto Resizing (spring and struts)

• 上下左右のマージン、幅と高さを指定

• 親ビューのサイズが変わった時の配置の方法

なぜ今 Auto Layout か

• Auto Layout の方がより記述力が高いので、 view を storyboard, xib に寄せることができる

• iOS7 の導入を見越して

Auto Layout の制約の種類

• Pin – 親ビューの位置や、隣り

合うビューの位置から自分の位置を設定する

– 幅や高さを絶対値で指定することも可能

Auto Layout の制約の種類

• Align – 隣り合うビューと位置を

揃えることができます

– 親のビューの中心にセンタリングすることも可能

制約の例

UILabel

Top Space To Super View (=20)

Leading Space To Super View (=20)

親ビューからの位置で指定

制約の例

UILabel

Top Space To Super View (=20)

Leading Space To Super View (=20)

兄弟ビューの位置に合わせる

UILabel-2Horizontal Space (=20)

Bottom Alignment

制約の例

UILabel

Top Space To Super View (=20)

Leading Space To Super View (=20)

ビューの終端側（右※、下）からの指定も可能

UILabel-2Horizontal Space (=20)

Bottom Alignment

UILabel-3Trailing Space To Super View (=50)

※ イスラム語の右から左へ読む言語では終端は左になります

制約の例

UILabel

Top Space To Super View (=20)

Leading Space To Super View (=20)

ビューの終端側（右※、下）からの指定も可能

UILabel-2Horizontal Space (=20)

Bottom Alignment

UILabel-3Trailing Space To Super View (=50)

※ イスラム語の右から左へ読む言語では終端は左になります

Demo

回転したとき、下と左のマージンを保てている

隣のラベルのサイズが増えた時に自動的に伸びる

Xcode / Interface Builder での設定方法

Xcode / Interface Builder での設定方法

設定されている AutoLayout の制約

• 青はユーザーが設定した制約

• 紫は IB が自動的に設定した制約

※ 位置やサイズを一意に決められない場合、 IB が自動的に制約を追加します

どのように制約が適用されるか

このような制約があるときに、ビューを回転( 親ビューをリサイズ ) させるとどうなるでしょう

左右ともに、 20 ポイントを保つ

どのように制約が適用されるか

このような制約があるときに、ビューを回転( 親ビューをリサイズ ) させるとどうなるでしょう

左右ともに、 20 ポイントを保つDemo

なぜ横幅が伸びるか

左右ともに、 20 ポイントを保つ

この制約を保ちつつ、親ビューの横幅が変化したらTextView のサイズが変化するしかない

どのように制約が適用されるか ２

• ボタンを２つ配置• 制約• ボタン A と親ビューの左• ボタン B と親ビューの右• ボタン間

→ ボタンの幅が不定になるので A の幅について IB が自動で補正

どのように制約が適用されるか ２

回転するとボタン B が伸びる

どのように制約が適用されるか ２

ボタン B の最大幅を決めて、右端を余らせるには？

最大で 200

ボタン B の最大幅を決めて、右端を余らせるには？

① 伸びきった時の幅を設定 (=203)

② ボタンの幅の下限を設定 (≧135)

※ この時、①より②が優先されるように Priority を設定する

ボタン B の最大幅を決めて、右端を余らせるには？

① ボタンの幅を設定 (=200)

② ボタンの幅の上限を設定 (≦200)

※ この時、①より②が優先されるように Priority を設定する

③ マージンの下限を設定（≧ 20)

ボタン B の最大幅を決めて、右端を余らせるには？

① 伸びきった時の幅を設定 (=203)

② ボタンの幅の下限を設定 (≧135)

※ この時、①より②が優先されるように Priority を設定する

Demo

Auto Layout なあんまりなところ

• レイアウトをソースから直接制御したとき、制約が維持されない– view.frame を直接触ると結局今までのようにすべて

を処理しないといけない– UIView の Animation で使えない

※AutoLayout の制約の実態は NSLayoutConstraint です。このクラスでは、やや視覚的な記法で制約を記述することができるので、 frame の代わりにこちらを用いればいいかも…

まとめ

• Auto Resizing と比べると、 AutoLayout の方が記述量が減ってレイアウトを xib, storbyboard に集約できそう

• とはいえ、 iOS6 以降でしか対応していない• view.frame をソースから触ると、管理が煩雑化

しそう

まとめ

• 今日の内容については、 github にある mixi の iOSTraning にまとめます！

時間押してます !!!!!