ナビゲーション バー

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

  • 重要度が同等の 3 ～ 5 個の目的地
  • コンパクトなウィンドウ サイズ
  • アプリの画面間で一貫した移動先
4 つのデスティネーションがあるナビゲーション バー。各移動先には「ラベル」というプレースホルダ名が付けられています。選択した移動先は円形のアイコンで表示され、残りの移動先は三角形で表示されます。
図 1. 4 つの目的地があるナビゲーション バー。

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

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) } は、選択されたアイテムの状態を管理します。
    • startDestination.ordinal は Destination.SONGS 列挙型エントリの数値インデックス（位置）を取得します。
  • アイテムがクリックされると、navController.navigate(route = destination.route) が呼び出され、対応する画面に移動します。
  • NavigationBarItem の onClick ラムダは、クリックされたアイテムを視覚的にハイライト表示するように selectedDestination 状態を更新します。
  • ナビゲーション ロジックは、navController と startDestination を渡して AppNavHost コンポーザブルを呼び出し、選択した画面の実際のコンテンツを表示します。

結果

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

アプリの画面。下部のナビゲーション バーに [曲]、[アルバム]、[プレイリスト] の 3 つの移動先が横並びで表示されています。各宛先には、関連するアイコンがペア設定されています（たとえば、「曲」には音符のアイコン）。
図 2. 曲、アルバム、プレイリストの 3 つのデスティネーションと関連するアイコンを含むナビゲーション バー。

参考情報