ナビゲーション バー

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

• 同等の重要度を持つ 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() は NavHostController のインスタンスを作成して記憶します。これは、NavHost 内のナビゲーションを管理します。
• 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 を使用したナビゲーション