Rezept für Material Supporting Pane

In diesem Rezept wird gezeigt, wie Sie mit SupportingPaneSceneStrategy aus der adaptiven Material 3-Bibliothek ein adaptives Layout mit einem Hauptbereich und einem unterstützenden Bereich erstellen. Dieses Layout eignet sich gut, um auf größeren Bildschirmen ergänzende Inhalte neben den Hauptinhalten zu präsentieren.

Funktionsweise

In diesem Beispiel gibt es drei Ziele: MainVideo, RelatedVideos und Profile.

SupportingPaneSceneStrategy

Die Logik für dieses adaptive Layout wird durch rememberSupportingPaneSceneStrategy bereitgestellt.

  • Bereichsrollen: Jeder Zielort wird mithilfe von Metadaten einer Rolle zugewiesen:

    • SupportingPaneSceneStrategy.mainPane(): Für den primären Inhalt. Dieser Bereich ist immer sichtbar.
    • SupportingPaneSceneStrategy.supportingPane(): Für die zusätzlichen Inhalte. Auf größeren Bildschirmen wird dieser Bereich neben dem Hauptbereich angezeigt.
    • SupportingPaneSceneStrategy.extraPane(): Für sekundäre Inhalte, die auf noch größeren Bildschirmen neben dem unterstützenden Bereich angezeigt werden können.

  • Adaptives Layout: Das Layout wird automatisch von SupportingPaneSceneStrategy angepasst. Auf kleineren Bildschirmen wird nur der Hauptbereich angezeigt. Auf größeren Bildschirmen wird der unterstützende Bereich neben dem Hauptbereich angezeigt.

  • Zurück-Navigation: Das BackNavigationBehavior wird in diesem Beispiel zu PopUntilCurrentDestinationChange angepasst. Wenn der Nutzer also auf die Schaltfläche „Zurück“ drückt, wird der unterstützende Bereich geschlossen und der darunter liegende Hauptbereich wird sichtbar.

  • Navigation: Die Navigation erfolgt durch Hinzufügen und Entfernen von Zielen aus dem Backstack. Die SupportingPaneSceneStrategy berücksichtigt diese Änderungen und passt das Layout entsprechend an.

package com.example.nav3recipes.material.supportingpane

/*
 * Copyright 2025 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
import androidx.compose.material3.adaptive.navigation.BackNavigationBehavior
import androidx.compose.material3.adaptive.navigation3.SupportingPaneSceneStrategy
import androidx.compose.material3.adaptive.navigation3.rememberSupportingPaneSceneStrategy
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.dropUnlessResumed
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay
import com.example.nav3recipes.content.ContentBlue
import com.example.nav3recipes.content.ContentGreen
import com.example.nav3recipes.content.ContentRed
import com.example.nav3recipes.ui.setEdgeToEdgeConfig
import kotlinx.serialization.Serializable

@Serializable
private object MainVideo : NavKey

@Serializable
private data object RelatedVideos : NavKey

@Serializable
private data object Profile : NavKey

class MaterialSupportingPaneActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        setEdgeToEdgeConfig()
        super.onCreate(savedInstanceState)

        setContent {

            val backStack = rememberNavBackStack(MainVideo)

            // Override the defaults so that there isn't a horizontal or vertical space between the panes.
            // See b/444438086
            val windowAdaptiveInfo = currentWindowAdaptiveInfoV2()
            val directive = remember(windowAdaptiveInfo) {
                calculatePaneScaffoldDirective(windowAdaptiveInfo)
                    .copy(horizontalPartitionSpacerSize = 0.dp, verticalPartitionSpacerSize = 0.dp)
            }

            // Override the defaults so that the supporting pane can be dismissed by pressing back.
            // See b/445826749
            val supportingPaneStrategy = rememberSupportingPaneSceneStrategy<NavKey>(
                backNavigationBehavior = BackNavigationBehavior.PopUntilCurrentDestinationChange,
                directive = directive
            )

            NavDisplay(
                backStack = backStack,
                onBack = { backStack.removeLastOrNull() },
                sceneStrategies = listOf(supportingPaneStrategy),
                entryProvider = entryProvider {
                    entry<MainVideo>(
                        metadata = SupportingPaneSceneStrategy.mainPane()
                    ) {
                        ContentRed("Video content") {
                            Button(onClick = dropUnlessResumed {
                                backStack.add(RelatedVideos)
                            }) {
                                Text("View related videos")
                            }
                        }
                    }
                    entry<RelatedVideos>(
                        metadata = SupportingPaneSceneStrategy.supportingPane()
                    ) {
                        ContentBlue("Related videos") {
                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                Button(onClick = dropUnlessResumed {
                                    backStack.add(Profile)
                                }) {
                                    Text("View profile")
                                }
                            }
                        }
                    }
                    entry<Profile>(
                        metadata = SupportingPaneSceneStrategy.extraPane()
                    ) {
                        ContentGreen("Profile")
                    }
                }
            )
        }
    }
}