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

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

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

  • ナビゲーション バー: 幅または高さがコンパクトの場合、またはデバイスが テーブルトップ形状
  • その他のすべてのナビゲーション レール
図 1.NavigationSuiteScaffold は、コンパクト ウィンドウでナビゲーション バーを表示します。
<ph type="x-smartling-placeholder">
</ph>
図 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),
}

NavigationSuiteScaffold を使用するには、現在のデスティネーション( これは rememberSaveable を使用して実行できます。

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

次の例では、navigationSuiteItems パラメータ(型 NavigationSuiteScopeitem 関数を使用する 各デスティネーションのナビゲーション 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.
}

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

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

色を変更

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

containerColor パラメータはサーフェスの色を指定します。デフォルト カラーパターンの背景色ですcontentColor パラメータ サーフェス上のコンテンツの色を指定します。デフォルトは「on」色 containerColor に指定された値のいずれかになります。たとえば、containerColor の場合、 background 色を使用し、contentColoronBackground 色を使用します。 Compose でのマテリアル デザイン 3 のテーマ設定をご覧ください。 をご覧ください。これらの値をオーバーライドする場合 テーマで定義された値を使用して、アプリでダークモードとライトモードの表示をサポートする モード:

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

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

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

最終的には、ナビゲーション 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...
}

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

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

参考情報

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

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