Android 用Jektpack Compose 來開発app【03】 - Composeナビゲーション編
2024, May 27
前書き
- これはこのシリーズの第三回目の記事です
全てComposeでプロジェクトを開発する機会があったので
いろいろと試行錯誤した結果
いくつかの知見を得ました
この過程をメモとして皆さんと共有することにしました
初期設定
- 使用するライブラリは以下の通りです：
Function
Lib
build
gradle.kts + toml
api
okhttp + retrofit2
navigation
navigation-compose
design
material 3
di
hilt
ui
jetpack compose
json
kotlinx.serialization
db
room
Composeのナビゲーションを実装する
- ここではMainアクティビティを使って他の画面にナビゲートする予定です
今日はComposeのNavHostを実装します
step1. 各画面のenumを作成する
- まず最初にenumを定義します
ここにはナビゲートする予定の内容を入れます
後で必要に応じて拡張することもできます
step2. Compose Screenを定義する
- 必要な画面を実装します、例えば：
step3. 各画面のルーターを作成する
- NavGraphBuilderを使用するため
NavGraphBuilderを拡張して各画面のルーターを指定します
ここでは先ほど定義したLoginをルーターの参照指標として使用します
そしてLoginScreen画面にナビゲートするために後ろのlambdaにその画面を追加します
step4. 各画面を登録する
- 次にナビゲートするすべての画面を
NavHostに追加します
startDestination: 開始画面
navController: ナビゲートを制御するコントローラー
画面の遷移はnavControllerで制御します
例：navController.navigate(ElegantAccessScreen.Feedback.name)
step5. 一つのアクティビティで複数の画面を実現する
- 最後に新しい画面を追加する場合
Screenを実装するだけです
実際の使用例：