WWDCに行ってきたけど内容については一切話せません @ mixi http://atnd.org/event/mixiwwdc2013 で発表した内容です。

1. Auto Layout 入門
株式会社ミクシィ 武田祐一

2. Auto Layout とは
• iOS/OSX のアプリケーションでUIのパーツ
を配置するときの位置やサイズを指定す
る方法
• iOS6以降,OSX 10.7 以降で利用可能
• iOS5でビルドしたらクラッシュする原因の一つ

3. Auto Layout V.S. Auto Resizing
Auto Layout
• 親ビューや兄弟のビュー
に対しての制約で記述
• 親ビュー以外にも、兄弟
のビューなどが変化した
時にもリサイズされる
Auto Resizing (spring and struts)
• 上下左右のマージン、
幅と高さを指定
• 親ビューのサイズが変
わった時の配置の方法

4. なぜ今Auto Layoutか
• Auto Layoutの方がより記述力が高いので、view
をstoryboard, xib に寄せることができる
• iOS7の導入を見越して

5. Auto Layout の制約の種類
• Pin
– 親ビューの位置や、隣り
合うビューの位置から自
分の位置を設定する
– 幅や高さを絶対値で指定
することも可能

6. Auto Layout の制約の種類
• Align
– 隣り合うビューと位置を
揃えることができます
– 親のビューの中心にセン
タリングすることも可能

7. 制約の例
UILabel
Top Space To Super View (=20)
Leading Space To Super View (=20)
親ビューからの位置で指定

8. 制約の例
UILabel
Top Space To Super View (=20)
Leading Space To Super View (=20)
兄弟ビューの位置に合わせる
UILabel-2
Horizontal Space (=20)
Bottom Alignment

9. 制約の例
UILabel
Top Space To Super View (=20)
Leading Space To Super View (=20)
ビューの終端側（右※、下）からの指定も可能
UILabel-2
Horizontal Space (=20)
Bottom Alignment
UILabel-3
Trailing Space To Super View (=50)
※イスラム語の右から左へ読む言語では終端は左になります

10. 制約の例
UILabel
Top Space To Super View (=20)
Leading Space To Super View (=20)
ビューの終端側（右※、下）からの指定も可能
UILabel-2
Horizontal Space (=20)
Bottom Alignment
UILabel-3
Trailing Space To Super View (=50)
※イスラム語の右から左へ読む言語では終端は左になります

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

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

13. Xcode / Interface Builder での設定方法

14. Xcode / Interface Builder での設定方法

15. 設定されているAutoLayoutの制約
• 青はユーザーが設
定した制約
• 紫はIBが自動的に
設定した制約
※位置やサイズを一意に決めら
れない場合、IBが自動的に制約
を追加します

16. どのように制約が適用されるか
このような制約があるときに、ビューを回転
(親ビューをリサイズ)させるとどうなるでしょう
左右ともに、20ポイントを保つ

17. どのように制約が適用されるか
このような制約があるときに、ビューを回転
(親ビューをリサイズ)させるとどうなるでしょう
左右ともに、20ポイントを保つ

18. なぜ横幅が伸びるか
左右ともに、20ポイントを保つ
この制約を保ちつつ、親ビューの横幅が変化したら
TextViewのサイズが変化するしかない

19. どのように制約が適用されるか ２
• ボタンを２つ配置
• 制約
• ボタンAと親ビューの左
• ボタンBと親ビューの右
• ボタン間
→ボタンの幅が不定になるのでAの幅についてIBが自動で補正

20. どのように制約が適用されるか ２
回転するとボタンBが伸びる

21. どのように制約が適用されるか ２
ボタンBの最大幅を決めて、右端を余らせるには？
最大で200

22. ボタンBの最大幅を決めて、右端を余らせるには？
①伸びきった時の幅を設定(=203)
②ボタンの幅の下限を設定(≧135)
※この時、①より②が優先されるようにPriorityを設定する

23. ボタンBの最大幅を決めて、右端を余らせるには？
①ボタンの幅を設定(=200)
②ボタンの幅の上限
を設定(≦200)
※この時、①より②が優先されるようにPriorityを設定する
③マージンの下限
を設定（≧20)

25. ボタンBの最大幅を決めて、右端を余らせるには？
①伸びきった時の幅を設定(=203)
②ボタンの幅の下限を設定(≧135)
※この時、①より②が優先されるようにPriorityを設定する

26. Auto Layout なあんまりなところ
• レイアウトをソースから直接制御したとき、
制約が維持されない
– view.frame を直接触ると結局今までのようにすべてを
処理しないといけない
– UIViewのAnimationで使えない
※AutoLayoutの制約の実態はNSLayoutConstraintです。このクラスで
は、
やや視覚的な記法で制約を記述することができるので、frameの代わり
にこちらを用いればいいかも…

27. まとめ
• Auto Resizingと比べると、AutoLayoutの方が記述
量が減ってレイアウトをxib, storbyboardに集約
できそう
• とはいえ、iOS6以降でしか対応していない
• view.frameをソースから触ると、管理が煩雑化し
そう

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

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