プログラミングと音楽とアニメとiPhoneとiPadとMacとAndroidとLogicとギターとテニスと車

アプリ開発系の勉強メモやTipsなどを中心に他いろいろと書いていきます。

AutoLayout入門 その2

AutoLayoutとは何かという細かい説明は省きますが、公式ドキュメントを読んで(読み途中ですが)勝手に理解した概要を書いておきます。

 

AutoLayoutを使う場合、UIを構成する要素のレイアウトを決めるための規則として制約(Constraint)というのがあります。この制約の追加、編集、削除などを行い、例えばUIButtonやUILabelといった要素の位置や大きさや向きが変わっても意図するレイアウトになるようにするということだと思います。

 

概要を念頭に入れた上で、後は実際に使って覚えるしかないと思います。

 

コードで制約を設定する方法とInterface Builderで制約を設定する方法があるようです。

なんとなく目で見て慣れていく方が理解しやすいと思い、Interface Builderでの設定方法を勉強しています。

 

まずは、作成したプロジェクトのstoryboardを開いて右下にあるメニューから見てみます。

f:id:travitu:20140426170226j:plain

赤で囲んだ箇所の左から「画面サイズの変更」「Constraintsの編集」「表示サイズの変更」ができます。

AutoLayoutの調整は中央の「Constraintsの編集」で行います。

「画面サイズの変更」と「表示サイズの変更」は、実際にクリックしてみるとすぐに分かると思います。