Adaptive Navigation erstellen

Bei den meisten Apps gibt es einige Ziele der obersten Ebene, die über das die primäre Navigations-UI der App. In kompakten Fenstern, z. B. auf einem herkömmlichen Smartphone werden die Ziele üblicherweise in einer Navigationsleiste am unteren Rand des Fensters. In einem maximierten Fenster, etwa einer Vollbild-App auf einem ist normalerweise eine Navigationsschiene neben der App die bessere Wahl, da die Die Navigationsbedienelemente sind einfacher zu erreichen, wenn du die linke und rechte Seite gedrückt hältst des Geräts.

NavigationSuiteScaffold vereinfacht den Wechsel Navigations-UIs durch Anzeige der entsprechenden zusammensetzbaren Navigations-UI basierend auf WindowSizeClass. Dazu gehören dynamische die Benutzeroberfläche während der Größenänderung des Laufzeitfensters ändern. Das Standardverhalten ist eine der folgenden UI-Komponenten anzeigen:

• Navigationsleiste, wenn die Breite oder Höhe kompakt ist oder sich das Gerät im Körperhaltung
• Navigationsstreifen für alles andere

</ph>

</ph> <ph type="x-smartling-placeholder">

Abhängigkeiten hinzufügen

NavigationSuiteScaffold gehört zu Material3 – adaptive Navigation – Suite Bibliothek. Fügen Sie in der Datei build.gradle Ihrer App eine Abhängigkeit für die Bibliothek hinzu oder Modul:

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

Gerüst erstellen

Die beiden Hauptbestandteile von NavigationSuiteScaffold sind die Elemente der Navigationssuite. und den Inhalt für das ausgewählte Ziel. Sie können den Parameter Elemente der Navigationssuite in einer zusammensetzbaren Funktion zu erstellen. an anderer Stelle, zum Beispiel in einer Aufzählung:

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

Wenn Sie NavigationSuiteScaffold verwenden möchten, müssen Sie das aktuelle Ziel erfassen, das können Sie rememberSaveable verwenden:

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

Im folgenden Beispiel wird der Parameter navigationSuiteItems (Typ NavigationSuiteScope verwendet die Funktion item um die Navigations-UI für ein einzelnes Ziel zu definieren. Die Ziel-UI ist für Navigationsleisten, Schienen und Schubladen. Zum Erstellen von Navigationselementen Schleife über AppDestinations (im vorherigen Snippet definiert):

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

Verwende im Lambda des Zielinhalts den Wert currentDestination, um um zu entscheiden, welche Benutzeroberfläche angezeigt werden soll. Wenn Sie in Ihrer App eine Navigationsbibliothek verwenden, nutzen Sie diese. um das entsprechende Ziel anzuzeigen. Eine if-Anweisung kann ausreichen:

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

Farben ändern

NavigationSuiteScaffold erstellt ein Surface für den gesamten Bereich das Scaffold einnimmt, in der Regel das gesamte Fenster. Darüber hinaus muss das Gerüst zeichnet die bestimmte Navigations-UI, z. B. NavigationBar. Sowohl für die Oberfläche als auch für die Navigations-UI werden die Werte verwendet, die im Feld Design, aber Sie können die Werte des Designs überschreiben.

Der Parameter containerColor gibt die Farbe der Oberfläche an. Standardeinstellung ist die Hintergrundfarbe Ihres Farbschemas. Der contentColor-Parameter gibt die Farbe des Inhalts auf dieser Oberfläche an. Die Standardeinstellung ist „An“. Farbe [color] was für containerColor angegeben ist. Beispiel: containerColor verwendet die Farbe background und contentColor die Farbe onBackground. Siehe Material Design 3-Designs in Compose finden Sie weitere Informationen zur Funktionsweise des Farbsystems. Wenn Sie diese Werte überschreiben, Werte aus deinem Design verwenden, damit deine App dunkle und helle Displays unterstützt Modi:

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

Die Navigations-UI wird vor der NavigationSuiteScaffold-Oberfläche gezeichnet. Die Standardwerte für die Farben der Benutzeroberfläche werden von NavigationSuiteDefaults.colors(), aber Sie können diese Werte ebenfalls überschrieben werden. Wenn Sie z. B. möchten, dass der Hintergrund in der Navigationsleiste transparent sein, während die anderen Werte die Standardwerte sind. navigationBarContainerColor überschreiben:

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

Sie können jedes Element in der Navigations-UI individuell anpassen. Wenn Sie die Methode item können Sie eine Instanz von NavigationSuiteItemColors Die Klasse gibt an, die Farben der Elemente in einer Navigationsleiste, in der Navigationsleiste und in Leiste. Das bedeutet, dass Sie für jeden Navigations-UI-Typ identische Farben haben können, oder die Farben je nach Bedarf ändern. Definieren Sie die Farben im NavigationSuiteScaffold-Ebene, um dieselbe Objektinstanz für alle Elemente zu verwenden und rufen Sie die Funktion NavigationSuiteDefaults.itemColors() auf, um nur die Sie ändern möchten:

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

Navigationstypen anpassen

Durch das Standardverhalten von NavigationSuiteScaffold ändert sich die Navigations-UI basierend auf der Fenstergröße Klassen. Sie haben jedoch dieses Verhalten überschreiben. Wenn in Ihrer App beispielsweise ein einzelnes Content für einen Feed groß ist, könnte die App eine permanente Navigation Leiste für maximierte Fenster ein, verwendet aber weiterhin das Standardverhalten für Klassen für kompakte und mittlere Fenstergröße:

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

Weitere Informationen

Hier findest du die Material Design-Anleitung:

• Navigationsleiste
• Navigationsleiste
• Navigationsleiste

Sehen Sie sich die folgenden androidx.compose.material3-Bibliothekskomponenten an:

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer