サンプルコードで学ぶJetpack Composeのアーキテクチャ
2022-05-09
Summary
- JetNewsのコード読んだらこんな構成になってた
- それぞれがどんな役割かを下記に示す
Activity
- Single Activity
- App を setContent するだけ
- NavigationActions で全ての画面遷移時の処理を実装している
- 画面遷移時には NavigationActions の関数を呼ぶ
- 画面全体に対応した Composable
- レスポンシブ対応
- ViewModel との接続
- 状態ホイスティングして ViewModel にイベントを伝える
- ViewModel のメソッドは Route で呼び出し、Screen 以下からは呼び出さない
- 役割的には今までの Activity/Fragment に近い
- 表示されてる画面を表現するコンポーネント
- 画面が広い場合の Screen、狭い場合の Screen が存在する
- ここより下はより具体的で部品的な UI コンポーネント
- Android Architecture Component の ViewModel
- Route から呼ばれるメソッドがある
- UiState と ViewModelState が定義されている
- UI の状態を表現する interface
- Composable Function から参照しやすい形にしてなっている
- Sealed Interface にしてあり、Post がない/あるときにそれぞれ必要な情報だけを持たせている(nullable な情報は持たせない)
Unidirectional data flow
- ViewModel を介して Unidirectional data flow を実現している
- Composable は UiState を collectAsState して得た情報のみを表示する
- UiState 以外の ViewModel のメソッド/プロパティの返り値を表示したり条件分岐の条件にしてはいけない