ナビゲーション バーを使用すると、アプリ内のデスティネーションを切り替えることができます。ナビゲーション バーは、次のような場合に使用する必要があります。
- 重要度が同等の 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)) } }
要点
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 つの移動先が横並びで表示されています。各宛先には、関連するアイコンがペア設定されています(たとえば、「曲」には音符のアイコン)。](https://developer.android.com/static/develop/ui/compose/images/NavigationBar.png?authuser=19&hl=ja)