A CoordinatorLayout
é uma ViewGroup
que permite elementos complexos, sobrepostos
layouts aninhados. Ele é usado como um contêiner para ativar recursos específicos do Material Design
interações, como barras de ferramentas de expansão/recolhimento e páginas inferiores, para visualizações
contido nele.
No Compose, o equivalente mais próximo de uma CoordinatorLayout
é uma
Scaffold
. Um Scaffold
fornece slots de conteúdo para combinar o Material Design
Componentes em interações e padrões de tela comuns. Nesta página, descrevemos como
É possível migrar sua implementação de CoordinatorLayout
para usar Scaffold
em
Escrever.
Etapas da migração
Para migrar do CoordinatorLayout
para o Scaffold
, siga estas etapas:
No snippet abaixo,
CoordinatorLayout
contém umAppBarLayout
para contendo umToolBar
, umViewPager
e umFloatingActionButton
. Comentário aCoordinatorLayout
e as filhas dela da hierarquia da interface e adicione umaComposeView
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, acesse uma referência ao
ComposeView
que acabou de adicionar e chamar o métodosetContent
nela. No corpo do método, defina umScaffold
como o conteúdo dele:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
No conteúdo do
Scaffold
, adicione o conteúdo principal da tela em reimplantá-lo. Como o conteúdo principal no XML acima é umViewPager2
, vamos usar umaHorizontalPager
, que é o equivalente no Compose. A lambdacontent
doScaffold
também recebe uma instância dePaddingValues
que precisa ser aplicada à raiz do conteúdo. UseModifier.padding
para aplicar a mesmaPaddingValues
paraHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Usar outros espaços de conteúdo que o
Scaffold
fornece 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 para a barra de ferramentas. Em seguida, é possível especificar
Behavior
por layout_behavior
em XML no rolável associado
Visualização (como RecyclerView
ou NestedScrollView
) para declarar como a barra de ferramentas
é recolhido/expandido conforme você rola.
No Compose, é possível conseguir um efeito semelhante usando uma
TopAppBarScrollBehavior
Por exemplo, para implementar uma função de
para que a barra de ferramentas 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
viaModifier.nestedScroll
noScaffold
para que o Scaffold possa receber eventos de rolagem aninhados como o conteúdo rolável rola para cima/baixo. Dessa forma, a barra de apps contida pode se recolher/expandir adequadamente à medida que o conteúdo rolar.// 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/recolhimento/expansão
Você pode fornecer vários parâmetros para enterAlwaysScrollBehavior
para
personalizar o efeito da animação de recolhimento/expansão. TopAppBarDefaults
também
fornece outros TopAppBarScrollBehavior
, como
exitUntilCollapsedScrollBehavior
, que só abre a barra de apps quando
o conteúdo é rolado para baixo até o fim.
Para criar um efeito totalmente personalizado (por exemplo, um efeito paralaxe), você pode
crie seu próprio NestedScrollConnection
e desloque a barra de ferramentas manualmente como
o conteúdo rola. Confira o exemplo de rolagem aninhada no AOSP para uma
exemplo de código.
Gavetas
Com o Views, você implementa uma gaveta de navegação usando uma
DrawerLayout
como a visualização raiz. Por sua vez, o CoordinatorLayout
é um
visualização filha do DrawerLayout
. O DrawerLayout
também contém outro filho
visualização, como uma NavigationView
, para exibir as opções de navegação no
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.
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 SnackbarHost
.
combinável 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 // ... }
Acesse Snackbars para saber mais.
Saiba mais
Para mais informações sobre como migrar um CoordinatorLayout
para o Compose, consulte a
seguintes recursos:
- Componentes e layouts do Material Design: documentação sobre o Material Design.
componentes com suporte no Compose, como
Scaffold
. - Como migrar o app Sunflower para o Jetpack Compose: uma postagem do blog (em inglês)
documenta a jornada de migração de visualizações para o Compose no exemplo do app 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