CoordinatorLayout
é um ViewGroup
que permite layouts complexos, sobrepostos e
aninhados. Ele é usado como um contêiner para ativar interações específicas do Material Design, como barras de ferramentas de expansão/recolhimento e páginas inferiores, para visualizações
contidas dentro dele.
No Compose, o equivalente mais próximo de uma CoordinatorLayout
é um
Scaffold
. Um Scaffold
fornece slots de conteúdo para combinar componentes
do Material Design em padrões e interações de tela comuns. Esta página descreve como
migrar a implementação de CoordinatorLayout
para usar o Scaffold
no
Compose.
Etapas da migração
Para migrar CoordinatorLayout
para Scaffold
, siga estas etapas:
No snippet abaixo, o
CoordinatorLayout
contém umAppBarLayout
para conter umToolBar
, umViewPager
e umFloatingActionButton
. Comente aCoordinatorLayout
e os filhos dela da hierarquia da interface e adicione umaComposeView
para substituí-la.<!-- <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" />
No fragmento ou na atividade, acesse uma referência ao
ComposeView
que você acabou de adicionar e chame o métodosetContent
. No corpo do método, defina umScaffold
como o conteúdo:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Adicione o conteúdo principal da tela no conteúdo da
Scaffold
. Como o conteúdo principal no XML acima é umViewPager2
, usaremos umHorizontalPager
, que é o equivalente do Compose. A lambdacontent
doScaffold
também recebe uma instância dePaddingValues
que precisa ser aplicada à raiz do conteúdo. Você pode usarModifier.padding
para aplicar o mesmoPaddingValues
aoHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Use outros slots de conteúdo fornecidos pelo
Scaffold
para adicionar mais elementos de tela e migrar as visualizações filhas restantes. É possível usar o slottopBar
para adicionar umTopAppBar
e o slotfloatingActionButton
para fornecer umFloatingActionButton
.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 comuns
Recolher e expandir barras de ferramentas
No sistema de visualização, para recolher e expandir a barra de ferramentas com CoordinatorLayout
,
use um AppBarLayout
como contêiner. Em seguida, você pode especificar uma
Behavior
a layout_behavior
em XML na visualização rolável
associada (como RecyclerView
ou NestedScrollView
) para declarar como a barra de ferramentas
é recolhida/expandida à medida que você rola a tela.
No Compose, é possível conseguir um efeito semelhante usando um
TopAppBarScrollBehavior
. Por exemplo, para implementar uma barra de ferramentas de
recolhimento/expansão para que ela apareça quando você rola para cima, siga estas etapas:
- Chame
TopAppBarDefaults.enterAlwaysScrollBehavior()
para criar umTopAppBarScrollBehavior
. - Forneça o
TopAppBarScrollBehavior
criado aoTopAppBar
. Conecte o
NestedScrollConnection
viaModifier.nestedScroll
noScaffold
para que o Scaffold possa receber eventos de rolagem aninhados à medida que o conteúdo rolável rola para cima/para baixo. Dessa forma, a barra de apps contida pode ser recolhida/expandida corretamente à medida que o conteúdo rola a tela.// 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 o efeito de rolagem recolher/expandir
Você pode fornecer vários parâmetros ao enterAlwaysScrollBehavior
para
personalizar o efeito da animação de recolhimento/expansão. O TopAppBarDefaults
também
fornece outros TopAppBarScrollBehavior
, como
exitUntilCollapsedScrollBehavior
, que só expandem a barra de apps quando
o conteúdo é rolado para baixo totalmente.
Para criar um efeito totalmente personalizado (por exemplo, um efeito paralaxe), você também pode
criar seu próprio NestedScrollConnection
e deslocar a barra de ferramentas manualmente à medida que
o conteúdo é rolado. Consulte o exemplo de rolagem aninhada no AOSP para ver um
exemplo de código.
Gavetas
Com as visualizações, você implementa uma gaveta de navegação usando uma
DrawerLayout
como visualização raiz. O CoordinatorLayout
, por sua vez, é uma
visualização filha do DrawerLayout
. O DrawerLayout
também contém outra visualização
filha, por exemplo, uma NavigationView
, para mostrar as opções de navegação na
gaveta.
No Compose, é possível implementar uma gaveta de navegação usando o
elemento ModalNavigationDrawer
combinável. O ModalNavigationDrawer
oferece um
slot drawerContent
para a gaveta e um slot content
para o conteúdo
da tela.
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 // ... } }
Consulte Gavetas para saber mais.
Snackbars
Scaffold
fornece um slot snackbarHost
, que pode aceitar um elemento combinável SnackbarHost
para mostrar um 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 // ... }
Consulte Snackbars para saber mais.
Saiba mais
Para mais informações sobre como migrar uma CoordinatorLayout
para o Compose, consulte os
recursos abaixo:
- Componentes e layouts do Material Design: documentação sobre componentes
do Material Design com suporte no Compose, como
Scaffold
. - Migração do app Sunflower para o Jetpack Compose (em inglês): uma postagem do blog que
registra a jornada de migração das visualizações para o Compose do app de exemplo
Sunflower, que contém um
CoordinatorLayout
.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Componentes e layouts do Material Design
- Encartes de janela no Compose
- Rolagem