ユーザ用ツール

サイト用ツール


サイドバー

プログレス合同会社

広告

android:studio:application:feature-depart:navigation

03.ホーム画面の表示

NavGraphに発車予定のホーム画面を登録して、Compose Navigationで表示します。

:feature:departモジュールのbuild.gradle.ktsCompose Navigationの依存ライブラリを追記します。




   :
dependencies {
   :
  implementation(libs.navigation.compose)
  implementation(libs.hilt.navigation.compose)
  implementation(project(":feature:depart:home"))
}

4行目
Compose Navigationの依存ライブラリを追記します。
5行目
Compose NavigationDI(Hilt)依存ライブラリを追記します。
6行目
発車予定のホーム画面を定義しているモジュールを依存ライブラリとして追記します。

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

:feature:departモジュールのnavigationディレクトリ(新規作成します)内にDepartNavigation.ktを作成し、NavGraphNavHostに登録します。

package jp.co.progress_llc.portal.feature.depart.navigation

import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import jp.co.progress_llc.portal.feature.depart.home.presentation.DepartHomeScreen

const val DEPART_ROUTE = "depart"

fun NavGraphBuilder.departNavigation() {
  composable(DEPART_ROUTE) {
    DepartHomeScreen()
  }
}

7行目
発車予定のホーム画面のNavGraph名を定義しています。
10行目~11行目
DepartHomeScreenを登録しています。

DI(Hilt)への登録

:feature:departモジュールのdiディレクトリ(新規作成します)内にDepartNavGraphModule.ktを作成し、NavGraphDI(Hilt)に登録します。

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.departNavigation

@Module
@InstallIn(SingletonComponent::class)
object DepartNavGraphModule {
  @Provides
  @IntoSet
  fun provideDepartNavGraph(): NavGraphBuilder.() -> Unit = { departNavigation() }
}

14行目~16行目
NavGraphを登録しています。

アプリの依存に発車予定機能の窓口モジュールを追加

発車予定画面はアプリのホーム画面から遷移してきますので、:appモジュールのbuild.gradle.ktsに発車予定機能の窓口モジュールへの依存を追記します。

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

4行目
発車予定機能の窓口モジュールへの依存を追記します。

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

アプリのホーム画面にナビゲーションを追加

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

   :
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
   :
import jp.co.progress_llc.portal.feature.depart.navigation.DEPART_ROUTE
   :
fun HomeScreen (
  modifier: Modifier = Modifier
  modifier: Modifier = Modifier,
  navController: NavHostController
) {
   :
      IconButton(
        onClick = { },
        onClick = { navController.navigate(DEPART_ROUTE) },
   :
fun HomeScreenPreview() {
  AppTheme {
    HomeScreen()
    val navController = rememberNavController()
    HomeScreen(navController = navController)
  }
}

2行目~3行目
必要なimportを追加します。
5行目
発車予定画面のNavGraph名を定義している依存のimportを追加します。
8行目~10行目
HomeScreenの引数にNavHostControllerを追加します。
14行目~15行目
IconButtononClickに発車予定画面への画面遷移を追加します。
19行目~21行目
HomeScreenの引数にNavHostControllerが追加されたのでプレビュー表示にも追加します。

アプリのホーム画面のNavGraphにナビゲーションを追加

:appモジュールのHomeNavigation.ktにもナビゲーションを追加します。

   :
import androidx.navigation.NavHostController
   :
fun NavGraphBuilder.homeNavigation() {
  composable("home") {
    HomeScreen()
  }
}
fun NavGraphBuilder.homeNavigation(navController: NavHostController) {
  composable("home") {
    HomeScreen(navController = navController)
  }
}

2行目
必要なimportを追加します。
4行目~13行目
HomeScreenの引数にNavHostControllerを追加します。

アプリのホーム画面のDI(Hilt)モジュールにナビゲーションを追加

:appモジュールのHHomeNavGraphModule.ktにもナビゲーションを追加します。

   :
import androidx.navigation.NavHostController
   :
  fun provideHomeNavGraph(): NavGraphBuilder.() -> Unit = {
    homeNavigation()
  }
  fun provideHomeNavGraph(): (NavHostController) -> NavGraphBuilder.() -> Unit = {
    navController -> { homeNavigation(navController) }
  }
   :

2行目
必要なimportを追加します。
4行目~9行目
homeNavigationの引数にNavHostControllerを追加します。

android/studio/application/feature-depart/navigation.txt · 最終更新: by 管理者