サンプルコードで学ぶJetpack Composeのアーキテクチャ

Summary

architecture chart

Activity

  • Single Activity
  • App を setContent するだけ

App(e.g. JetNewsApp)

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

NavGraph(e.g. JetNewsNavGraph)

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

Navigation(e.g. JetNewsNavigation)

  • NavigationActions で全ての画面遷移時の処理を実装している
    • 画面遷移時には NavigationActions の関数を呼ぶ

Route(e.g. HomeRoute)

  • 画面全体に対応した Composable
  • レスポンシブ対応
  • ViewModel との接続
    • 状態ホイスティングして ViewModel にイベントを伝える
    • ViewModel のメソッドは Route で呼び出し、Screen 以下からは呼び出さない
  • 役割的には今までの Activity/Fragment に近い

Screen(e.g. HomeScreen)

  • 表示されてる画面を表現するコンポーネント
    • 画面が広い場合の Screen、狭い場合の Screen が存在する
  • ここより下はより具体的で部品的な UI コンポーネント

ViewModel(e.g. HomeViewModel)

  • Android Architecture Component の ViewModel
  • Route から呼ばれるメソッドがある
  • UiState と ViewModelState が定義されている

UiState(e.g. HomeUiState)

ViewModelState(e.g. HomeViewModelState)

  • ViewModel 内部で管理する状態を保持する
  • toUiState()で UiState に変換する

Unidirectional data flow

Unidirectional data flow chart

  • ViewModel を介して Unidirectional data flow を実現している
  • Composable は UiState を collectAsState して得た情報のみを表示する
    • UiState 以外の ViewModel のメソッド/プロパティの返り値を表示したり条件分岐の条件にしてはいけない
Michiaki Mizoguchi
Michiaki Mizoguchi
Android / iOS / Webなどフロントエンド周りの開発者。