Compose の画面は5つの層に分かれる

Android · Jetpack Compose

JetNews のコードを読んだら、画面はこんな構成になっていた。

architecture chart

data/model の層については アプリの推奨アーキテクチャ を参照のこと。

Activity

Single Activity で、App を setContent するだけ。

App

例: JetNewsApp

各コンポーネントの初期化を行う。

例: JetNewsNavGraph

ルーティング。各画面の Route を呼ぶ。

画面遷移時の処理は JetNewsNavigation の NavigationActions に集約されていて、遷移するときは NavigationActions の関数を呼ぶ。

Route

例: HomeRoute

画面全体に対応した Composable。役割的には今までの Activity/Fragment に近い。

レスポンシブ対応もここで行い、getHomeScreenType が Composable で HomeScreenType を返す。

ViewModel との接続点でもある。詳しくは ViewModel に触れるのは Route だけにする。

Screen

例: HomeScreen

表示されている画面を表現するコンポーネント。画面が広い場合の Screen、狭い場合の Screen が存在する。

ここより下はより具体的で部品的な UI コンポーネントになる。

この層構造の上で 表示に使ってよいのは UiState だけ という制約が成立している。