Migrar o CoordinatorLayout para o Compose

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 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:

  1. No snippet abaixo, CoordinatorLayout contém um AppBarLayout para contendo um ToolBar, um ViewPager e um FloatingActionButton. Comentário a CoordinatorLayout e as filhas dela da hierarquia da interface e adicione uma ComposeView 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" />
    
  2. No fragmento ou na atividade, obtenha uma referência ao ComposeView que você acabou de adicionar e chame o método setContent nele. No corpo do método, defina um Scaffold como conteúdo:

    composeView.setContent {
        Scaffold(Modifier.fillMaxSize()) { contentPadding ->
            // Scaffold contents
            // ...
        }
    }

  3. No conteúdo do Scaffold, adicione o conteúdo principal da tela em reimplantá-lo. Como o conteúdo principal no XML acima é um ViewPager2, vamos usar uma HorizontalPager, que é o equivalente no Compose. A lambda content do Scaffold também recebe uma instância de PaddingValues que precisa ser aplicada à raiz do conteúdo. Você pode usar Modifier.padding para aplicar o mesmo PaddingValues ao HorizontalPager.

    composeView.setContent {
        Scaffold(Modifier.fillMaxSize()) { contentPadding ->
            val pagerState = rememberPagerState {
                10
            }
            HorizontalPager(
                state = pagerState,
                modifier = Modifier.padding(contentPadding)
            ) { /* Page contents */ }
        }
    }

  4. Use outros slots de conteúdo que o Scaffold oferece para adicionar mais elementos de tela e migrar as visualizações filhas restantes. É possível usar o slot topBar para adicionar um TopAppBar e o slot floatingActionButton para fornecer um FloatingActionButton.

    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, é 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 um TopAppBarScrollBehavior. Por exemplo, para implementar uma barra de ferramentas recolhível/expandida para que ela apareça quando você rolar para cima, siga estas etapas:

  1. Chame TopAppBarDefaults.enterAlwaysScrollBehavior() para criar um TopAppBarScrollBehavior.
  2. Forneça o TopAppBarScrollBehavior criado ao TopAppBar.
  3. Conecte o NestedScrollConnection por Modifier.nestedScroll no Scaffold 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 ser recolhida/expandida adequadamente conforme 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

É possível fornecer vários parâmetros para enterAlwaysScrollBehavior para personalizar o efeito de animação de retração/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. 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 é uma 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))
            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 a seguintes recursos: