#目次

Navigationとは
サンプルコード
まとめ

##紹介する実装内容

##1. Navigationとは

この記事は、Jetpack Compose Scaffold(BottomNavigation UI)で構築したUIをもとに、Navigationを実装するので、UIの説明は省略させていただきます。

NavHost‥rememberNavControllerを渡し、NavControllerのサブクラスであるNavHostControllerでステートを管理します。
また、NavGraphBuilderを用いて、navgraphに対し画面遷移情報を追加します。

#####ここで、NavGraphBuilderに、どのようにnavgraphをついかするの??

composableにおいて、routeを渡すことでnavgraphを構成することができます。では、詳細を以下のコードでみてみましょう。

public fun NavGraphBuilder.composable(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    content: @Composable (NavBackStackEntry) -> Unit
) {
    addDestination(
        ComposeNavigator.Destination(provider[ComposeNavigator::class], content).apply {
            this.route = route
            arguments.forEach { (argumentName, argument) ->
                addArgument(argumentName, argument)
            }
            deepLinks.forEach { deepLink ->
                addDeepLink(deepLink)
            }
        }
    )
}

引数のrouteに注目し、addDestination以下にthis.route = routeとあり、渡したrouteをもとに画面遷移の情報を追加していることがわかります。
また、contentスロットがあるので、コンポーザブルをラムダで呼び出すことができます。その他の引数についての説明は別記事で説明します。

では、どのタイミングでrouteを渡すかというと、以下のようになります。

ここで、sealed class にしている意図として網羅性を担保できることです。

それでは、サンプルコードを用いて実際に画面遷移を行っていきます。

##2. サンプルコード

navgraphを作成する。

@Composable
fun ScreenNavigation(
    navController: NavHostController
){
    NavHost(
        navController = navController,
        startDestination = Screen.MailScreen.route
    ){
        composable(Screen.MailScreen.route){
            MailScreen()
        }
        composable(Screen.ProfileScreen.route){
            ProfileScreen()
        }
    }
}

NavHostのスロットで、composableは上記のように呼び出します。

次に、ScaffoldのスロットbottomBarで、BottomAppBarを呼び出し、**Scaffoldのcontent(スロット)**で、上記のScreenNavigationを呼び出します。

Scaffoldは、マテリアルコンポーネントを対応する画面上に配置することができます。よって、bottomBarで呼び出しているBottomAppBarのcontent(スロット)で以下のコンポーザブルを呼び出します。

@Composable
fun CustomBottomNav(
    navController: NavHostController
) {

    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    BottomNavigation(
        modifier = Modifier
            .padding(0.dp, 0.dp, 0.dp, 5.dp)
            .height(100.dp),
        elevation = 0.dp
    ) {
        screenItem.forEach { screen ->
            BottomItem(
                screen = screen,
                currentDestination = currentDestination,
                navController = navController
            )
        }
    }
}

ここで重要になってくるのは、navgraphで作成した画面遷移がどのように実行されるかを考えることです。

NavHostは、画面遷移を行うためにBackStackを生成します。このBackStackというリストを利用することで、NavHostが再コンポーズされるたびにcomposableで記述したコンポーザブルを呼び出して画面を更新しています。

よって、現状の画面がどのコンポーザブルで構成されているかをBottomNavigationに伝える必要があるので、上記のnavBackStackEntryをステートとして管理し、currentDestinationで、BackStackから更新される画面を受け取ることができます。

最後に、BottonNavigationのスロットで呼び出されている。BottomItemについて確認していきます。

@Composable
fun RowScope.BottomItem(
    screen: Screen,
    currentDestination: NavDestination?,
    navController: NavHostController
){
    BottomNavigationItem(
        icon = {
               Icon(
                   imageVector = screen.icon,
                   contentDescription = ""
               )
        },
        selected = currentDestination?.hierarchy?.any {
            it.route == screen.route
        } == true,
        unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
        onClick = {
            navController.navigate(screen.route)
        }
    )
}

BottonNavigation内で、コンポーザブルを呼び出すために、上記のコンポーザブルはRowScopeのコンポーザブルとして定義し、スロットで、BottomNavigationItemを呼び出します。

BottomNavigationItemでは、icon, label, selectedなどBottomNavigationを構成する要素を細かく設定することができます。ここでは、BottomNavigationに関連する処理だけを説明します。

selected‥any{}は、与えられたリストが条件を満たせばBooleanで結果を返してくれるものです。ここで何を確認しているのかというと、BackStack(リスト)から与えられたrouteと、画面を構成してるrouteがマッチしているかを確認しています。

上記のコードを実行すると、

このように実装することができます。

##3. まとめ

今回は、Scaffoldを用いてBottonNavigationを実装してみました。
画面遷移時の、Argumentsの画面間受け渡し、Nested Navigationを今後改めて説明していきたいと思います。