ほとんどのアプリには、アプリのプライマリ ナビゲーション UI からアクセスできるトップレベル デスティネーションがいくつかあります。標準のスマートフォンのディスプレイなどのコンパクトなウィンドウでは、通常、デスティネーションはウィンドウの下部にあるナビゲーション バーに表示されます。タブレットの全画面表示アプリなどの拡大ウィンドウでは、デバイスの左右を手に持ったときにナビゲーション コントロールに簡単にアクセスできるため、通常はアプリの横にナビゲーション レールを配置することをおすすめします。
NavigationSuiteScaffold
は、WindowSizeClass
に基づいて適切なナビゲーション UI コンポーザブルを表示することで、ナビゲーション UI の切り替えを簡素化します。これには、ランタイム ウィンドウ サイズが変更されたときの UI の動的な変更が含まれます。デフォルトの動作では、次のいずれかの UI コンポーネントが表示されます。
- ナビゲーション バー: 幅または高さがコンパクトの場合、またはデバイスがテーブルトップ形状の場合
- ナビゲーション レール: その他すべてに使用
依存関係を追加する
NavigationSuiteScaffold
は、Material3 アダプティブ ナビゲーション スイート ライブラリの一部です。アプリまたはモジュールの build.gradle
ファイルにライブラリの依存関係を追加します。
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Groovy
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
スキャフォールドを作成する
NavigationSuiteScaffold
の 2 つの主要部分は、ナビゲーション スイートのアイテムと、選択されたデスティネーションのコンテンツです。ナビゲーション スイートのアイテムはコンポーザブルで直接定義できますが、これらは別の場所(列挙型など)で定義するのが一般的です。
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
を作成します。その上に、スキャフォールドは NavigationBar
などの特定のナビゲーション UI を描画します。サーフェス UI とナビゲーション UI の両方で、アプリのテーマで指定された値が使用されますが、テーマの値をオーバーライドできます。
containerColor
パラメータは、サーフェスの色を指定します。デフォルトはカラーパターンの背景色です。contentColor
パラメータは、そのサーフェス上のコンテンツの色を指定します。デフォルトでは、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 の各項目をカスタマイズできます。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... }
ナビゲーション タイプをカスタマイズする
NavigationSuiteScaffold
のデフォルトの動作では、ウィンドウ サイズクラスに基づいてナビゲーション UI が変更されます。ただし、この動作をオーバーライドすることをおすすめします。たとえば、フィードで 1 つの大きなコンテンツペインを表示するアプリの場合、開いたウィンドウには固定的なナビゲーション ドロワーを使用できますが、コンパクトなウィンドウ サイズクラスと中程度のウィンドウ サイズクラスでは、デフォルトの動作にフォールバックできます。
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
ライブラリ コンポーネントをご覧ください。