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

うさがにっき

読書感想文とプログラムのこと書いてきます

Auto Layoutの使い方_1

概要

iOSでも様々なアスペクト比の端末が登場するようになってきて、従来の複数端末のUIを準備するのが大変になってきた
その際に使用するのがAuto Layout
これを使うことによって様々な端末へのレイアウトファイルを1つにまとめることができるtiro105.hateblo.jp
つまり、これの詳細

詳細

Auto Layoutを使用せずに何も考えずパーツを配置するとstoryboard上は中心に配置してあるように見えても端末によって場所がずれる
storyboard
f:id:tiro105:20150411160130p:plain
端末上
f:id:tiro105:20150411160146p:plain

この状態を防ぐためにパーツに規則を与え、どのような端末でも思った位置に配置するのがAuto Layout
AlignからHorizonal Center in Container, Vertical Center in Containerにチェックを入れて、Add 2 Constraintsを押下
f:id:tiro105:20150411160555p:plain
十字のオレンジの直線が引かれる
f:id:tiro105:20150411160631p:plain
中心に配置されるようになる
f:id:tiro105:20150411160727p:plain

拘束(Constraints)についての詳しい情報はインターフェースビルダーのDockの中から見れる
f:id:tiro105:20150411161038p:plain
十字の直線の色がオレンジなのは拘束(Constraints)が不十分だから
どのような問題があるか見てみるために、ナビゲーターエリアのイシューナビゲーターを見てみる
f:id:tiro105:20150411161224p:plain

Ambiguous Layout: Position and size are ambiguous for "View".
Viewの位置かサイズが曖昧(ambiguous)だと言っている
位置は中央と設定しているのでサイズが曖昧と怒られている様子

イシューナビゲーターでは問題しかわからないので、実際の解決方法を探す
インタフェースビルダーのDockにある右上赤矢印をクリック
f:id:tiro105:20150411161820p:plain
ここから自動解消してみる
赤丸をクリック
f:id:tiro105:20150411161949p:plain
Add Missing Constraintsをクリックして、サイズを固定する
するとDockにConstraintsが増えている
f:id:tiro105:20150411162100p:plain
実機で動かしても中央に表示されるようになっている
f:id:tiro105:20150411162328p:plain
f:id:tiro105:20150411162338p:plain
自動的に修正されたものは、やりたいこととちょっと違うことがあるので自分で設定したい
ので、自分で位置やサイズを設定する

対象のViewを選択した状態で、Pinメニューをクリック
f:id:tiro105:20150411162700p:plain
widthとheightを300に指定して、Add Constraintsを押下
f:id:tiro105:20150411162835p:plain
ViewにConstraintsが追加された
f:id:tiro105:20150411163026p:plain
実機で動かしても中央で表示されている
f:id:tiro105:20150411163126p:plain
f:id:tiro105:20150411163136p:plain

今回は実際のViewのサイズを指定する方法で、拘束を追加したが、親のViewとの関係でサイズを指定したい場合なども存在する
次はその方法をまとめる

広告を非表示にする