先日、友人のデザイナーさん達とランチした際に、1人のデザイナーさん(Webデザインがメイン、軽いコーディングまでなら経験あり)が・iOSアプリデザインやUXデザインにも興味ある・より良いデザインやユーザー体験を実現できるようになるためにアプリ開発もしてみたい(特にデザイン上の制約を知るために)と言っており、同じニーズを持つデザイナーさんやディレクターの方も多そうだったので、この記事を書いてみました。解説すること・アプリで画面が表示されるまでの仕組み・アプリの画面を実装する上でよく使うコンポーネント(パーツ)・気をつけるべきポイント実際の実装については、Qiitaなどでいくらでも解説されていると思いますので、イメージを掴んでもらうための概念的な説明をメインにしていきます。WebとiOSアプリの画面遷移の違いiOSアプリのUIに関する説明に入る前に、WebとiOSアプリの画面遷移の違いについてざっくりと説明したいと思います。大きな違いは以下の2点です。・いつ、画面の実体が生成されるか・誰が、画面遷移を担当するのかまず、Webにおける画面遷移ですが、表示されるページの実体は全てサーバ上に存在しており、画面遷移はブラウザが表示されるページを切り替えていく仕組みになっています(静的サイトの場合)。それに対し、iOSアプリでは表示される画面の実体は基本的には画面遷移前には存在しておらず、画面のひな形(=クラス)のみが存在しています。画面遷移のタイミングでひな形から実体化(=インスタンスの生成)が行われ、元の画面や画面のいれもの(以後、コンテナと呼ぶ)によって、画面遷移が実行されます。Twitterアプリでの投稿画面の表示や、メールアプリでのメール詳細の表示を例に見てみましょう。話題を検索画面が投稿画面の実体を表示という流れで行われています。コンテナ(UINavigationController)がメール詳細画面を表示という流れで行われています。アプリにおいては、「コンテナ」がUIの階層構造を強く規定し、画面遷移の実行なども行うため、使う「コンテナ」によって・無理なくできること・できるけど、しんどいことなどが異なるようになっています。~UIViewController~iOSアプリの画面遷移の仕組み、コンテナの概念を大まかに説明したので、早速個別のコンテナの解説に入りたいところですが、その前に、iOSの画面実装において全ての基礎となるUIViewControllerについて説明します。StoreのTodayタブのスクリーンショットですが、赤線で囲まれた部分がUIViewControllerの実体になります。UIViewControllerの役割は大きく2つです。・それらの要素から次の画面への画面遷移といった役割を担っています。Storeをはじめとする多くのアプリで使われており、コンテナとしての役割を持つUIViewControllerの一種です。以下のようなコードでUITabBarControllerを実体化し、実体化されたUITabBarControllerのviewControllers属性にいくつかのUIViewControllerの実体をセットすると、画面上部(画像青線内)にセットしたUIViewControllerのうち1つが、画面下部(画像赤線内)にUITabBarが表示されるようになります。viewController4]UITabBarControllerでは、UITabBar内で選択中のタブを切り替えることにより、選択中のUIViewController(画像青線内)を切り替えることができます。このように、UITabBarControllerはタブと紐付いた画面を切り替えて表示するのが主な目的ですので、instagramのように「UITabBar内のボタンを選択→新しい画面を表示」という画面遷移は割とトリッキーで「実現できるけどちょっとだけ面倒なこと」の1つだったりします。Storeをはじめとする多くのアプリで使われており、コンテナとしての役割を持つUIViewControllerの一種です。以下のようなコードで実体化されたUIViewControllerを使ってUINavigationControllerを実体化すると、画面上部(画像赤線内)にUINavigationBarが、画面下部(画像緑線内)にセットしたUIViewControllerが表示されます。viewController1)そして、以下のようなコードを用いて2つめのUIViewControllerを実体化し、UINavigationControllerに追加すると、ドリルダウンのアニメーションとともに、2つめの画面へ遷移することができます。true)このように、一覧→詳細といった構造をUI面で実現するために使われるのがUINavigationControllerです。このことは、UINavigationControllerの公式ドキュメントでも、以下のように明記されています。・画面遷移はコンテナ/UIViewControllerのいずれかが担当するといった内容になります。・ボタンの表示、ボタン操作の受け取り・テキスト入力の受け取り・スイッチの表示、スイッチ操作の受け取りといった個々の要素の表示、ユーザー操作のハンドリングを行うのがUIViewとその派生系です。(UIViewとその派生系)・テキストの表示をするUILabel・スイッチとして働くUISwitch・ボタンとしてユーザー操作を取り回すUIButton・1行のテキスト入力を受け取るUITextField・音量調整などに使われるUISlider・これらの要素をひとまとめにするために使われるUIView(以下の画像では灰色の四角がUIView)・画像の表示に使われるUIImageViewといったUIViewとその派生系を用いて画面を実装していくことになります。気をつけるべきポイントは?駆け足でしたが、ここまでで画面の階層構造と、個々の要素の表示を実際に行うUIViewについての解説が一通り終わりました。それでは、UIデザインをする上でどういったところに気をつければ良いのでしょうか。先程も説明したように、UIViewControllerの表示領域(画像緑線内)では、UIViewやその派生系を用いて個々の要素を表示していきます。それらの実装についてはそれほど制約も多くないため、「そもそも原理的に不可能」といったものはあまり多くない気がします。・ある程度工数はかかるかもしれない・保守がそこまでキツくなることはそれほど多くないといった印象です。実現可能だが、工数もかかり保守性が心配なところ・UITabBar内の各タブのカスタマイズは面倒UITabBarに含まれる各タブはUITabBarItemといい、実はUIViewの派生系ではありません。・iOSアップデートでも問題が出ないか・画面が縦の場合と横の場合でレイアウト崩れが発生しないかなど考える必要があり、割と保守面で心配だったりします。・UINavigationBar内の要素のカスタマイズも面倒なことが多いUITabBar同様、UINavigationBarに含まれる要素もUIViewの派生ではないものが多く含まれています。👇の画像の編集ボタンなどはUIBarButtonItemと言い、これもUIViewの派生系ではありません。そのため、「NavigationBar上のボタンにバッジを表示したい」といったカスタマイズは割と面倒だったりします(実現できなくはないけど、別の問題が発生する可能性がある)。以下のような画面を持つアプリがあるとします。・UINavigationBar(オレンジ)・UITabBar(灰色)・UIViewControllerのView(赤)は全て同じ階層にあるように見えますが、iOSアプリの開発環境で見ると、このような階層構造になっています。抽象化して見てみましょう。抽象化されたUIでレイヤー構造を示すと以下の通りです。(ピンクはUITabBarControllerのViewを、緑はUINavigationControllerのViewを表している)まず、UITabBarControllerのView(ピンク)とUITabBar(白)が存在し、その間にUITabBarControllerが内包するUINavigationControllerのView(緑)とUINavigationBar(オレンジ)が差し込まれます。UINavigationControllerはUIViewControllerを内包しているので、UIViewControllerのView(赤)はUINavigationControllerのViewとUINavigationBarの間に挟まれます。ここからが重要なのですが、iOSのレイアウトロジックであるAutoLayoutは異なる階層に存在するレイヤーと関連付けたレイアウトがそこまで得意ではないため、「UINavigationBarとUITabBarから等距離となるようなUIViewのレイアウト」といったものは苦手だったりします。まとめ今回は「iOSアプリの画面の階層構造/画面描画の仕組み」「できること/できるけどしんどいこと」などを解説してみました。iOSエンジニア間の相互理解の役に立ち、より良いデザインのアプリを作る助けになれば幸いです。本題とはズレますが、デザイナーさんとモバイルエンジニアの協業という点では以下の記事もオススメです(理想状態のデザインしか作られない方も割と多いかと思いますので)。Documentationダウンロード#デザイン#デザイナー#エンジニア#iOSアプリこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。Designer一橋経済→スタートアップ数社を経てフリーランスのiOSエンジニアやってます。CI/CDを含む自動化大好き。家庭ハックの記事やデザインの練習について書く予定です。Designer田畑、12月からフリーランスになります。系記事まとめnoteに投稿されたエンジニア系の記事のまとめ。コーディングTIPSよりは、考察や意見などを中心に。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。