マルチデバイスに対応するためのAutoLayout

ソニックムーブ島根勉強会 β

2015/7/17 @asakahara

自己紹介 坂原 明裕 Twitter ID: @asakahara

• http://sakahara.hatenablog.jp

• 今月からソニックムーブのエンジニア

• 先月まで株式会社はてなでアプリを担当

• Iターンで島根に来ました

今日話すこと

• AutoLayout をこれから使いたい人やそもそもAutoLayout って何？って人が対象

• インターフェイスビルダーでのAutoLayoutの設定方法

• Xcode上で実際に動きを見てみる

AutoLayout の概要

• 画面サイズや向きの違いに柔軟に対応可能なレイアウトを作成できる

• Auto Layoutの基本となるのは制約 (Constraint)

• 以前からあるAutosizingよりも柔軟

• iOSデバイスの数が増えてきており、今後のiOS開発では必須といえる

インターフェイスビルダーでの設定方法

• Control-ドラッグ操作で制約を追加する

• 「Align」メニュー、「Pin」メニューで制約を追加する

• メニューからやる方が使いやすいのおすすめ

各メニューでできること

• Align - Viewの整列など

• Pin - Viewの位置、サイズの指定

• Resolve Auto Layout Issues - AutoLayoutの問題の解決など

「Align」メニュー

• Leading(左)、Trailling(右)、Top(上)、Bottom(下)

Edges - 複数のViewのそれぞれの端の位置を整列させる

• Horizontal、Vertical Centers - 複数のViewの横、縦それぞれの中心位置を指定する

• Baselines - 複数のViewのベースライン位置を揃える

• Horizontal、Vertical Center in Container - 横、縦それぞれの親Viewと中心位置を揃える

「Pin」メニュー

• Spacing to nearest neighbor - 親Viewに対して上下左右の間隔が設定できる

• Width、Height - 横の縦のサイズを固定で設定できる

• Equal Widths、Equal Heights - 複数のViewのそれぞれ横、縦のサイズを同じにする

• Aspect Ratio - アスクペクト比でViewのサイズを指定(Multipilerに例えば3:4と設定)

「Resolve Auto Layout Issues」メニュー

• Update Frames - Frameと制約に矛盾がある場合に、Frameを制約に合うように変更

• Update Constraints - 制約を Frame に合うように変更

• Add Missing Constraints - 対象のViewに、適当な制約を自動的に選択して追加

• Reset to Suggested Constraints - 現在の制約を全て削除した上で、適当な制約を自動的に選択して追加

• Clear Constraints - 対象のViewに設定された制約を全て削除

ここからはXcode上で デモやります

もっといろいろ知りたい人は こちらを一読ください

• https://developer.apple.com/jp/documentation/AutolayoutPG.pdf

今日言いたかったこと

• ソースコードに定義を書くより、なるべくStoryboardの設定で完結するようにする

• 慣れていない段階では頭で考えるより実際に設定して動きを確認する方が早い

• 初心者の人はAutoLayoutが苦手だとよく聞くけど、実際に動かすとよさが分かるはず

ご清聴ありがとうございました