CoordinatorLayout
es un ViewGroup
que permite diseños complejos, superpuestos y anidados. Se usa como contenedor para habilitar interacciones específicas de Material Design, como barras de herramientas que se expanden o se contraen, y hojas inferiores, para las vistas que contienen.
En Compose, el equivalente más cercano a un CoordinatorLayout
es un Scaffold
. Un Scaffold
proporciona espacios de contenido para combinar componentes de Material en interacciones y patrones de pantalla comunes. En esta página, se describe cómo migrar tu implementación de CoordinatorLayout
para usar Scaffold
en Compose.
Pasos de la migración
Para migrar CoordinatorLayout
a Scaffold
, sigue estos pasos:
En el siguiente fragmento,
CoordinatorLayout
contiene unAppBarLayout
que contiene unToolBar
, unViewPager
y unFloatingActionButton
. Marca como comentario elCoordinatorLayout
y sus elementos secundarios desde la jerarquía de la IU, y agrega unComposeView
para reemplazarlo.<!-- <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" />
En tu Fragment o Activity, obtén una referencia al
ComposeView
que acabas de agregar y llama al métodosetContent
en él. En el cuerpo del método, configura unScaffold
como su contenido:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
En el contenido de tu
Scaffold
, agrega el contenido principal de tu pantalla. Como el contenido principal del XML anterior es unViewPager2
, usaremos unHorizontalPager
, que es su equivalente de Compose. La lambdacontent
delScaffold
también recibe una instancia dePaddingValues
que debe aplicarse a la raíz de contenido. Puedes usarModifier.padding
para aplicar el mismoPaddingValues
aHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Usa otros espacios de contenido que proporciona
Scaffold
para agregar más elementos de pantalla y migrar las vistas secundarias restantes. Puedes usar el espaciotopBar
para agregar unTopAppBar
y el espaciofloatingActionButton
para proporcionar 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 */ } } }
Casos de uso comunes
Cómo contraer y expandir barras de herramientas
En el sistema de View, para contraer y expandir la barra de herramientas con CoordinatorLayout
, debes usar un AppBarLayout
como contenedor de la barra de herramientas. Luego, puedes especificar un objeto Behavior
mediante layout_behavior
en XML en la vista desplazable asociada (como RecyclerView
o NestedScrollView
) para declarar cómo se contrae o expande la barra de herramientas a medida que te desplazas.
En Compose, puedes lograr un efecto similar mediante un TopAppBarScrollBehavior
. Por ejemplo, para implementar una barra de herramientas que se contrae o expande de modo que aparezca cuando te desplazas hacia arriba, sigue estos pasos:
- Llama a
TopAppBarDefaults.enterAlwaysScrollBehavior()
para crear unTopAppBarScrollBehavior
. - Proporciona el
TopAppBarScrollBehavior
creado a laTopAppBar
. Conecta el
NestedScrollConnection
medianteModifier.nestedScroll
en el objetoScaffold
para que Scaffold pueda recibir eventos de desplazamiento anidados a medida que el contenido desplazable se desplaza hacia arriba o abajo. De esta manera, la barra de la app contenida puede contraerse o expandirse correctamente a medida que se desplaza el contenido.// 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 */ // ... }
Personalizar el efecto de desplazamiento que se contrae o se expande
Puedes proporcionar varios parámetros para enterAlwaysScrollBehavior
a fin de personalizar el efecto de animación de contracción o expansión. TopAppBarDefaults
también proporciona otros objetos TopAppBarScrollBehavior
, como exitUntilCollapsedScrollBehavior
, que solo expande la barra de la app cuando el contenido se desplaza hacia abajo.
Para crear un efecto completamente personalizado (por ejemplo, un efecto de paralaje), también puedes crear tu propio NestedScrollConnection
y desplazar la barra de herramientas de forma manual a medida que se desplaza el contenido. Consulta la muestra de desplazamiento anidado en AOSP para ver un ejemplo de código.
Paneles laterales
Con Views, puedes implementar un panel lateral de navegación utilizando un DrawerLayout
como vista raíz. A su vez, tu CoordinatorLayout
es una vista secundaria de DrawerLayout
. El objeto DrawerLayout
también contiene otra vista secundaria, como un objeto NavigationView
, para mostrar las opciones de navegación en el panel lateral.
En Compose, puedes implementar un panel lateral de navegación con el elemento componible ModalNavigationDrawer
. ModalNavigationDrawer
ofrece un espacio drawerContent
para el panel lateral y un espacio content
para el contenido de la pantalla.
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) Divider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
Consulta Paneles laterales para obtener más información.
Barras de notificaciones
Scaffold
proporciona un espacio snackbarHost
, que puede aceptar un elemento SnackbarHost
componible para mostrar 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 // ... }
Consulta Barras de notificaciones para obtener más información.
Más información
Si deseas obtener más información para migrar un CoordinatorLayout
a Compose, consulta los siguientes recursos:
- Componentes y diseños de Material: Documentación sobre los componentes de Material Design que son compatibles con Compose, como
Scaffold
. - Cómo migrar Sunflower a Jetpack Compose: Entrada de blog en la que se documenta el recorrido de migración de Views a Compose de la app de ejemplo de Sunflower, que contiene un
CoordinatorLayout
.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado.
- Componentes y diseños de Material
- Inserciones de ventana en Compose
- Desplazamiento