うさがにっき

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

アシスタントエディターとAuto Layoutによるレイアウトの作成

概要

アシストタントエディターやAuto Layoutを使って効率的にwidetの配置を行う

詳細

アシスタントエディターを使った画面のpreviewを表示

アシスタントエディターを開き、右側のジャンプバーを開き、Previewを選択する
f:id:tiro105:20150314163404p:plain
左下の「+」を選択することにより違う端末でのPreviewも表示できる
f:id:tiro105:20150314163420p:plain

Auto Layout

storyboardのここらへんのボタン
f:id:tiro105:20150314163616p:plain
左からAlign, Pin, Resolve Auto LayoutIssues, Resizing Behavior

Align

複数の部品のルールを指定
f:id:tiro105:20150314164519p:plain

Leading Edges 部品同士の左端をそろえる
Traling Edges 部品同士の右端をそろえる
Top Edges 部品同士の上端をそろえる
Bottom Edges 部品同士の下端をそろえる
Horizonal Centers 部品同士の横方向の中心を揃える
Vertical Centers 部品同士の縦方向の中心を揃える
Baselines ラベルなどのテキストの下を揃える

1つまたは、複数の部品のルールを指定

Horizontal Center in Container 表示エリアの横方向の中心に揃える
Vertival Center in Container 表示エリアの縦方向の中心に揃える

上記のルールを準備した後に実行

Update Frames Add Constrainsボタンを押した時、Interface Builderに配置した部品の位置も変更するかを指定
Add Constrains このボタンを押すと、上記のルールを部品に追加

Pin

部品をピンで止めるように、部品の位置やサイズを指定
f:id:tiro105:20150314165139p:plain

Spacing to nearest neighbor 一番近い部品との距離を指定、赤い点線をクリックすると実戦となってルールを選ぶことができる
Width 部品の幅を指定
Height 部品の高さを指定
Equal Widths 複数の部品の幅を同じにする
Equal Heights 複数の部品の高さを同じにする
Align 複数の部品の選択している時、Alignと同じ指定をここからもできる

上記のルールを準備した後に実行

Update Frames Add Constrainsボタンを押した時、Interface Builderに配置した部品の位置も変更するかを指定
Add Constrains このボタンを押すと、上記のルールを部品に追加

左下にボタンを配置したい場合
Spacing to nearest neighborの左と下の条件を指定
f:id:tiro105:20150314165201p:plain
回転させても下にいる
f:id:tiro105:20150314165249p:plain

Resolve Auto Layout Issues

画面に置いた部品を、画面に対してうまく調整してくれるボタン
これを使うと簡単にレイアウトの調整が行える
f:id:tiro105:20150314165948p:plain

Selected Views:選択している部品に対して行う
Add Views in ViewController:画面上のすべての部品に対して行う

Update Frames 部品の位置を指定されているルールに違いがある場合、ルールに合わせて部品の位置を変更
Update Constrains 部品の位置を指定されているルールに違いがある場合、部品の位置に合わせてルールを変更
Add Missing Constrains ルールが足りない場合、足りないルールを自動的に追加
Reset to Suggested Constrains 設定されているルールを一度削除して、必要なルールを自動的に追加
Clear Constrains 指定されているルールを削除

Reset to Suggested Constrainsは割と使う
ボタンを適当に3つ置いた後、Reset to Suggested Constrainsをする
f:id:tiro105:20150314170226p:plain
横にしてもきちんと配置されている
f:id:tiro105:20150314170243p:plain

参考

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】