アダプティブナビゲーションを作成する

ほとんどのアプリには、アプリのメインナビゲーション UI からアクセスできるトップレベルのデスティネーションがいくつかあります。標準的なスマートフォンのディスプレイなど、コンパクトなウィンドウでは、通常、ウィンドウの下部にあるナビゲーションバーにデスティネーションが表示されます。タブレットの全画面表示アプリなど、ウィンドウが拡大されている場合は、デバイスの左右を持ってナビゲーションコントロールに簡単にアクセスできるため、アプリの横にあるナビゲーションレールを使用する方が適しています。

NavigationSuiteScaffold は、WindowSizeClass に基づいて適切なナビゲーション UI コンポーザブルを表示することで、ナビゲーション UI の切り替えを簡素化します。これには、実行時のウィンドウサイズ変更中に UI を動的に変更することも含まれます。デフォルトの動作では、次のいずれかの UI コンポーネントが表示されます。

幅または高さがコンパクトな場合、またはデバイスがテーブルトップポーズの場合: ナビゲーションバー
上記以外の場合: ナビゲーションレール

**図 1.**`NavigationSuiteScaffold` は、コンパクトなウィンドウにナビゲーションバーを表示します。

**図 2.**`NavigationSuiteScaffold` は、拡大されたウィンドウにナビゲーションレールを表示します。

依存関係を追加する

NavigationSuiteScaffold は、 Material3 アダプティブナビゲーションスイートライブラリの一部です。アプリまたはモジュールの build.gradle ファイルにライブラリの依存関係を追加します。

Kotlin

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

Groovy

implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

スキャフォールドを作成する

NavigationSuiteScaffold の主な部分は、ナビゲーションスイートアイテムと、選択したデスティネーションのコンテンツです。ナビゲーションスイートアイテムはコンポーザブルで直接定義できますが、通常は別の場所（enum など）で定義します。

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}SampleNavigationSuiteScaffold.kt

NavigationSuiteScaffold を使用するには、現在のデスティネーションを追跡する必要があります。これを行うには、rememberSaveable を使用します。

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }SampleNavigationSuiteScaffold.kt

次の例では、navigationSuiteItems パラメータ（型 NavigationSuiteScope）は、そのitem 関数を使用して、個々のデスティネーションのナビゲーション UI を定義します。デスティネーション UI は、ナビゲーションバー、レール、ドロワーで使用されます。ナビゲーションアイテムを作成するには、AppDestinations （前のスニペットで定義）をループ処理します。

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}SampleNavigationSuiteScaffold.kt

デスティネーションコンテンツラムダ内で、currentDestination 値を使用して、表示する UI を決定します。アプリでナビゲーションライブラリを使用している場合は、ここで使用して適切なデスティネーションを表示します。when ステートメントで十分です。

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}SampleNavigationSuiteScaffold.kt

色を変更

NavigationSuiteScaffold は、スキャフォールドが占有する領域全体（通常はウィンドウ全体）に Surface を作成します。さらに、スキャフォールドは、特定のナビゲーション UI、たとえば NavigationBar を描画します。サーフェスとナビゲーション UI の両方で、アプリのテーマで指定された値が使用されますが、テーマの値をオーバーライドできます。

containerColor パラメータは、サーフェスの色を指定します。デフォルトは、カラーパターンの背景色です。contentColor パラメータは、サーフェス上のコンテンツの色を指定します。デフォルトは、containerColor に指定された値の「on」の色です。たとえば、containerColor で background 色を使用する場合、contentColor では onBackground 色を使用します。カラーシステムの仕組みについて詳しくは、Compose でのマテリアルデザイン 3 のテーマ設定をご覧ください。これらの値をオーバーライドする場合は、アプリがダークモードとライトモードをサポートするように、テーマで定義された値を使用します。

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}SampleNavigationSuiteScaffold.kt

ナビゲーション UI は、NavigationSuiteScaffold サーフェスの前面に描画されます。 UI 色のデフォルト値は NavigationSuiteDefaults.colors()で提供されますが、これらの値もオーバーライドできます。たとえば、ナビゲーションバーの背景を透明にし、他の値をデフォルトにする場合は、navigationBarContainerColor をオーバーライドします。

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}SampleNavigationSuiteScaffold.kt

最終的に、ナビゲーション UI の各アイテムをカスタマイズできます。 item 関数を呼び出すときに、 NavigationSuiteItemColors のインスタンスを渡すことができます。このクラスは、ナビゲーションバー、ナビゲーションレール、ナビゲーションドロワーのアイテムの色を指定します。つまり、各ナビゲーション UI タイプで同じ色を使用することも、必要に応じて色を変更することもできます。すべてのアイテムに同じオブジェクトインスタンスを使用するには、NavigationSuiteScaffold レベルで色を定義し、NavigationSuiteDefaults.itemColors() 関数を呼び出して、変更するアイテムのみをオーバーライドします。

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}SampleNavigationSuiteScaffold.kt

ナビゲーションタイプをカスタマイズする

NavigationSuiteScaffold のデフォルトの動作では、ナビゲーション UI ウィンドウサイズクラスに基づいて変更されます。ただし、この動作をオーバーライドすることもできます。たとえば、アプリでフィードのコンテンツの大きなペインが 1 つ表示される場合、アプリは拡大されたウィンドウに永続的なナビゲーションドロワーを使用できますが、コンパクトなウィンドウと中程度のウィンドウサイズクラスではデフォルトの動作に戻ります。

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}SampleNavigationSuiteScaffold.kt

参考情報

ナビゲーションの原則
マテリアルデザインのガイダンス:
androidx.compose.material3 ライブラリコンポーネント:

複数のフォームファクタでカメラをサポート

「リストと詳細」レイアウトを作成する

アダプティブ ナビゲーションを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。