この記事は Goodpatch Advent Calendar 2019 の9日目です．

iOS レイアウトの仕組みを知らずに iOS の UI デザインをすることはできません． つまり UI デザイナーは，iOS の提供する UI コンポーネントや Auto Layout について基本的な仕組みは理解しておく必要があります．

その助けになるといいなと思ってこの記事を書きました．

概要

この記事では次の内容について書きます．

  • Auto Layout のドキュメントを紹介する
  • 超基本的な UIKit コンポーネントを紹介する

iOS レイアウトの基礎に限ったとしても，この記事だけで内容を網羅することは到底できません． この記事では，iOS レイアウトを学び始めるための入り口やキーワードを提供することを目的とします．

補足: SwiftUI

2019 年の WWDC で新しい UI システムの SwiftUI が発表されましたが，この記事は従来の UIKit の使用を想定して書いています． もし，これから新しく iOS アプリを作るために実装まで本格的に学びたいのであれば SwiftUI を学ぶと良いです． ただし，UIKit について知っていることは無駄にならないし，ここ 1-2 年では新規/継続開発を問わず UIKit はまだ使われ続けると予想します．

Auto Layout 公式ドキュメント

Auto Layout については Apple Developer のページに必要十分なドキュメントがあります．

Getting Started と Auto Layout Cookbook のセクションについては目を通しておくと良いです． 英語に苦手意識がある場合は，ざっと眺めて雰囲気だけ掴んでおき，以下で紹介する日本語の記事などを読んで基礎知識をつけてから戻ってくると良いです． ただし，最終的には公式ドキュメントは必ず読むことになると思います．

入門ドキュメント

Zaim のブログに akatsuki174 さんが投稿した記事が分かりやすくまとまっています．

公式ドキュメントを網羅する内容ではないので，公式ドキュメントは別途読むようにします． 一方で，公式ドキュメントに載っていない図解や練習問題もあるので，併せて読んでみると良いと思います．

UIKit コンポーネント

Auto Layout について基本的な仕組みが分かったら，UIKit のコンポーネントについて理解していきます．

まず，前提として HIG を読んでいて基本的なコンポーネントについては知っているものとします．

その上で，一般的なアプリを実装するために，まずは次のコンポーネントについてより深く知っておくと良いです． 以下のリンクは Developer 向けの内容なので詳細まで読み込む必要はないですが，UI を実装するために Developer がどういう手段を持っているのか触りだけでも知っておくと UI デザインをするときに考慮すべきポイントが分かるようになると思います．

各コンポーネントには設定できる attributes（属性）があり，主要なものは Interface Builder Attributes の項に記述されているので必ず読むようにします． 少なくともこれら attributes の観点を考慮できているだけで，かなり実装しやすいデザインになります．

UILabel

UILabel はテキストを表示するための基本コンポーネントです． 次の画像は Xcode の Attributes Inspector で見ることができる UILabel の attributes です．

UILabel attributes

詳しい説明は前述の Interface Builder attributes の項で確認するとして，個人的な意見を補足すると次のとおりです．

Font: System フォントを使うのが，文字の読みやすさという点でもアプリの容量の点でも有利になる．

Lines: 最大2行まで表示して末尾は Truncate という場合や，最後の行まで全て表示する（Lines = 0）という場合に指定する． なお，この attribute を見ると UILabel は「最大文字数」を指定する設計ではないということが分かる．

経験上 UILabel のサイズは可変にすることが多く，width や height 制約を直接的には指定しないことが多い． その理由としては，テキストというコンテンツが内容や多言語化（i18n）によって大きく分量が変わるため． また，UIImageView のようにサイズやアスペクト比を指定しないとコンテンツが pixelate してしまうといった強い制約がないため．

UILabel width variation

Autoshrink: 最終手段としてのみ使い，乱用すべきではない． 文字の大きさは意味的に重要なため． 文字数が収まらないときはレイアウトを工夫するか truncate で対応する．

UILabel は最も頻出するコンポーネントなので，他の attributes についてもしっかり確認しておくことをおすすめします．

UIImageView

UIImageView は画像を表示するための基本コンポーネントです．

UIImageView attributes

同様に個人的な意見を補足すると次のとおりです．

Content Mode: ドキュメントの Understanding How Images Are Scaled の項にも記述がある，最重要 attribute．指定できる値についてはドキュメントに詳しく説明があるが，通常はアスペクト比を保つことができる AspectFit (scaleAspectFit) か Aspect Fill (scaleAspectFill) を使う．

UIImageView content mode

なお，Aspect Fill は画像の中心がくり抜かれるので「画像の上端 & 左右両端を合わせて，下端は裁ち落とし」というレイアウトはひと工夫必要だということが分かる． また，iOS の ImageView にはコンテンツサイズに合わせて動的に大きさを変える attribute がないことも分かる． 他のプラットフォームでは Android の wrap_content や Unity UI の Preferred Size など指定ができることが多いので，少し意外な設計だと思っている．

UIImageView も頻出するコンポーネントであり，かつ前述のように制約が強くレイアウトの基準になりやすいコンポーネントなので，レイアウトの仕組みについて必ず知っておくべきです．

UIButton

UIButton はその名のとおり，ボタンを表示するための基本コンポーネントです．

UIButton attributes

State Config: UIButton は Default，Highlighted，Selected，Disabled の状態に対して別々に attributes を設定できるようになっている． 裏を返すとこれらの状態については UI デザインで考慮しておくべき． ただし，Selected 状態を使わない場合も多いので，必要最低限としてはその他3状態を考慮しておくと良い． Type 属性にデフォルト値である System を指定すると，Default 状態を設定するだけで他の状態には Tint カラーを使って対応してくれるので，第1の選択肢として検討する．

UIButton states

Image: Title の隣に表示する画像を指定できる． ただし，レイアウトの自由度が低く，標準の UIButton の提供する仕組みでは UI デザインを再現できない場合も多い．

UIButton はシンプルですが少しクセのあるコンポーネントです． Sketch ファイルのような静的な UI デザイン成果物上では各種状態が考慮できていなかったり，なんとなくで置かれている（ように見える）アイコンを実装するために独自カスタマイズが必要になったりということがあります． UIButton の仕様を知っているとこういった考慮漏れや「なんとなく」が少なくなると思います．

UIStackView

UIStackView はコンポーネントを並べるためのコンポーネントです．

UIStackView attributes

Distribution: 指定できる値について詳しくはドキュメントに説明があるが，Fill 系と Spacing 系の2種類がある． 基本的にはコンポーネントを縦（or 横）に等間隔で並べるために Spacing 系を，等しい高さ（幅）で敷き詰めるために Fill 系を使う．

UIStackView distribution

UIStackView を用いてコンポーネントを縦横に整列するレイアウトは，iOS UI デザインにおいて頻出するパターンです． UIStackView の仕組みを知っていれば，iOS アプリの UI を見たときに View の構造を推測しやすくなると思います．

Next Action

まだ紹介していないコンポーネントについても，Developer Documentation を読んで見ると良いかもしれません． 特に UITextField，UISegmentedControl, UITableViewCell あたりは頻出なのでおすすめです．

また，macOS を使っているなら誰でも AppStore から Xcode をインストールできるので，実際に Auto Layout がどんなものか触ってみてください． YouTube をはじめとして，動画で解説してくれているリソースもたくさんあります． あるいは友達や同僚に iOS Developer がいるなら，Xcode を開いて質問にいけばきっと喜んで教えてくれると思います．

まとめ・感想

この記事では次の内容について書きました．

iOS のレイアウトを学び始めるためのとっかかりを得られたと感じてもらえれば嬉しいです．

参考