CoordinatorLayout
est un ViewGroup
qui permet 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/l'effondrement 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 dans des modèles et des interactions 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 :
Dans l'extrait ci-dessous,
CoordinatorLayout
contient unAppBarLayout
pour contenir unToolBar
, unViewPager
et unFloatingActionButton
. Mettez en commentaireCoordinatorLayout
et ses enfants dans votre hiérarchie d'UI, puis ajoutez unComposeView
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" />
Dans votre fragment ou activité, obtenez une référence à l'
ComposeView
que vous venez d'ajouter et appelez la méthodesetContent
sur celle-ci. Dans le corps de la méthode, définissez unScaffold
comme contenu :composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Dans le contenu de votre
Scaffold
, ajoutez le contenu principal de votre écran. Comme le contenu principal du fichier XML ci-dessus est unViewPager2
, nous allons utiliser unHorizontalPager
, qui est l'équivalent Compose. L'expression lambdacontent
deScaffold
reçoit également une instance dePaddingValues
qui doit être appliquée à la racine du contenu. Vous pouvez utiliserModifier.padding
pour appliquer le mêmePaddingValues
àHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
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'emplacementtopBar
pour ajouter unTopAppBar
et l'emplacementfloatingActionButton
pour fournir unFloatingActionButton
.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 */ } } }
Cas d'utilisation courants
Réduire et développer les barres d'outils
Dans le système View, 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 fichier XML sur la vue défilable 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 l'écran.
Dans Compose, vous pouvez obtenir un effet similaire grâce à un TopAppBarScrollBehavior
. Par exemple, pour implémenter une barre d'outils réductible/extensible afin qu'elle s'affiche lorsque vous faites défiler l'écran vers le haut, procédez comme suit :
- Appelez
TopAppBarDefaults.enterAlwaysScrollBehavior()
pour créer unTopAppBarScrollBehavior
. - Fournissez le
TopAppBarScrollBehavior
créé auTopAppBar
. Connectez
NestedScrollConnection
viaModifier.nestedScroll
surScaffold
afin que Scaffold puisse recevoir des événements de défilement imbriqués lorsque le contenu défilable défile vers le haut ou vers le bas. De cette façon, la barre d'application contenue peut se réduire/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 */ // ... }
Personnaliser l'effet de défilement réductible/extensible
Vous pouvez fournir plusieurs paramètres pour enterAlwaysScrollBehavior
afin de personnaliser l'effet d'animation de réduction/développement. TopAppBarDefaults
fournit également d'autres TopAppBarScrollBehavior
, comme exitUntilCollapsedScrollBehavior
, qui ne développe la barre d'application que lorsque le contenu est entièrement défilé vers le 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 au fur et à mesure du défilement du contenu. Pour obtenir un exemple de code, consultez l'exemple de défilement imbriqué sur AOSP.
Panneaux
Avec Views, vous implémentez un panneau de navigation en utilisant un DrawerLayout
comme vue racine. Votre CoordinatorLayout
est donc une vue enfant de DrawerLayout
. Le DrawerLayout
contient également une autre vue enfant, telle qu'un NavigationView
, pour afficher les options de navigation dans le tiroir.
Dans Compose, vous pouvez implémenter un panneau de navigation à l'aide du composable ModalNavigationDrawer
. ModalNavigationDrawer
propose un emplacement drawerContent
pour le tiroir 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 // ... } }
Pour en savoir plus, consultez Drawers.
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 // ... }
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 :
- Composants et mises en page Material : documentation sur les composants Material Design compatibles avec Compose, comme
Scaffold
. - Migrer Sunflower vers Jetpack Compose : article de blog qui documente le parcours de migration des vues vers Compose de l'application exemple Sunflower, qui contient un
CoordinatorLayout
.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Composants et mises en page Material
- Encarts de fenêtre dans Compose
- Défilement