130624 auto layout
DESCRIPTION
WWDCに行ってきたけど内容については一切話せません @ mixi http://atnd.org/event/mixiwwdc2013 で発表した内容です。TRANSCRIPT
![Page 1: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/1.jpg)
Auto Layout 入門
株式会社ミクシィ 武田祐一
![Page 2: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/2.jpg)
Auto Layout とは
• iOS/OSX のアプリケーションで UI のパーツを配置するときの位置やサイズを指定する方法
• iOS6 以降 , OSX 10.7 以降で利用可能 • iOS5 でビルドしたらクラッシュする原因の一つ
![Page 3: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/3.jpg)
Auto Layout V.S. Auto Resizing
Auto Layout
• 親ビューや兄弟のビューに対しての制約で記述
• 親ビュー以外にも、兄弟のビューなどが変化した時にもリサイズされる
Auto Resizing (spring and struts)
• 上下左右のマージン、幅と高さを指定
• 親ビューのサイズが変わった時の配置の方法
![Page 4: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/4.jpg)
なぜ今 Auto Layout か
• Auto Layout の方がより記述力が高いので、 view を storyboard, xib に寄せることができる
• iOS7 の導入を見越して
![Page 5: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/5.jpg)
Auto Layout の制約の種類
• Pin – 親ビューの位置や、隣り
合うビューの位置から自分の位置を設定する
– 幅や高さを絶対値で指定することも可能
![Page 6: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/6.jpg)
Auto Layout の制約の種類
• Align – 隣り合うビューと位置を
揃えることができます
– 親のビューの中心にセンタリングすることも可能
![Page 7: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/7.jpg)
制約の例
UILabel
Top Space To Super View (=20)
Leading Space To Super View (=20)
親ビューからの位置で指定
![Page 8: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/8.jpg)
制約の例
UILabel
Top Space To Super View (=20)
Leading Space To Super View (=20)
兄弟ビューの位置に合わせる
UILabel-2Horizontal Space (=20)
Bottom Alignment
![Page 9: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/9.jpg)
制約の例
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)
※ イスラム語の右から左へ読む言語では終端は左になります
![Page 10: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/10.jpg)
制約の例
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
![Page 11: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/11.jpg)
回転したとき、下と左のマージンを保てている
![Page 12: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/12.jpg)
隣のラベルのサイズが増えた時に自動的に伸びる
![Page 13: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/13.jpg)
Xcode / Interface Builder での設定方法
![Page 14: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/14.jpg)
Xcode / Interface Builder での設定方法
![Page 15: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/15.jpg)
設定されている AutoLayout の制約
• 青はユーザーが設定した制約
• 紫は IB が自動的に設定した制約
※ 位置やサイズを一意に決められない場合、 IB が自動的に制約を追加します
![Page 16: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/16.jpg)
どのように制約が適用されるか
このような制約があるときに、ビューを回転( 親ビューをリサイズ ) させるとどうなるでしょう
左右ともに、 20 ポイントを保つ
![Page 17: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/17.jpg)
どのように制約が適用されるか
このような制約があるときに、ビューを回転( 親ビューをリサイズ ) させるとどうなるでしょう
左右ともに、 20 ポイントを保つDemo
![Page 18: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/18.jpg)
なぜ横幅が伸びるか
左右ともに、 20 ポイントを保つ
この制約を保ちつつ、親ビューの横幅が変化したらTextView のサイズが変化するしかない
![Page 19: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/19.jpg)
どのように制約が適用されるか 2
• ボタンを2つ配置• 制約• ボタン A と親ビューの左• ボタン B と親ビューの右• ボタン間
→ ボタンの幅が不定になるので A の幅について IB が自動で補正
![Page 20: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/20.jpg)
どのように制約が適用されるか 2
回転するとボタン B が伸びる
![Page 21: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/21.jpg)
どのように制約が適用されるか 2
ボタン B の最大幅を決めて、右端を余らせるには?
最大で 200
![Page 22: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/22.jpg)
ボタン B の最大幅を決めて、右端を余らせるには?
① 伸びきった時の幅を設定 (=203)
② ボタンの幅の下限を設定 (≧135)
※ この時、①より②が優先されるように Priority を設定する
![Page 23: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/23.jpg)
ボタン B の最大幅を決めて、右端を余らせるには?
① ボタンの幅を設定 (=200)
② ボタンの幅の上限を設定 (≦200)
※ この時、①より②が優先されるように Priority を設定する
③ マージンの下限を設定(≧ 20)
![Page 24: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/24.jpg)
![Page 25: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/25.jpg)
ボタン B の最大幅を決めて、右端を余らせるには?
① 伸びきった時の幅を設定 (=203)
② ボタンの幅の下限を設定 (≧135)
※ この時、①より②が優先されるように Priority を設定する
Demo
![Page 26: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/26.jpg)
Auto Layout なあんまりなところ
• レイアウトをソースから直接制御したとき、制約が維持されない– view.frame を直接触ると結局今までのようにすべて
を処理しないといけない– UIView の Animation で使えない
※AutoLayout の制約の実態は NSLayoutConstraint です。このクラスでは、やや視覚的な記法で制約を記述することができるので、 frame の代わりにこちらを用いればいいかも…
![Page 27: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/27.jpg)
まとめ
• Auto Resizing と比べると、 AutoLayout の方が記述量が減ってレイアウトを xib, storbyboard に集約できそう
• とはいえ、 iOS6 以降でしか対応していない• view.frame をソースから触ると、管理が煩雑化
しそう
![Page 28: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/28.jpg)
まとめ
• 今日の内容については、 github にある mixi の iOSTraning にまとめます!
![Page 29: 130624 auto layout](https://reader038.vdocuments.pub/reader038/viewer/2022102815/55820da7d8b42aa9498b5500/html5/thumbnails/29.jpg)
時間押してます !!!!!