CoordinatorLayout
é um ViewGroup
que permite layouts complexos, sobrepostos e
aninhados. Ele é usado como um contêiner para permitir interações específicas do
Material Design, como expandir/recolher barras de ferramentas e páginas inferiores, para visualizações
contidas nele.
No Compose, o equivalente mais próximo de um 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
você pode migrar sua implementação de CoordinatorLayout
para usar Scaffold
no
Compose.
Etapas da migração
Para migrar o CoordinatorLayout
para o Scaffold
, siga estas etapas:
No snippet abaixo, a
CoordinatorLayout
contém umAppBarLayout
para conter umToolBar
, umViewPager
e umFloatingActionButton
. Adicione um comentário aCoordinatorLayout
e aos filhos dela na hierarquia da interface e adicione umComposeView
para substituí-lo.<!-- <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, receba uma referência ao
ComposeView
que você acabou de adicionar e chame o métodosetContent
nele. No corpo do método, defina umScaffold
como conteúdo:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
No conteúdo do
Scaffold
, adicione o conteúdo principal da tela nele. Como o conteúdo principal no XML acima é umViewPager2
, vamos usar 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 que o
Scaffold
oferece para adicionar mais elementos de tela e migrar as visualizações filhas restantes. Você pode 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 um contêiner para a barra de ferramentas. Em seguida, especifique um
Behavior
usando layout_behavior
em XML na visualização rolável
associada (como RecyclerView
ou NestedScrollView
) para declarar como a barra de ferramentas
se recolhe/expande conforme você rola a tela.
No Compose, é possível conseguir um efeito semelhante usando uma
TopAppBarScrollBehavior
. Por exemplo, para implementar uma barra de ferramentas de recolhimento/expansão para que ela apareça quando você rolar para cima, siga estas etapas:
- Chame
TopAppBarDefaults.enterAlwaysScrollBehavior()
para criar umTopAppBarScrollBehavior
. - Forneça o
TopAppBarScrollBehavior
criado aoTopAppBar
. Conecte o
NestedScrollConnection
porModifier.nestedScroll
noScaffold
para que o Scaffold possa receber eventos de rolagem aninhados conforme o conteúdo rolável rola para cima/para baixo. Dessa forma, a barra de apps contida pode se recolher/expandir adequadamente à medida que o conteúdo rola.// 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 de retração/expansão
Você pode fornecer vários parâmetros para enterAlwaysScrollBehavior
personalizar o efeito da animação de recolhimento/expansão. TopAppBarDefaults
também
oferece outros TopAppBarScrollBehavior
, como
exitUntilCollapsedScrollBehavior
, que só expande a barra de apps quando
o conteúdo é rolado até o fim.
Para criar um efeito totalmente personalizado (por exemplo, um efeito de paralaxe), você também
pode criar seu próprio NestedScrollConnection
e compensar a barra de ferramentas manualmente à medida que
o conteúdo rola. Consulte o exemplo de rolagem aninhada no AOSP para
conferir um exemplo de código.
Gavetas
Com as visualizações, você implementa uma gaveta de navegação usando uma
DrawerLayout
como a visualização raiz. Por sua vez, a CoordinatorLayout
é uma
visualização filha do DrawerLayout
. O DrawerLayout
também contém outra visualização
filha, como um NavigationView
, para mostrar as opções de navegação na
gaveta.
No Compose, é possível implementar uma gaveta de navegação usando o elemento combinável
ModalNavigationDrawer
. 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)) HorizontalDivider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
Consulte Drawers 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 um CoordinatorLayout
para o Compose, consulte os
recursos a seguir:
- Componentes e layouts do Material Design: documentação sobre componentes do
Material Design com suporte ao Compose, como
Scaffold
. - Como migrar o Sunflower para o Jetpack Compose: uma postagem de blog que
documenta a jornada de migração de 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