目次

03.ホーム画面の表示

:feature:depart:homeモジュールにnavigationディレクトリ(パッケージ)を追加し、直下にホーム画面のNavGraphとしてDepartHomeNavGraph.ktを作成します。


title:/feature/depart/home/src/main/kotlin/jp/co/progress_llc/portal/feature/depart/home/navigation/DepartHomeNavGraph.kt
package jp.co.progress_llc.portal.feature.depart.home.navigation
 
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import jp.co.progress_llc.portal.feature.depart.home.presentation.DepartHomeScreen
 
const val DEPART_HOME = "depart_home"
 
fun NavGraphBuilder.departHomeNavGraph() {
  composable(DEPART_HOME) {
    DepartHomeScreen()
  }
}
7行目、10行目
発車予定のホーム画面のNavGraph名を定義しています。
11行目
NavGraphが呼ばれたときに描画する画面を定義しています。


※ホーム画面は、窓口モジュール経由で遷移(窓口モジュールNavGraphのstartDestination)するため、ホーム画面のNavGraphをDI(Hilt)に提供する必要はありません。

発車予定表示機能の窓口NavGraphを作成

:feature:depart(窓口)モジュールのbuild.gradle.ktsにNavGraphの作成に必要な依存を追記します。

title:/feature/depart/build.gradle.kts
plugins {
   :
  alias(libs.plugins.hilt)
}
 
dependencies {
  implementation(libs.hilt.navigation.compose)
  implementation(libs.hilt.android)
  implementation(project(":feature:depart:home"))
  ksp(libs.hilt.compiler)
}
3行目
DI(Hilt)のプラグインを追記します。
7行目
DI(Hilt)のナビゲーションライブラリへの依存を追記します。
8行目
DI(Hilt)のライブラリへの依存を追記します。
9行目
ホーム画面モジュールへの依存を追記します。
10行目
DI(Hilt)のKSPコンパイラーモジュールへの依存を追記します。

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

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

title:/feature/depart/src/main/kotlin/jp/co/progress_llc/portal/feature/depart/navigation/DepartNavGraph.kt
package jp.co.progress_llc.portal.feature.depart.navigation
 
import androidx.navigation.NavGraphBuilder
import androidx.navigation.navigation
import jp.co.progress_llc.portal.feature.depart.home.navigation.DEPART_HOME
import jp.co.progress_llc.portal.feature.depart.home.navigation.departHomeNavGraph
 
const val DEPART_ROOT = "depart_root"
 
fun NavGraphBuilder.departNavGraph() {
  navigation(
    startDestination = DEPART_HOME,
    route = DEPART_ROOT
  ) {
    departHomeNavGraph()
  }
}
8行目
:appモジュールから遷移するNavGraph名を定義しています。
10行目～17行目
発車予定表示機能に遷移で使用されるNavGraphを定義しています。
12行目
発車予定表示機能に遷移したときに、さらに遷移するNavGraphの名前を定義しています。
15行目
遷移先のNavGraphを定義しています。

窓口NavGraphをDI(Hilt)に提供

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

title:/feature/depart/src/main/kotlin/jp/co/progress_llc/portal/feature/depart/di/DepartNavGraphModule.kt
package jp.co.progress_llc.portal.feature.depart.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.navigation.departNavGraph
 
@Module
@InstallIn(SingletonComponent::class)
object DepartNavGraphModule {
  @Provides
  @IntoSet
  fun provideDepartNavGraph(): NavGraphBuilder.() -> Unit = {
    departNavGraph()
  }
}
16行目～18行目
窓口モジュールのNavGraphを提供しています。
ホーム画面のNavGraphは、窓口モジュールのNavGraphにネストされています。

:appのホーム画面にナビゲーションを追加

:appモジュールのbuild.gradle.ktsに発車予定表示機能への依存を追記します。

title:/app/build.gradle.kts
   :
dependencies {
   :
  implementation(project(":feature:depart"))
   :
}
4行目
発車予定表示機能への依存を追記します。

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

発車予定表機能はホーム画面の列車アイコンから遷移してきますので、:appモジュールのAppHomeScreen.ktにナビゲーション(画面遷移)を追記します。

highlight:; title:/app/src/main/kotlin/jp/co/progress_llc/portal/presentation/AppHomeScreen.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.navigation.DEPART_ROOT
   :
fun AppHomeScreen () {
fun AppHomeScreen(
  navController: NavController = LocalNavController.current
) {
   :
      IconButton(
        onClick = { },
        onClick = { navController.navigate(DEPART_ROOT) },
   :
fun AppHomeScreenPreview() {
  AppTheme {
    AppHomeScreen()
    AppHomeScreen(navController = rememberNavController())
  }
}
2行目
NavControllerを使用するために追記します。
3行目
プレビュー用のNavControllerのために追記します。
5行目～6行目
ナビゲーションに必要なimportを追記します。
8行目～11行目
画面の引数にNavControllerrを追記します。
既定でLocalNavControllerから取得しています。
14行目～15行目
IconButtonのonClickで発車予定表示機能へ画面遷移させます。
19行目～20行目
画面の引数を追加したのでプレビューも対応します。
プレビューで画面遷移は行わないでください。

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