Android の Navigation について

目的

Android 開発における Navgation について復習を兼ねてまとめました

Navigation を使う

1. Navigation を導入するために以下のライブラリを追加します
   ※ version は参考文献にある公式ドキュメントや maven を参照しましょう

   build.gradle

   implementation "androidx.navigation:navigation-compose:2.9.3"
   

   ※ また、以下のように libs.version.toml にちゃんと分けましょう

   libs.version.toml

   [versions]
   nav_version = "2.9.3"
   
   [libraries]
   androidx-navigation-compose = { group = "androidx.navigation" , name = "navigation-compose" , version.ref = "nav_version" }
   

   build.gradle

   // navigation
   implementation(libs.androidx.navigation.compose)
   

   
   

2. Nav Controllerを作る
   ※ navigation graph を保持するために Nav Controller を定義します
   ※ navigation graph とは 各画面の Navigation の関係をグラフ化したものです

   + val navController = rememberNavController()
   

   
   

3. Nav Host を定義する
   ※ NavHost では navigation graph の中身を定義します
   ※ ホストされている画面を navigation graph に追加します

   
   

   navController , startDestination を引数に入力する
   ※ startDestination は初期に遷移される画面です

   + NavHost(
   +     navController = navController,
   +     startDestination = Profile,
   +     modifier = Modifier.padding(innerPadding)
   + ){
   + }
   

   
   

   各画面を定義する
   ※ 画面はオブジェクトで定義し、NavHost にて navigation graph に定義します

   + @Serializable
   + object Profile
   + @Serializable
   + object FriendsList
   
   NavHost(
       navController = navController,
       startDestination = Profile,
       modifier = Modifier.padding(innerPadding)
   ){
   +    composable<Profile> { ProfileScreen() }
   +    composable<FriendsList> { FriendsListScreen() }
   }
   

   
   

   遷移イベントを定義する
   ※ オブジェクトに引数を導入する場合は backStackEntry.toRoute() を利用できます

   NavHost(
       navController = navController,
       startDestination = Profile,
       modifier = Modifier.padding(innerPadding)
   ){
       composable<Profile> { ProfileScreen(
   +        onNavigateToFriendsList = {
   +            navController.navigate(
   +                route = FriendsList
   +            )
   +        }
       ) }
       composable<FriendsList> { FriendsListScreen(
   +        onNavigateToProfile = {
   +            navController.navigate(
   +                route = Profile
   +            )
   +        }
       ) }
   }
   

Tips

• Compose Navigation では各画面を NavBackStackEntry で管理される
  • NavBackStackEntry のライフサイクル状態は 3 つ
  • RESUMED , CREATED , DESTROYED
  
  
• NavHost の他の引数について
  • modifier , contentAlignment は見た目や配置
  • route は複数の NavHost を使う際の識別子
    • メインの画面遷移 + Bottom Navigation など
  • enterTransition ~ sizeTransform は画面遷移時のアニメーション
  
  

参考文献

まとめ

• 画面定義がオブジェクトになり、少し慣れないです。
• 復習でまとめさせていただきました。最後までお読みいただきありがとうございます。