目次

05.経路一覧編集画面の表示

:feature:depart:routeモジュールにnavigationディレクトリ(パッケージ)を追加し、直下にDepartRouteNavGraph.ktを作成します。

title:/feature/depart/route/src/main/kotlin/jp/co/progress_llc/portal/feature/depart/route/navigation/DepartRouteNavGraph.kt
package jp.co.progress_llc.portal.feature.depart.route.navigation
 
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import jp.co.progress_llc.portal.feature.depart.route.presentation.DepartRouteScreen
 
const val DEPART_ROUTE = "depart_route"
 
fun NavGraphBuilder.departRouteNavGraph() {
  composable(DEPART_ROUTE) {
    DepartRouteScreen()
  }
}
7行目、10行目
発車予定表示機能の経路一覧編集画面のNavGraph名を定義しています。
10行目～11行目
DepartRouteScreenをNavGraphに登録しています。

経路一覧編集画面のNavGraphをDI(Hilt)に登録

:feature:depart:routeモジュールにdiディレクトリ(パッケージ)を追加し、直下にDepartRouteNavGraphModule.ktを作成します。

title:/feature/depart/route/src/main/kotlin/jp/co/progress_llc/portal/feature/depart/route/di/DepartRouteNavGraphModule.kt
package jp.co.progress_llc.portal.feature.depart.route.di
 
import dagger.Module
import dagger.Provides
import dagger.hilt.InstallIn
import dagger.hilt.components.SingletonComponent
import dagger.multibindings.IntoSet
import androidx.navigation.NavGraphBuilder
import jp.co.progress_llc.portal.feature.depart.route.navigation.departRouteNavGraph
 
@Module
@InstallIn(SingletonComponent::class)
object DepartRouteNavGraphModule {
  @Provides
  @IntoSet
  fun provideDepartRouteNavGraph(): NavGraphBuilder.() -> Unit = {
    departRouteNavGraph()
  }
}
16行目～18行目
経路一覧編集画面のNavGraphを登録しています。

ホーム画面に経路一覧編集画面への遷移を追記

経路一覧編集画面は、発車予定表示機能のホーム画面から遷移しますので、:feature:depart:homeモジュールに経路一覧編集画面への依存を追記します。

title:/feature/depart/home/build.gradle.kts
   :
dependencies {
   :
  implementation(project(":core:navigation"))
  implementation(project(":feature:depart:route"))
   :
}
4行目
LocalNavControllerを使用するのでナビゲーションモジュールへの依存を追記します。
5行目
経路一覧編集画面への依存を追記します。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

発車予定表示機能のホーム画面に経路一覧編集画面への遷移を追記します。

highlight:; title:/feature/depart/home/src/main/kotlin/jp/co/progress_llc/portal/feature/depart/home/presentation/DepartHomeScreen.kt
   :
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
   :
import jp.co.progress_llc.portal.core.navigation.LocalNavController
import jp.co.progress_llc.portal.feature.depart.route.navigation.DEPART_ROUTE
   :
fun DepartHomeScreen() {
fun DepartHomeScreen(
  navController: NavController = LocalNavController.current
) {
   :
      CustomExposedDropdownMenuBox(
   :
        onAdditionalItemClick = { }
        onAdditionalItemClick = { navController.navigate(DEPART_ROUTE) }
   :
fun DepartHomeScreenPreview() {
  AppTheme {
    DepartHomeScreen()
    DepartHomeScreen(navController = rememberNavController())
2行目
NavControllerを使用するために追記します。
3行目
プレビュー用のNavControllerのために追記します。
5行目～6行目
ナビゲーションに必要なimportを追記します。
8行目～11行目
画面の引数にNavControllerrを追記します。
既定でLocalNavControllerから取得しています。
15行目～16行目
ドロップダウンリストの追加アイテムのクリックで経路一覧編集画面へ画面遷移させます。
20行目～21行目
画面の引数を追加したのでプレビューも対応します。
プレビューで画面遷移は行わないでください。

エミュレーターでアプリケーションを実行して、画面遷移で発車予定表示機能の経路一覧編集画面が表示されることを確認します。