ナビゲーション バー

ナビゲーション バーを使用すると、アプリ内のデスティネーションを切り替えることができます。ナビゲーション バーは、次のような場合に使用する必要があります。

• 重要度が同等の 3 ～ 5 個の目的地
• コンパクトなウィンドウ サイズ
• アプリの画面間で一貫したデスティネーション

このページでは、関連する画面と基本的なナビゲーションを含むナビゲーション バーをアプリに表示する方法について説明します。

API サーフェス

NavigationBar コンポーザブルと NavigationBarItem コンポーザブルを使用して、宛先切り替えロジックを実装します。各 NavigationBarItem は単一の宛先を表します。

NavigationBarItem には、次の主要なパラメータが含まれています。

• selected: 現在のアイテムが視覚的にハイライト表示されるかどうかを決定します。
• onClick(): ユーザーがアイテムをクリックしたときに実行されるアクションを定義する必須のラムダ関数。通常、ここでナビゲーション イベントを処理し、選択したアイテムの状態を更新するか、対応するコンテンツを読み込みます。
• label: アイテム内にテキストを表示します。省略可能。
• icon: アイテム内にアイコンを表示します。省略可能。

例: ボトム ナビゲーション バー

次のスニペットは、アイテムがあるボトム ナビゲーション バーを実装して、ユーザーがアプリ内のさまざまな画面を移動できるようにします。

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

要点

• NavigationBar にはアイテムのコレクションが表示され、各アイテムは Destination に対応しています。
• val navController = rememberNavController() は、NavHost 内のナビゲーションを管理する NavHostController のインスタンスを作成して記憶します。
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } は、現在選択されているアイテムの状態を管理します。
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } は、現在選択されているアイテムの状態を管理します。
  • startDestination.ordinal は、Destination.SONGS 列挙型エントリの数値インデックス（位置）を取得します。
• アイテムがクリックされると、navController.navigate(route = destination.route) が呼び出され、対応する画面に移動します。
• NavigationBarItem の onClick ラムダは、クリックされたアイテムを視覚的にハイライト表示するように selectedDestination 状態を更新します。
• AppNavHost コンポーザブルを呼び出し、navController と startDestination を渡して、選択した画面の実際のコンテンツを表示します。

結果

次の画像は、前のスニペットの結果として表示されるナビゲーション バーを示しています。

参考情報

• マテリアル 3 - ナビゲーション バー
• Compose を使用したナビゲーション