02 iOSの基本的な画面構成について
■ iOSの基本的な画面構成について
iOSアプリを開発する際に、画面の構成を考えることはとても重要です。画面構成を考える際に利用する機能として、Xcodeの「Storyboard」機能があります。
● Storyboardとは
Storyboardとは、Xcode4.2から導入された機能です。Storyboardを利用することによって、アプリ画面のUIパーツのレイアウトや画面遷移を視覚的に作成することが可能です。
Storyboardを利用するのに、プログラミングの知識は不要です。ドラッグ＆ドロップなどの操作のみで利用することができます。
アプリ全体の画面の表示や遷移を確認しながら、右下に表示されている様々なパーツをViewController（１枚の画面）の中に追加して、アプリ画面を作成していきます。
Storyboardが優れている部分は、AutoLayout機能が利用できるということです。AutoLayout機能を用いることでパーツの表示に制約を付け、レスポンシブなデザインを作成することができます。
● AutoLayout機能
iOSアプリ開発では、以下のような様々なデバイスサイズやパターンに対応する必要があります。
○ ポイント
boundsやframe等で使用される論理的な画面サイズです。通常はこのサイズを意識しながらプログラムを作成します。
○ ピクセル
描画が行われる論理的な画面サイズです。ピクセルパーフェクトな描画が必要になる場合は、このグリッドに合わせて描画を行う必要があります。
○ デバイス
端末に搭載されている液晶の物理的ピクセル数です。これが上記に説明しているピクセル数と一致しない場合は、ピクセルパーフェクトでの描画が非常に難しくなります。
| サイズ | 端末 | ポイント | Retina | ピクセル | 倍率 | デバイス | アスペクト比 |
|---|---|---|---|---|---|---|---|
| 3.5 | iPhone iPhone 3G iPhone 3GS |
320x480 | 1 | 320x480 | 1 | 320x480 | 2:3 |
| 3.5 | iPhone 4 iPhone 4S |
320x480 | 2 | 640x960 | 1 | 640x960 | 2:3 |
| 4 | iPhone 5 iPhone 5s iPhone 5c iPhone SE |
320x568 | 2 | 640x1136 | 1 | 640x1136 | 40:71 ≒ 9:16 |
| 4.7 | iPhone 6 iPhone 6s iPhone 7 iPhone 8 |
375x667 | 2 | 750x1334 | 1 | 750x1334 | 375:667 ≒ 9:16 |
| 4.7 (互換/拡大) |
iPhone 6 iPhone 6s iPhone 7 iPhone 8 |
320x568 | 2 | 640x1136 | 1.17 | 750x1334 | 375:667 ≒ 9:16 |
| 5.5 | iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus |
414x736 | 3 | 1242x2208 | 0.87 | 1080x1920 | 9:16 |
| 5.5 (互換) |
iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus |
320x568 | 2 | 640x1136 | 1.69 | 1080x1920 | 9:16 |
| 5.5 (拡大) |
iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus |
375x667 | 3 | 1125x2001 | 0.96 | 1080x1920 | 9:16 |
| 5.8 | iPhone X | 375x812 | 3 | 1125x2436 | 1 | 1125x2436 | 375:812 ≒ 9:19.5 |
| 5.8 (互換) |
iPhone X iPhone XS |
375x667 | 3 | 1125x2001 | 1 | 1125x2001 | 375:667 ≒ 9:16 |
| 6.1 | iPhone XR | 414x896 | 2 | 828x1792 | 1 | 828x1792 | 207:448 ≒ 9:19.5 |
| 6.5 | iPhone XS Max | 414x896 | 3 | 1242x2688 | 1 | 1242x2688 | 207:448 ≒ 9:19.5 |
| 7.9 | iPad Mini | 768x1024 | 1 | 768x1024 | 1 | 768x1024 | 3:4 |
| 7.9 | iPad Mini 2 iPad Mini 3 iPad Mini 4 iPad Mini 5 |
768x1024 | 2 | 1536x2048 | 1 | 1536x2048 | 3:4 |
| 9.7 | iPad iPad 2 |
768x1024 | 1 | 768x1024 | 1 | 768x1024 | 3:4 |
| 9.7 | iPad 3 iPad 4 iPad Air iPad Air 2 iPad Pro 9.7 |
768x1024 | 2 | 1536x2048 | 1 | 1536x2048 | 3:4 |
| 10.2 | iPad(7世代) | 834x1112 | 2 | 1668x2224 | 1 | 1668x2224 | 3:4 |
| 10.5 | iPad Pro 10.5 iPad Air(3世代) |
834x1112 | 2 | 1668x2224 | 1 | 1668x2224 | 3:4 |
| 11.0 | iPad Pro 11 | 834x1194 | 2 | 1668x2388 | 1 | 1668x2388 | |
| 12.9 | iPad Pro 12.9 | 1024x1366 | 2 | 2048x2732 | 1 | 2048x2732 | 512:683 ≒ 3:4 |
| 1.32 | Watch(1,2,3) 38mm | 136x170 | 2 | 272x340 | 1 | 272x340 | |
| 1.5 | Watch(1,2,3) 42mm | 156x195 | 2 | 312x390 | 1 | 312x390 | |
| Watch(4,5) 4 40mm | 162x197 | 2 | 324x394 | 1 | 324x394 | ||
| Watch(4,5) 4 44mm | 184x224 | 2 | 368x448 | 1 | 368x448 |
上記リストにあるように、iPhone, iPadは現在までに様々な画面サイズの端末が出されています。またLandScape（横向き）に対応する場合には、縦向きと横向きの両方での表示を考える必要があります。
そのため、Viewに配置されている各パーツに正しいAutoLayoutの制約を付けないと、端末で正しく表示されません。正しく表示されていない場合、アプリ申請を行ったとしてもReject（却下）される場合があります。
AutoLayoutとは応用も含めると、様々なパターンがあります。基本的には「制約編集ボタン」を利用します。
左からStackボタン、Alignボタン、 Pinボタン、 Resolve Auto Layout Issuesボタンとなっています。
① Stackボタン
複数のビューを１つのスタックビューというものでグルーピングすることができます。画面内で多くのパーツを入れたい場合、このスタックビューを有効活用することで、より簡単な設計にすることができます。
② Alignボタン
複数のパーツを選択した際に、その選択したパーツの並び方を制約するボタンです。
| 項目 | 設定される並び替えの属性 |
|---|---|
| Leading Edges | 先頭に揃える |
| Trailing Edges | 末尾に揃える |
| Top Edges | 上に揃える |
| Bottom Edges | 下に揃える |
| Horizontal Centers | 縦方向で中央に揃える |
| Vertical Centers | 横方向で中央に揃える |
| Baselines | 横にベースラインで揃える |
| Horizontally in Container | スーパービューとx軸で中央に揃える |
| Vertically in Container | スーパービューとy軸で中央に揃える |
③ Pinボタン
選択したパーツからキャンバス上で最も近いパーツ、もしくはスーパービューとの距離での制約、大きさでの制約と言った、基本的な制約を追加することができます。
| 項目 | 設定される制約 |
|---|---|
| Spacing to nearest neighbor | 最も近いパーツまたはスーパービューとの距離 |
| Width | 幅 |
| Height | 高さ |
| Equal Widths | （複数のパーツを選択した際に）同じ幅 |
| Equal Heights | 複数のパーツを選択した際に）同じ高さ |
| Aspect Ratio | 縦横比 |
| Align | （複数のパーツを選択した際に）Alignボタン参照 |
このボタンを使って各パーツに制約をつけることができます。制約が不足している場合（その制約ではキャンバス上での表示位置を確定できなかったりする場合）や、制約が重複したり矛盾している場合は、パーツを選択した際に、指定した制約が赤い線で表示され、警告が発生します。
④ Resolve Auto Layout Issuesボタン
これまでに設定したAutoLayoutに関する問題を解決するときに利用します。「Selected Views」の方はStoryboard上で選択したパーツに対して実行されます。
「All Views in View Controller」では、現在レイアウトを行っているViewに存在する全てのパーツに対して実行されます。
| 項目名 | 解決内容 |
|---|---|
| Update Constaint Constants | キャンバス上の位置を正として制約を更新します。 |
| Add Missing Constraints | 十分な制約が与えられていないパーツに足りない制約を自動的に追加します。 |
| Reset to Suggested Constaints | 既存の制約を削除し、キャンバス上の位置を正とした制約を与えます。 |
| Clear Constaints | 全ての制約情報を削除します。 |
● AutoLayoutのまとめ
・マルチデバイスに対応したレスポンシブデザインが可能！！
■ iOSアプリにおけるUIパーツ
iOSアプリは以下のような、パーツで構成されます。
・UIButton
ユーザーのタップ操作に反応するボタン機能を提供します。ボタンタップ時に画面遷移したり、処理を行ったりとアプリの機能を動作させるきっかけになるため、さまざまなパーツの中でもっとも利用頻度が高いパーツです。
・UILabel
文字を表示する機能を提供します。アプリ内の画面に説明文を挿入する際に利用することになります。ラベルには、テキストをコピーす る以外の操作を行うことはできません。
・UlSegmentedControl
複数の選択肢の中から1つを選択する機能を提供します。
・UITextField
文字を入力・表示する機能を提供する標準的な部品です。
・UISlider
目盛りで値を指定できるスライダー機能を提供します。値を詳細に設定するのには向いていませんが、素早く大まかに値を変更するのに効果的な部品です。音楽再生アプリの音量を調整するなどで活用するとよいでしょう。
・UISwitch
値のオン/オフを行うスイッチ機能を提供します。はい／いいえのように2つの状態を示す際に活用するとよいでしょう。また、このパーツを使用して、オンの際に別のパーツを表示したり、アクティブにしたりするのに活用するのもよいでしょう。
・UIPageControl
切り替え可能なページ位置を管理する機能を提供します。ビューがいくつか開かれていて、その何番目のビューを表示しているのかを知ることができます。所定の順序でビューを表示することができるのも特徴です。右の図では、ページが3つあり、その最初のページが表示されていることを表しています。
・UIStepper
値の増減を行う機能を提供します。値の微調整を行うために使用します。たとえば、印刷部数の指定などに利用すると便利です。一方で値を大幅に変更する場合には向いていません。何度もタップする必要があるからです。
・UIDatePicker
日付を指定できる機能を提供します。このパーツを使用することで、テキストフィールドに日付を入力するような面倒な操作を行う必要がなくなり、入力フィールドに何を入れるかの説明も不要になります。ユーザーの誤入力を防ぐメリットもあります。
・UINavigationBar
画面上部のナビゲーションバーの機能を提供します。この部品を単体で使うことは少なく、次のUINavigationItemと併せて使用します。
・UINavigationltem
UINavigationBar内に表示するアイテムです。タイトルを表示する際などに使用します。右図では、UINavigationItemに「Title」という文字列を指定してUINavigationBar内に設定しています。
・UIToolbar
画面下部にパーツを配置するエリアを提供するクラスです。次のUIBarButtonItemと併せて使用します。
・UIBarButtonltem
UINavigationBar、UIToolbarにボタンなどのパーツを配置する機能を提供します。右図の例では、画面上部のUINavigationBarの右側にUIBarButtonItemを2つ、画面下部のUIToolbarにUIBarButtonItemを4つ配置していることになります。
・UITabBar
タブで画面を切り替える機能を提供します。画面の状態はタブごとに独立して保持されるため、異なる機能を平行して利用したい場合などに重宝します。また、画面内に目的の機能名が常に表示されている状態となるため、はじめて使うアプリであっても、どんな機能がそのアプリ内にあるのかをイメージで伝えることができるのも大きなメリットです。タブそのものや、そのデザインは次のUITabBaritemに対して設定を行います。
・UITabBarltem
UITabBarに設定するタブ機能と、タブのデザインなどの機能を設定します。画面の例は、UITabBarにUITabBarltemを5つ設定して、端末を横と縦で表示したときのものです。
・UISearchBar
検索機能のインターフェースを提供します。検索機能であることが一目でわかるUIになっています。検索ワードを入力し、検索処理を実行する機能を提供する場合に利用するとよいでしょう。
・UIView
ビューを提供します。ビューの中にさらにビューを入れることもできます。右の例は黄色のビューの中に青色のビューを入れ子で配置しています。入れ子が可能なことで、さまざまなレイアウトを容易に構築することができるようになっています。
・UlContainerView
後述するビューコントローラーを格納するためのビューです。別々の画面を1つの画面内に組み込むことが可能です。別々の画面を1つの画面にすることで、画面内の一部だけを遷移させるなど、複雑なレイアウトを容易に実現することができます。
・複数の画面を1つに組み込めるUIContainerView
・上図のUIContainerviewのレイアウトで実行したアプリの表示例
・UIActivityIndicatorView
時間がかかる処理を行っていることを表現する場合に使用します。電波状態が悪い場合の通信処理や画像処理など時間がかかる処理を行う際に使用することで、ユーザーに時間がかかっていることを伝え、不満を減らす効果が期待できます。ただし、UIActivityIndicatorViewは、処理がどれくらい進んでいるかをユーザーに伝える手段を持っていません。次のUIProgressViewと併せて利用するのが効果的です。
・UIProgressView
処理の進捗を表現する場合に使用します。下の例は、進捗が100%、50%、0%の状態を表しています。前述のUIActivityIndicatorViewと組み合わせて処理が進んでいる度合いをユーザーに伝える利用の仕方も効果的です。
・UIHorizontalStackView
水平方向にビューやコントロールを並べる際に使用します。ビューやコントロールをグループ化することもできます。アプリ実行中にビューやコントロールを挿入・削除することも可能です。右の例では、3種類のUIViewを並べています。UIViewとUIViewの間隔は、UIHorizontalStackViewのプロパティで指定できます。
・UIVerticalStackView
UIHorizontalStackViewの垂直方向版です。垂直方向にビューやコントロールを並べる際に使用します。並べたビューやコントロールの間隔はプロパティで指定できます。
・UITableView
テーブル(表組み)機能を提供するビューです。アイテムや多量の選択肢を一度に表示することに向いています。ただし、テーブルはUITableView単体では動作せず、次のUITableViewCellと併せて利用して、どのようなデータを表示するのかを決定する必要があります。右図はUITableView単体で、UITableViewCellの指定がない状態です。
・UITableViewCell
テーブルの中のセルの機能を提供します。セルのデザインは、ユーザーが自由に定義できます。次の図は、UITableViewに10個のUITableViewCellを配置した例で、セルの位置によって背景色を変更しています。
・UllmageView
画像を表示するためのビューで、画像を利用する際には多用することになります。画像をビューに表示する形式は多数用意されており、ビューに合わせて画像を引き伸ばしたり、画像の全体像を表示するのを優先させたり、画像の中央部分を拡大して表示させたりすることができます。
・UICollectionView
写真などを一覧表示することに向いているのがコレクションビューで、そのコレクションビューを提供する部品です。UICollectionView単体で利用することはほとんどなく、次のUICollectionViewCell, UICollectionReusableViewと併せて使用します。
・UlCollectionViewCell
コレクションビュー内の各アイテムを表示するために使用するビューです。UITableViewCellと同様に、開発者が自由にデザインを行うことができます。
・UICollectionReusableView
コレクションビュー内でヘッダー、フッターを実装する際に使用します。こちらも開発者が自由にデザインを行うことができます。
● コレクションビューに関する全部品の使用例
・UITextView
複数行のテキストを表示するビュー機能を提供します。ビューのサイズによって自動改行を行ってくれます。テキスト長が不定であるようなときに利用するとよいでしょう。
・UIScrollView
スクロール機能を持ったビューを提供します。画面サイズに収まらない大きなコンテンツを表示する際に利用します。次の図の例では、画面サイズに収まらない写真を縦にスクロールして閲覧しています。縦スクロール中は、画面右側にスクロール位置を示すバーが表示されます。
・UIPickerView
複数の選択肢の中から値を選択するビューを提供します。UISegmentedControlでは選択肢が多すぎる場合などに、UIPickerViewの利用を検討するとよいでしょう。目安としては4つ以上でしょうか。UIPickerViewは画面を切り替えずに多くの選択肢を扱えるのが最大のメリットです。
ただ、多くの選択肢を見比べたほうがよい場合は、選択肢を画面いっぱいに広げることができ、スクロールの速さもあるUITableViewの利用を検討するのがよいでしょう。
・UIVisualEffectView
装飾されたビューを提供します。画像にブラー効果や光沢感を与えたい場合に利用してください。右の図は、写真にUIVisualEffectViewでブラー効果を与えています。
・MKMapView
地図機能を持ったビューを提供します。緯度・経度を指定して地図にピンを刺す機能などが提供されています。地図を簡単に扱えるので、地図を活用するアプリを開発する際には利用を検討してください。
・UIViewController
基本となるビューコントローラーです。このビューコントローラー上にさまざまな部品を配置していって、アプリの画面を作成していくことになります。
・UINavigationController
画面の遷移状態を管理する機能を持ったビューコントローラーです。次の画面に進む、前の画面に戻るといった機能を提供します。UINavigationControllerは画面そのものを持っていません。UIViewControllerの画面遷移を管理するのが役目になります。
・UITableViewController
テーブルビューを表示する機能に特化したビューコントローラーです。画面内にテーブル以外の項目を表示したい場合は、UIViewControllerにUITableViewを組み合わせてテーブルを実現したほうがよいでしょう。しかし、セルの項目が固定である場合などには、このUITableViewControllerを利用したほうがStoryboard上でレイアウト作成が完結します。セルの項目が固定で、かつテーブル以外に表示する項目がない場合は、本部品を利用することで開発効率の向上が期待できます。
Storyboard上のUITableViewControllerを見ると、テーブルのセル情報があらかじめ用意されています。また、ドキュメントアウトラインで確かめると、テーブルに必要なUITableView、UITableViewCellの情報があらかじめ配置されています。
・UICollectionViewController
コレクションビューを表示する機能に特化したビューコントローラーです。コレクションビューだけで画面が完結する場合に利用するとよいでしょう。Storyboard上で見ると、コレクションビューのセル情報が画面上部左にあらかじめ用意されています。ドキュメントアウトラインでは、コレクションビューに必要なUICollectionView、UICollectionViewCellの情報があらかじめ配置されていることがわかります。
・UITabBarController
タブ機能を持ったビューコントローラーです。タブごとに独立した画面の状態を持つことができ、操作中にほかのタブに切り替えることで、さまざまな機能を並行して利用することができるようになります。UITabBarControllerは、画面そのものは持っていません。タブの画面の切り替えを管理するのが役目になります。タブをタップすることで画面の切り替え処理が発生します。
・UIPageViewController
ページ切り替えに特化したビューコントローラーです。さまざまなページ切り替えのインタラクションを提供します。下記の例は、複数のビューコントローラを、書籍のページをめくるような効果で切り替えています。
