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

2022-05-09 Android · Jetpack Compose

Summary

architecture chart

  • JetNewsのコード読んだらこんな構成になってた
  • それぞれがどんな役割かを下記に示す
    • data/model はアプリの推奨アーキテクチャを参照のこと

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
  • レスポンシブ対応
    • getHomeScreenTypeが Composable で HomeScreenType を返す
  • 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)

  • UI の状態を表現する interface
  • Composable Function から参照しやすい形にしてなっている
  • Sealed Interface にしてあり、Post がない/あるときにそれぞれ必要な情報だけを持たせている(nullable な情報は持たせない)
    • Composable では when でスマートキャストして参照する

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

Software Developer / Engineering Manager

Home Resume GitHub