La mayoría de las aplicaciones tienen algunos destinos de nivel superior a los que se puede acceder a través de la la IU de navegación principal de la app. En ventanas compactas, como un teléfono estándar los destinos se muestran en una barra de navegación en el parte inferior de la ventana. En una ventana expandida, como una app de pantalla completa en una tablet, un riel de navegación a lo largo de la aplicación suele ser una mejor opción, ya que el los controles de navegación son más fáciles de alcanzar mientras se presionan los lados izquierdo y derecho del dispositivo.
NavigationSuiteScaffold
simplifica el cambio.
entre las IU de navegación mostrando el elemento componible de IU de navegación adecuado
según WindowSizeClass
. Esto incluye dinámicamente
cambiar la IU durante los cambios de tamaño de la ventana de tiempo de ejecución El comportamiento predeterminado
Muestra cualquiera de los siguientes componentes de IU:
- Barra de navegación si el ancho o la altura son compactos o si el dispositivo está en posición de mesa
- Riel de navegación para todo lo demás
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=0000&hl=es)
NavigationSuiteScaffold
muestra una barra de navegación en ventanas compactas.
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=0000&hl=es)
NavigationSuiteScaffold
muestra un riel de navegación en ventanas expandidas.
Cómo agregar dependencias
NavigationSuiteScaffold
es parte del
Paquete de navegación adaptable de Material3
biblioteca. Agrega una dependencia para la biblioteca en el archivo build.gradle
de tu app.
o módulo:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Groovy
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
Crea un andamiaje
Las dos partes principales de NavigationSuiteScaffold
son los elementos del paquete de navegación.
y el contenido del destino seleccionado. Puedes definir directamente
Elementos del paquete de navegación en un elemento componible, pero es común tenerlos definidos
en otro lugar, por ejemplo, en una enumeración:
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), }
Para utilizar NavigationSuiteScaffold
, debes realizar un seguimiento del destino actual, que
que puedes hacer con rememberSaveable
:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
En el siguiente ejemplo, el parámetro navigationSuiteItems
(tipo
NavigationSuiteScope
usa su función item
para definir la IU de navegación de un destino individual. La IU de destino es
que se usa en las barras de navegación, los rieles y los paneles laterales. Para crear elementos de navegación,
realiza una repetición indefinida en tu AppDestinations
(definida en el fragmento anterior):
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. }
Dentro de la lambda del contenido de destino, usa el valor currentDestination
para
decidir qué IU mostrar. Si usas una biblioteca de navegación en tu app, úsala
para mostrar el destino adecuado. Una sentencia when puede ser suficiente:
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
Cambiar colores
NavigationSuiteScaffold
crea un objeto Surface
sobre toda el área.
que ocupa el andamiaje, por lo general, toda la ventana. Además de eso, el andamiaje
Diseña la IU de navegación específica, como un NavigationBar
.
Tanto la superficie como la IU de navegación usan los valores especificados en los atributos
tema, pero puedes anular los valores de tema.
El parámetro containerColor
especifica el color de la superficie. Predeterminado
es el color de fondo de tu esquema de colores. El parámetro contentColor
especifica el color del contenido en esa superficie. La configuración predeterminada es la opción color [color]
de lo que se especifique para containerColor
. Por ejemplo, si containerColor
usa el color background
, luego contentColor
usa el color onBackground
.
Consulta Temas de Material Design 3 en Compose
para obtener más detalles sobre cómo funciona el sistema de colores. Cuando anules estos valores,
usa valores definidos en el tema para que la app admita pantallas oscuras y claras.
modos:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
La IU de navegación se dibuja frente a la superficie NavigationSuiteScaffold
.
Los valores predeterminados para los colores de la IU son proporcionados por
NavigationSuiteDefaults.colors()
, pero tú
también puede anular estos valores. Por ejemplo, si quieres que el fondo de
la barra de navegación sean transparentes, pero los demás valores serán los predeterminados
anular navigationBarContainerColor
:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
En última instancia, puedes personalizar cada elemento de la IU de navegación. Cuando llames al
item
, puedes pasar una instancia de
NavigationSuiteItemColors
La clase especifica
los colores de los elementos de una barra de navegación, un riel de navegación y uno de navegación
panel lateral. Esto significa que puedes tener colores idénticos en todos los tipos de IU de navegación,
o puedes variar los colores según tus necesidades. Define los colores en el
Nivel de NavigationSuiteScaffold
para usar la misma instancia de objeto para todos los elementos
y llama a la función NavigationSuiteDefaults.itemColors()
para anular solo
los que quieres cambiar:
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... }
Cómo personalizar los tipos de navegación
El comportamiento predeterminado de NavigationSuiteScaffold
cambia la IU de navegación.
según el tamaño de la ventana
clases. Sin embargo,
es posible que quieras anular este comportamiento. Por ejemplo, si tu app muestra un solo
panel grande de contenido para un feed, la aplicación podría usar una navegación
panel lateral para ventanas expandidas, pero aun así recurre al comportamiento predeterminado para
Clases de tamaño de ventana compacta y mediana:
val adaptiveInfo = currentWindowAdaptiveInfo() val customNavSuiteType = with(adaptiveInfo) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) { NavigationSuiteType.NavigationDrawer } else { NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, layoutType = customNavSuiteType, ) { // Content... }
Recursos adicionales
Consulta la guía de Material Design:
Consulta los siguientes componentes de la biblioteca androidx.compose.material3
: