Layout mit unterstützendem Bereich erstellen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Das Layout des Infobereichs hält die Aufmerksamkeit der Nutzer auf den Hauptinhalt der App gerichtet und zeigt gleichzeitig relevante ergänzende Informationen an. Im Hauptbereich können beispielsweise Details zu einem Film angezeigt werden, während im sekundären Bereich ähnliche Filme, Filme desselben Regisseurs oder Werke mit denselben Schauspielern aufgeführt werden.

Weitere Informationen finden Sie in den Richtlinien für den Infobereich zu Material 3.

Ein unterstützender Bereich mit NavigableSupportingPaneScaffold implementieren

NavigableSupportingPaneScaffold ist ein Compose-Element, mit dem sich ein unterstützendes Steuerfeld-Layout in Jetpack Compose einfacher implementieren lässt. Es umschließt SupportingPaneScaffold und fügt eine integrierte Navigation und eine vorausschauende Rückwärtsverarbeitung hinzu.

Ein unterstützendes Bereichs-Scaffolding unterstützt bis zu drei Bereiche:

• Hauptbalken: Hier werden die Hauptinhalte angezeigt.
• Unterstützender Bereich: Bietet zusätzlichen Kontext oder Tools im Zusammenhang mit dem Hauptbereich.
• Zusätzlicher Bereich (optional): Wird bei Bedarf für ergänzende Inhalte verwendet.

Das Scaffold passt sich an die Fenstergröße an:

• In großen Fenstern werden die Haupt- und die unterstützenden Bereiche nebeneinander angezeigt.

• In kleinen Fenstern ist immer nur ein Bereich sichtbar, der je nach Nutzerinteraktion wechselt.

  

Abhängigkeiten hinzufügen

NavigableSupportingPaneScaffold ist Teil der Material 3-Bibliothek für adaptive Layouts.

Fügen Sie der build.gradle-Datei Ihrer App oder Ihres Moduls die folgenden drei zugehörigen Abhängigkeiten hinzu:

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

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

• Adaptive: Niedrige Bausteine wie HingeInfo und Posture
• adaptive-layout: Adaptive Layouts wie ListDetailPaneScaffold und SupportingPaneScaffold
• adaptive-navigation: Composeables für die Navigation innerhalb und zwischen Ansichten sowie adaptive Layouts, die die Navigation standardmäßig unterstützen, z. B. NavigableListDetailPaneScaffold und NavigableSupportingPaneScaffold

Ihr Projekt muss compose-material3-adaptive Version 1.1.0-beta1 oder höher enthalten.

Intelligente „Zurück“-Touch-Geste aktivieren

Wenn Sie die Animationen für die intelligente „Zurück“-Touch-Geste unter Android 15 oder niedriger aktivieren möchten, müssen Sie die Unterstützung für die Geste aktivieren. Wenn Sie die Funktion aktivieren möchten, fügen Sie der Datei AndroidManifest.xml das Tag android:enableOnBackInvokedCallback="true" zum <application>-Tag oder das Tag android:enableOnBackInvokedCallback="true" zum <application>-Tag oder einzelne <activity>-Tags hinzu.

Sobald Ihre App auf Android 16 (API-Level 36) oder höher ausgerichtet ist, ist die Vorhersagefunktion für die Navigation rückwärts standardmäßig aktiviert.

Navigationsleiste erstellen

In kleinen Fenstern wird immer nur ein Bereich angezeigt. Verwenden Sie die Taste ThreePaneScaffoldNavigator, um zwischen den Bereichen zu wechseln. Erstellen Sie mit rememberSupportingPaneScaffoldNavigator eine Instanz des Navigationsmenüs.

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()
SampleSupportingPaneScaffold.kt

Navigator an das Scaffold übergeben

Das Scaffold benötigt eine ThreePaneScaffoldNavigator, eine Benutzeroberfläche, die den Status des Scaffolds, die ThreePaneScaffoldValue und eine PaneScaffoldDirective darstellt.

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

Der Hauptbereich und der unterstützende Bereich sind Composeables, die Ihre Inhalte enthalten. Verwenden Sie AnimatedPane, um die Standard-Fensteranimationseffekte während der Navigation anzuwenden. Verwenden Sie den Scaffold-Wert, um zu prüfen, ob der unterstützende Bereich ausgeblendet ist. Falls ja, zeigen Sie eine Schaltfläche an, die navigateTo(SupportingPaneScaffoldRole.Supporting) aufruft, um den unterstützenden Bereich einzublenden.

Hier ist eine vollständige Implementierung des Scaffolds:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        AnimatedPane(
            modifier = Modifier
                .safeContentPadding()
                .background(Color.Red)
        ) {
            if (scaffoldNavigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier
                        .wrapContentSize(),
                    onClick = {
                        scope.launch {
                            scaffoldNavigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                        }
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            Text("Supporting pane")
        }
    }
)
SampleSupportingPaneScaffold.kt

Bereich „Kompositelemente“ extrahieren

Extrahieren Sie die einzelnen Bereiche einer SupportingPaneScaffold in eigene Kompositionen, um sie wiederverwendbar und testbar zu machen. Verwenden Sie ThreePaneScaffoldScope, um auf AnimatedPane zuzugreifen, wenn Sie die Standardanimationen verwenden möchten:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(
        modifier = modifier.safeContentPadding()
    ) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}
SampleSupportingPaneScaffold.kt

Wenn Sie die Bereiche in Composeables extrahieren, wird die Verwendung des SupportingPaneScaffold vereinfacht. Vergleichen Sie dazu die folgende Abbildung mit der vollständigen Implementierung des Scaffolds im vorherigen Abschnitt:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

Wenn Sie mehr Kontrolle über bestimmte Aspekte des Scaffolds benötigen, sollten Sie stattdessen SupportingPaneScaffold anstelle von NavigableSupportingPaneScaffold verwenden. Es werden PaneScaffoldDirective und ThreePaneScaffoldValue oder ThreePaneScaffoldState separat akzeptiert. So können Sie benutzerdefinierte Logik für den Bereichsabstand implementieren und festlegen, wie viele Bereiche gleichzeitig angezeigt werden sollen. Sie können die Unterstützung für die Vorhersage von Rückwärtsgängen auch aktivieren, indem Sie ThreePaneScaffoldPredictiveBackHandler hinzufügen.

ThreePaneScaffoldPredictiveBackHandler hinzufügen

Hängen Sie den vorausschauenden Handler für die Schaltfläche „Zurück“ an, der eine Navigations-Instanz des Scaffolds annimmt, und geben Sie den backBehavior an. Damit wird festgelegt, wie Ziele beim Zurückspringen aus dem Backstack entfernt werden. Übergeben Sie dann scaffoldDirective und scaffoldState an SupportingPaneScaffold. Verwenden Sie die Überladung, die einen ThreePaneScaffoldState akzeptiert, und geben Sie scaffoldNavigator.scaffoldState ein.

Definieren Sie den Haupt- und den unterstützenden Bereich innerhalb von SupportingPaneScaffold. Verwenden Sie AnimatedPane für die Standardanimationen von Bereichen.

Nach diesen Schritten sollte Ihr Code in etwa so aussehen:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

ThreePaneScaffoldPredictiveBackHandler(
    navigator = scaffoldNavigator,
    backBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt