うさがにっき

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

Auto Layoutの使い方_2

概要

tiro105.hateblo.jp
前回の続き、Auto Layoutのまとめ

詳細

Auto Layoutを使った位置/サイズ指定のバリエーションをまとめる

  • 親ビューに対する上下左右の間隔で、位置とサイズを同時に設定
  • 親ビューに対して上と左の間隔で位置を設定し、サイズは別途指定
  • 親のビューに対する比率でサイズを設定し、位置は別途指定
  • 何らかの方法で幅、高さのいずれかを設定し、ビューのアスペクト比を指定して、もう片方のサイズを自動的に決める、位置は別途指定

親ビューに対する上下左右の間隔で、位置とサイズを同時に設定

pinを使い、上下左右の幅を決めて位置とサイズを決定する
f:id:tiro105:20150412005726p:plain
下部の位置を決めるときにはボタンではなく、いちばん下のViewを選択するように修正
f:id:tiro105:20150412005817p:plain
これで実行時指定した間隔が空いてViewが表示される
f:id:tiro105:20150412005911p:plain

親ビューに対して上と左の間隔で位置を設定し、サイズは別途指定

親ビューからの上左までの距離で位置を拘束し、サイズは別途指定する
f:id:tiro105:20150412010217p:plain
エミュレータでは拘束した位置に表示されている
f:id:tiro105:20150412010245p:plain
f:id:tiro105:20150412010254p:plain

親のビューに対する比率でサイズを設定し、位置は別途指定

親ビューに対する比率でサイズを決定し、位置は別途指定する
まずサイズ決定のために、親ビューとサイズを決定するViewを同時に選択状態にする
f:id:tiro105:20150412010819p:plain
PinからEqual Width, Equal Heightsを選び、Add Constraints押下
f:id:tiro105:20150412010956p:plain
このままだと親Viewと同じ大きさになってしまうので0.8ぐらいにする
対象となるViewを選択し、サイドインスペクターのEqual Width to : superviewの右端にあるEditを押下、その属性を編集するダイアログをポップアップさせてMultiplierの欄に0.8といれる
f:id:tiro105:20150412011301p:plain
次に位置を決定する
Alignメニューを選び、Horizontal/Vertical Center in Contanerの両方にチェックを入れ中央に配置する
f:id:tiro105:20150412011440p:plain
これで縦横の長さに対して0.8の中央に表示されるViewができた
f:id:tiro105:20150412011515p:plain
f:id:tiro105:20150412011523p:plain

ちなみにインターフェスビルダーと拘束しか結果が画面上違う場合は拘束に従ってインタフェースビルダー画面を更新することができる
pinの右横にあるボタンの「Update Frames」で更新できる
f:id:tiro105:20150412012144p:plain

何らかの方法で幅、高さのいずれかを設定し、ビューのアスペクト比を指定して、もう片方のサイズを自動的に決める、位置は別途指定

サイズを決定するために、幅を固定で設定し、ビューのアスペクト比で片方を指定することを設定
f:id:tiro105:20150412012526p:plain
Aspectで指定する拘束を選びアスペクト比を設定する
f:id:tiro105:20150412012622p:plain
位置をいつものalignでcenterに設定
f:id:tiro105:20150412012729p:plain
エミュレータ確認
f:id:tiro105:20150412013344p:plain
f:id:tiro105:20150412013349p:plain
縦でも横でも比率が保たれている