読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

XcodeでAuto Layoutを使って理解してみる

f:id:inagex:20140323134906p:plain


iOSアプリエンジニア養成読本を見ていて、Auto Layoutを扱っていたのでやってみたいと思います。


基本的に本の内容をやっていきますが、気になるところやわからないところは補足しながらやってみようと思います。


まず新規プロジェクトを作成してSingle View Applicationを選択します。


f:id:inagex:20140323135312p:plain


プロジェクト名は以下のような設定でいいと思います。


f:id:inagex:20140323135345p:plain


ここではAuto Layoutを使って2つのUILabelの位置を指定していきます。


Auto Layoutを使うことによって画面サイズや向きの違いにも、柔軟に対応できるレイアウトを作成することができます。


f:id:inagex:20140323135928p:plain


ここではAuto Layoutを使って2つのUIlabelを右下に配置していきます。分かりやすいように背景の色を変更しています。


例えばAuto Layoutを使わないと


f:id:inagex:20140323135912p:plain


垂直方向ではボタンは正確な位置にありますが水平方向にすると


f:id:inagex:20140323140048p:plain


なんとボタンがみえない。


このような現象をAuto Layoutを使うことで解決できます。


本に乗っ取り、InterfaceBulder(IB)から位置の制約を追加していきます。


Auto Layout メニューというものを活用していきます。


僕も知らなかったのですが以下のようにメニューが分かれています。


f:id:inagex:20140323140827p:plain


まずはPinメニューを開いて、右下にUIlabelが配置されるように制約を追加します。


f:id:inagex:20140323140954p:plain


赤線をクリックして実線の赤にしているところに注意です。


これでAdd 2 Constraintsをすれば制約追加完了となります。


Constraintsは制約という意味です。


そうするとIBには移動後の位置が赤の点線で表示されていてSize InspectorにはConstraintsが2つ追加されていることがわかると思います。


f:id:inagex:20140323141520p:plain


ここでAuto Lauout issuesのUpdate Framesを押すと制約された後の場所にUILabelが移動されます。


f:id:inagex:20140323141700p:plain


こんな感じに制約が適用されたのがわかります。


f:id:inagex:20140323141731p:plain


では本に乗っ取り、もうひとつのUILabelを先ほどのUILabelの横にAuto Layoutを使って移動させましょう。


赤のUILabelをcontrolを押しながら選択して紫のUILabelまで持っていくと以下のようなポップアップが表示されます。


f:id:inagex:20140323141959p:plain


ここでHorizontal Spacingを選択します。


新たな制約が追加されました。


f:id:inagex:20140323142114p:plain


次にマージンの値を詳細に制約に追加していきます。


Size Inspectorの制約の設定ボタンを押して、Select and Edit...で制約を編集していきます。


f:id:inagex:20140323142258p:plain


制約のSize InspectorのConstantの値を変更します。


f:id:inagex:20140323142410p:plain


ここでは10に変更しました。


変更してEnterを押すと変更がすでに反映されます。


次にふたつのUIlabelを下揃えでそろえていきます。


2つのUIlabelを選択してAlignを押します。


f:id:inagex:20140323142637p:plain


Bottom EdgeをチェックしてUpdateFramesの項目をAll Frames in Containerに変更し、Add 1 Constraintを押します。


そうすると追加した制約が適用された状態で表示されます。


こんな感じになりました。


f:id:inagex:20140323142842p:plain


ちなみにこれを水平方向にしても


f:id:inagex:20140323142923p:plain


ちゃんと制約が適用されて状態が崩れたり、はみ出したりしてない。


今後Auto Layoutを活用していければと感じました。