今回は、簡単なStoryboard・AutoLayoutの説明を書きます。
前回
はじめてのSwiftアプリ制作3: CocoaPods と SwiftLint
環境
Xcode 8.3
Swift 3.0
Storyboardとは
アプリ全体の画面の表示や遷移を見ながら、パーツの追加や表示の制御ができるツールです。
右下に表示されている様々なパーツをViewController（1枚の画面）の中に入れて、アプリの画面を作っていくことができます。
また、AutoLayout機能を使って追加したパーツの表示に制約をつけてどのように表示するかを制御し、レスポンシブなデザインにすることができます。
AutoLayout入門
iOSのアプリ開発では、様々なデバイスやパターンに対応しなくてはいけないという注意点があります。
上記のページにあるように、iPhone・iPadは現在までに様々な画面サイズの機種が出ています。またLandScape（横向き）に対応する場合にはその場合での表示を考えなければなりません。
そのため、Viewの各パーツにAutoLayoutで正しい制約をつけないと、iPhone7では正しく表示されていたはずが4sやPlusといった異なる画面サイズの機種で表示が崩れていたりボタンが押せなかったりしてアプリ申請がreject（却下）される場合があります。
AutoLayoutは応用も含めるとかなりのパターンがありますが、ここでは制約編集ボタンを使った方法とコントロール+ドラッグを使った方法の２種類を紹介いたします。
- 制約編集ボタンを使った方法
エディタ領域の右下に制約編集ボタンがあります。
こちらを使うことで各パーツに必要な制約を与えることができます。
左からStackボタン、Alignボタン、 Pinボタン、 Resolve Auto Layout Issuesボタンとなっています。
① Stackボタン
複数のビューを1つのスタックビューというものでグルーピングすることができます。
画面内で多くのパーツを入れたい場合は、このスタックビューを有効活用することでより簡単な設計にすることができます。
② Alignボタン
複数のパーツを選択した際に、それらの並び方を指定する制約ボタンです。
| 項目 | 設定される並び替えの属性 |
|---|---|
| Leading Edges | 先頭に揃える |
| Trailing Edges | 末尾に揃える |
| Top Edges | 上に揃える |
| Bottom Edges | 下に揃える |
| Horizontal Centers | 縦方向で中央に揃える |
| Vertical Centers | 横方向で中央に揃える |
| Baselines | 横にベースラインで揃える |
| Horizontally in Container | スーパービューとx軸で中央に揃える |
| Vertically in Container | スーパービューとy軸で中央に揃える |
「Horizontally in Container」と「Vertically in Container」は中央に配置する用途でよく使用することになるかと思います。
③ Pinボタン
そのパーツからキャンバス上で最も近いパーツ、もしくはスーパービューとの距離での制約や大きさでの制約といった基本的な制約を追加することができます。
| 項目 | 設定される制約 |
|---|---|
| Spacing to nearest neighbor | 最も近いパーツまたはスーパービューとの距離 |
| Width | 幅 |
| Height | 高さ |
| Equal Widths | （複数のパーツを選択した際に）同じ幅 |
| Equal Heights | 複数のパーツを選択した際に）同じ高さ |
| Aspect Ratio | 縦横比 |
| Align | （複数のパーツを選択した際に）Alignボタン参照 |
これらを使って各パーツに制約をつけることができますが、制約が不足している場合（その制約ではキャンバス上での表示位置を確定できない場合）や、制約が矛盾している場合はパーツを選択した際に赤い線で表示され、警告が起こります。
④ Resolve Auto Layout Issuesボタン
Auto Layoutに関する問題を解決するときに使用します。
| 項目名 | 解決内容 |
|---|---|
| Update Constaint Constants | キャンバス上の位置を正として制約を更新します。 |
| Add Missing Constraints | 十分な制約が与えられていないパーツに足りない制約を自動的に追加します。 |
| Reset to Suggested Constaints | 既存の制約を削除し、キャンバス上の位置を正とした制約を与えます。 |
| Clear Constaints | 全ての制約情報を削除します。 |
- コントロール+ドラッグを使った方法
キャンバス上またはパーツ一覧から、パーツからパーツに対しての制約をつけることができます。
Equal Widths や Equal Heightsは相対的な大きさにしたいときに使うことが多いです。
設定した後にナビゲーション領域でmultiplierの値を変更することで、端末サイズの半分やあるパーツの1/3のサイズといった相対的なサイズを設定できます。
まとめ
- Storyboardではアプリ全体の画面の表示や遷移を見ながら、パーツの追加や表示の制御ができる。
- AutoLayout機能を使ってマルチデバイスに対応したレスポンシブデザインが実現可能
- AutoLayoutの使い方として、「制約編集ボタンを使う方法」と「コントロール + ドラッグを使う方法」などがある
Auto Layoutをすぐに理解するのは難しいので実践しつつ覚えていきましょう。
次は、簡単にマルチデバイス対応をする下準備について書きます。