Migrer CoordinatorLayout vers Compose

CoordinatorLayout est un ViewGroup qui permet de créer des mises en page complexes, superposées et imbriquées. Il est utilisé comme conteneur pour activer des interactions Material Design spécifiques, telles que le développement/la réduction des barres d'outils et des feuilles inférieures, pour les vues qu'il contient.

Dans Compose, l'équivalent le plus proche d'un CoordinatorLayout est un Scaffold. Un Scaffold fournit des emplacements de contenu pour combiner des composants Material et des interactions et modèles d'écran courants. Cette page explique comment migrer votre implémentation CoordinatorLayout pour utiliser Scaffold dans Compose.

Procédure de migration

Pour migrer CoordinatorLayout vers Scaffold, procédez comme suit :

  1. Dans l'extrait ci-dessous, le CoordinatorLayout contient un AppBarLayout pour contenir une ToolBar, un ViewPager et un FloatingActionButton. Commentez le CoordinatorLayout et ses enfants dans votre hiérarchie d'interface utilisateur, puis ajoutez un ComposeView pour le remplacer.

    <!--  <androidx.coordinatorlayout.widget.CoordinatorLayout-->
<!--      android:id="@+id/coordinator_layout"-->
<!--      android:layout_width="match_parent"-->
<!--      android:layout_height="match_parent"-->
<!--      android:fitsSystemWindows="true">-->

<!--    <androidx.compose.ui.platform.ComposeView-->
<!--        android:id="@+id/compose_view"-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="match_parent"-->
<!--        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->

<!--    <com.google.android.material.appbar.AppBarLayout-->
<!--        android:id="@+id/app_bar_layout"-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="wrap_content"-->
<!--        android:fitsSystemWindows="true"-->
<!--        android:theme="@style/Theme.Sunflower.AppBarOverlay">-->

    <!-- AppBarLayout contents here -->

<!--    </com.google.android.material.appbar.AppBarLayout>-->

<!--  </androidx.coordinatorlayout.widget.CoordinatorLayout>-->

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  2. Dans votre fragment ou activité, obtenez une référence au ComposeView que vous venez d'ajouter et appelez la méthode setContent sur celui-ci. Dans le corps de la méthode, définissez un Scaffold comme contenu :

    composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  3. Dans le contenu de votre Scaffold, ajoutez le contenu principal de votre écran. Étant donné que le contenu principal du code XML ci-dessus est un ViewPager2, nous allons utiliser un HorizontalPager, qui est l'équivalent Compose. Le lambda content du Scaffold reçoit également une instance de PaddingValues qui doit être appliquée à la racine du contenu. Vous pouvez utiliser Modifier.padding pour appliquer les mêmes PaddingValues au HorizontalPager.

    composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}
    MigrationCommonScenariosSnippets.kt

  4. Utilisez d'autres emplacements de contenu fournis par Scaffold pour ajouter d'autres éléments d'écran et migrer les vues enfants restantes. Vous pouvez utiliser l'emplacement topBar pour ajouter un TopAppBar et l'emplacement floatingActionButton pour fournir un FloatingActionButton.

    composeView.setContent {
    Scaffold(
        Modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = {
                    Text("My App")
                }
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /* Handle click */ }
            ) {
                Icon(
                    Icons.Filled.Add,
                    contentDescription = "Add Button"
                )
            }
        }
    ) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}
    MigrationCommonScenariosSnippets.kt

Cas d'utilisation courants

Réduire et développer les barres d'outils

Dans le système de vues, pour réduire et développer la barre d'outils avec CoordinatorLayout, vous utilisez un AppBarLayout comme conteneur pour la barre d'outils. Vous pouvez ensuite spécifier un Behavior via layout_behavior dans le code XML sur la vue à faire défiler associée (comme RecyclerView ou NestedScrollView) pour déclarer comment la barre d'outils se réduit/se développe lorsque vous faites défiler.

Dans Compose, vous pouvez obtenir un effet similaire via un TopAppBarScrollBehavior. Par exemple, pour implémenter une barre d'outils qui se réduit/se développe afin qu'elle s'affiche lorsque vous faites défiler vers le haut, procédez comme suit :

  1. Appelez TopAppBarDefaults.enterAlwaysScrollBehavior() pour créer un TopAppBarScrollBehavior.
  2. Fournissez le TopAppBarScrollBehavior créé au TopAppBar.

  3. Connectez le NestedScrollConnection via Modifier.nestedScroll sur le Scaffold afin que le Scaffold puisse recevoir des événements de défilement imbriqués lorsque le contenu à faire défiler défile vers le haut ou vers le bas. De cette façon, la barre d'application contenue peut se réduire/se développer de manière appropriée lorsque le contenu défile.

    // 1. Create the TopAppBarScrollBehavior
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text("My App")
            },
            // 2. Provide scrollBehavior to TopAppBar
            scrollBehavior = scrollBehavior
        )
    },
    // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(scrollBehavior.nestedScrollConnection)
) { contentPadding ->
    /* Contents */
    // ...
}
    MigrationCommonScenariosSnippets.kt

Personnaliser l'effet de défilement qui se réduit/se développe

Vous pouvez fournir plusieurs paramètres pour enterAlwaysScrollBehavior afin de personnaliser l'effet d'animation qui se réduit/se développe. TopAppBarDefaults fournit également d'autres TopAppBarScrollBehavior tels que exitUntilCollapsedScrollBehavior, qui ne développe la barre d'application que lorsque le contenu est fait défiler jusqu'en bas.

Pour créer un effet entièrement personnalisé (par exemple, un effet de parallaxe), vous pouvez également créer votre propre NestedScrollConnection et décaler manuellement la barre d'outils lorsque le contenu défile. Consultez l'exemple de défilement imbriqué sur AOSP pour obtenir un exemple de code.

Panneaux

Avec les vues, vous implémentez un panneau de navigation à l'aide d'un DrawerLayout comme vue racine. Votre CoordinatorLayout est alors une vue enfant du DrawerLayout. Le DrawerLayout contient également une autre vue enfant, telle qu'un NavigationView, pour afficher les options de navigation dans le panneau.

Dans Compose, vous pouvez implémenter un panneau de navigation à l'aide du ModalNavigationDrawer composable. ModalNavigationDrawer propose un emplacement drawerContent pour le panneau et un emplacement content pour le contenu de l'écran.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold content
        // ...
    }
}
MigrationCommonScenariosSnippets.kt

Pour en savoir plus, consultez Panneaux.

Snackbars

Scaffold fournit un emplacement snackbarHost, qui peut accepter un composable SnackbarHost pour afficher un Snackbar.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
    // ...
}
MigrationCommonScenariosSnippets.kt

Pour en savoir plus, consultez Snackbars.

En savoir plus

Pour en savoir plus sur la migration d'un CoordinatorLayout vers Compose, consultez les ressources suivantes :