ナビゲーション バー

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

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

結果

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

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

参考情報