Compila navegación adaptable

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
Figura 1: NavigationSuiteScaffold muestra una barra de navegación en ventanas compactas.
. Figura 2: 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),
}
SampleNavigationSuiteScaffold.kt

Para utilizar NavigationSuiteScaffold, debes realizar un seguimiento del destino actual, que que puedes hacer con rememberSaveable:

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

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

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()
    }
}
SampleNavigationSuiteScaffold.kt

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

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

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

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

Recursos adicionales

Consulta la guía de Material Design:

Consulta los siguientes componentes de la biblioteca androidx.compose.material3:

Anterior
Compatibilidad con el modo multiventana
Siguiente
Cómo compilar un diseño de detalles de lista