Recette du volet secondaire Material

Cette recette montre comment créer une mise en page adaptative avec un volet principal et un volet secondaire à l'aide de SupportingPaneSceneStrategy de la bibliothèque Material 3 Adaptive. Cette mise en page est utile pour afficher du contenu supplémentaire à côté du contenu principal sur les grands écrans.

Fonctionnement

Cet exemple comporte trois destinations : MainVideo, RelatedVideos et Profile.

SupportingPaneSceneStrategy

rememberSupportingPaneSceneStrategy fournit la logique de cette mise en page adaptative.

  • Rôles des volets : un rôle est attribué à chaque destination à l'aide de métadonnées :

    • SupportingPaneSceneStrategy.mainPane() : pour le contenu principal. Ce volet est toujours visible.
    • SupportingPaneSceneStrategy.supportingPane() : pour le contenu supplémentaire. Ce volet s'affiche à côté du volet principal sur les grands écrans.
    • SupportingPaneSceneStrategy.extraPane() : pour le contenu tertiaire qui peut être affiché à côté du volet d'assistance sur les écrans encore plus grands.

  • Mise en page adaptative : SupportingPaneSceneStrategy gère automatiquement la mise en page. Sur les petits écrans, seul le volet principal s'affiche. Sur les grands écrans, le volet d'assistance s'affiche à côté du volet principal.

  • Navigation arrière : BackNavigationBehavior est personnalisé dans cet exemple sur PopUntilCurrentDestinationChange. Cela signifie que lorsque l'utilisateur appuie sur le bouton "Retour", le volet d'assistance est fermé, ce qui révèle le volet principal en dessous.

  • Navigation : la navigation est gérée en ajoutant et en supprimant des destinations de la pile "Retour". SupportingPaneSceneStrategy observe ces modifications et ajuste la mise en page en conséquence.

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")
                    }
                }
            )
        }
    }
}