XcodeのAutoLayoutがいまいちよく分からない

公開日： 2015年6月22日月曜日 iPhone Swift Xcode プログラミング

iPhoneアプリを作ろうとしていて、XcodeのAutoLayoutで
さんざん詰まっているので、ひと通り機能をまとめてみた



Apple公式の「Auto Layoutガイド」によると
「Auto Layoutは、制約 (Constraint)に基づいて
画面レイアウトを調整する仕組みです。

OS X用、iOS用のアプリケーションに適用するレイアウトを、
短時間で作成し、容易に保守することができます。」とのこと

これによって画面サイズや向きの違いに応じた画面レイアウトを作ることが
できるので、AppleもこのAutoLayout機能を使ってアプリを作ることを推奨している

それは分かるんだけどXcodeを触ってみても、
いまいち感覚的に分からないので基本的な考えや使い方を
自分なりにまとめてみることにした

■Align：揃えに関する制約

　・Leading Edges　…Viewの左端を揃える
　・Trailing Edges　…Viewの右端を揃える
　・Top Edges　…Viewの上端を揃える
　・Bottom Edges　…Viewの下端を揃える

　・Holizontal Centers　…Viewの横方向の中心揃える
　・Vertical Centers　…Viewの縦方向の中心揃える
　・Baselines　…Viewのベースライン揃える

　・Horizontal Center in Container　…Container内で左右中心に配置
　・Vertical Center in Container　…Container内で上下中心に配置

■PIN：空間的配置に関する制約

　・Spacing to nearest neighbor　…上下左右隣のViewとのスペースを設定
　・Width　…Viewの幅を設定
　・Height　…Viewの高さを設定

　・Equal Widths　…複数のViewを同じ幅に揃える
　・Equal Heights　…複数のViewを同じ高さに揃える

■Issues：配置上の問題を表示し、どのような制約を追加/削除すればよいかの候補を表示

■Resizing：大きさが変わったとき、制約にどのような影響を及ぼすか、を指定

上の規則を意識しながらPreviewでどのような結果になるかや
Issuesでどんな警告やエラーが出るかを見ながら
いろいろ試行錯誤していけば使いこなせるかな

まだ直感的に自分の思った通りの配置にするのは
すんなりとはいかないけど、ちょっとずつ慣れていくしかないのかなー

参考資料：
Apple AutoLayoutガイド
https://developer.apple.com/jp/documentation/AutolayoutPG.pdf

今度こそ克服するAutoLayoutの使い方・基礎編～SwiftからはじめるiOSアプリ開発:その5【初心者向けアプリ開発3分tips】
http://engineer.typemag.jp/article/ra-ios-tips06