ほとんどのアプリには、 アプリのプライマリナビゲーション UI ですコンパクトなウィンドウ(標準の電話など)の場合 デスティネーションは通常、ナビゲーション バーに クリックします。開いたウィンドウ内(たとえば画面を開いたままにしている画面) ナビゲーション レールをアプリと一緒に配置する方がよいでしょう。 左右の側面を押さえたままでも、ナビゲーション コントロールに簡単にアクセスできる 表示されます。
NavigationSuiteScaffold
で簡単に移行
適切なナビゲーション UI コンポーザブルを表示することによって、ナビゲーション UI 間の
(WindowSizeClass
に基づく)これには
ランタイム ウィンドウ サイズの変更時に UI を変更する。デフォルトの動作は、
次のいずれかの UI コンポーネントを表示します。
- ナビゲーション バー: 幅または高さがコンパクトの場合、またはデバイスが テーブルトップ形状
- その他のすべてのナビゲーション レール
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=0000&hl=ja)
NavigationSuiteScaffold
は、コンパクト ウィンドウでナビゲーション バーを表示します。
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=0000&hl=ja)
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
パラメータ(型
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. }
デスティネーション コンテンツ ラムダ内で、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
色を使用し、contentColor
は onBackground
色を使用します。
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
ライブラリ コンポーネントをご覧ください。