サンプルコードで学ぶJetpack Composeのアーキテクチャ
Summary
- 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 な情報は持たせない)
ViewModelState(e.g. HomeViewModelState)
- ViewModel 内部で管理する状態を保持する
- toUiState()で UiState に変換する
Unidirectional data flow
- ViewModel を介して Unidirectional data flow を実現している
- Composable は UiState を collectAsState して得た情報のみを表示する
- UiState 以外の ViewModel のメソッド/プロパティの返り値を表示したり条件分岐の条件にしてはいけない