ナビゲーション レール

Rails は、大画面デバイスで実行されるアプリ内のデスティネーションへのアクセスを提供します。ナビゲーション レールは、次の場合に使用する必要があります。

  • アプリ内のどこからでもアクセスできる必要があるトップレベル デスティネーション
  • 3 ～ 7 つの主要なデスティネーション
  • タブレットまたはパソコンのレイアウト
画面の左側にある縦型のナビゲーション レール。4 つのリンク先（[すべてのファイル]、[最近]、[写真]、[ライブラリ]）があり、それぞれにアイコンとフローティング アクション ボタンが関連付けられています。
図 1. 4 つのデスティネーションとフローティング アクション ボタンがあるナビゲーション レール。

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

API サーフェス

NavigationRail コンポーザブルと NavigationRailItem を使用して、アプリにレールを実装します。NavigationRailItem は、レール列内の単一のレール アイテムを表します。

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

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

例: 鉄道ベースのナビゲーション

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

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

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

要点

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

結果

次の画像は、前のスニペットの結果を示しています。

3 つのデスティネーション（曲、アルバム、プレイリスト）と関連するアイコンが付いた縦型ナビゲーション レール。アイコンは、レールの各ナビゲーション ボタンの目的を視覚的に示します。各デスティネーションには、関連するアイコンが設定されています（たとえば、
図 2. 曲、アルバム、再生リストの 3 つのデスティネーションと、それらに関連付けられたアイコンを含むナビゲーション レール。

参考情報