ユーザ用ツール

サイト用ツール


サイドバー

プログレス合同会社

広告

android:studio:application:feature-depart:navigation-home

03.ホーム画面の表示

:feature:depart:homeモジュールにnavigationディレクトリ(パッケージ)を追加し、直下にホーム画面のNavGraphとして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が呼ばれたときに描画する画面を定義しています。


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

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

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

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を作成します。

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を作成します。

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に発車予定表示機能への依存を追記します。

   :
dependencies {
   :
  implementation(project(":feature:depart"))
   :
}

4行目
発車予定表示機能への依存を追記します。

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

発車予定表機能はホーム画面の列車アイコンから遷移してきますので、:appモジュールの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行目
IconButtononClickで発車予定表示機能へ画面遷移させます。
19行目~20行目
画面の引数を追加したのでプレビューも対応します。
プレビューで画面遷移は行わないでください。

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

android/studio/application/feature-depart/navigation-home.txt · 最終更新: by プログレス合同会社