このページは Cloud Translation API によって翻訳されました。

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

ほとんどのアプリには、アプリのプライマリナビゲーション UI ですコンパクトなウィンドウ（標準の電話など）の場合デスティネーションは通常、ナビゲーションバーにクリックします。開いたウィンドウ内（たとえば画面を開いたままにしている画面）ナビゲーションレールをアプリと一緒に配置する方がよいでしょう。左右の側面を押さえたままでも、ナビゲーションコントロールに簡単にアクセスできる表示されます。

NavigationSuiteScaffold で簡単に移行適切なナビゲーション UI コンポーザブルを表示することによって、ナビゲーション UI 間の（WindowSizeClassに基づく）これにはランタイムウィンドウサイズの変更時に UI を変更する。デフォルトの動作は、次のいずれかの UI コンポーネントを表示します。

ナビゲーションバー: 幅または高さがコンパクトの場合、またはデバイスがテーブルトップ形状
その他のすべてのナビゲーションレール

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

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

依存関係を追加する

NavigationSuiteScaffold は次の地域に属しています: マテリアル 3 アダプティブナビゲーションスイートライブラリです。アプリの build.gradle ファイルにライブラリの依存関係を追加するまたはモジュール:

Kotlin


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

Groovy


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

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

NavigationSuiteScaffold の 2 つの主要部分は、ナビゲーションスイートのアイテムです。コンテンツが表示されます。kubectl の「get」コマンドやコンポーザブルのナビゲーションスイート項目ですが、これらを他の場所（たとえば、列挙型）に配置します。

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 を作成します。スキャフォールドがウィンドウ全体を占有しますその上に Scaffold は特定のナビゲーション UI（NavigationBar など）を描画します。サーフェスとナビゲーション UI はどちらも、アプリのテーマの値をオーバーライドできます。

containerColor パラメータはサーフェスの色を指定します。デフォルトカラーパターンの背景色ですcontentColor パラメータサーフェス上のコンテンツの色を指定します。デフォルトは「on」色 containerColor に指定された値のいずれかになります。たとえば、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 の各項目をカスタマイズできます。API を呼び出す場合、 item 関数を使用するには、Terraform の 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 が変更されるウィンドウサイズに基づくクラスをご覧ください。ただし、この動作をオーバーライドできます。たとえば、アプリにコンテンツを大きく表示する場合は、固定的なナビゲーション拡張ウィンドウのドロワーがデフォルトになりますが、コンパクトと中程度のウィンドウサイズクラス:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

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

参考情報

マテリアルデザインのガイダンスをご覧ください。

次の androidx.compose.material3 ライブラリコンポーネントをご覧ください。

マルチウィンドウモードのサポート

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