Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

130624 auto layout

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

で発表した内容です。

  • Inicia sesión para ver los comentarios

130624 auto layout

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

×