ナビゲーション レール

レールを使用すると、大画面デバイスで実行されるアプリのデスティネーションにアクセスできます。ナビゲーション レールは、次の場合に使用します。

  • アプリ内のどこからでもアクセスできるようにする必要がある最上位のデスティネーション
  • 3 ～ 7 個の主な目的地
  • タブレットまたはデスクトップのレイアウト
画面の左側にある縦型のナビゲーション レール。4 つのデスティネーション（[All Files]、[Recent]、[Photos]、[Library]）があり、それぞれに関連付けられたアイコンとフローティング アクション ボタンが表示されている。
図 1. 4 つのデスティネーションとフローティング アクション ボタンを含むナビゲーション レール。

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

API サーフェス

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

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)
    }
}

要点

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

結果

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

3 つのデスティネーション（Songs、Album、Playlist）と関連するアイコンが表示された垂直ナビゲーション レール。アイコンは、レール内の各ナビゲーション ボタンの目的を視覚的に示します。各リンク先には、関連するアイコンがペアになっています（例: 「曲」には音符）。
図 2. 3 つのデスティネーション（曲、アルバム、プレイリスト）と関連するアイコンを含むナビゲーション レール。

参考情報