Esegui la migrazione di CoordinatorLayout in Compose

CoordinatorLayout è un ViewGroup che consente layout complessi, sovrapposti e nidificati. Viene utilizzato come contenitore per attivare interazioni specifiche di Material Design, come l'espansione/il collasso di barre degli strumenti e fogli inferiori, per le visualizzazioni contenute al suo interno.

In Compose, l'equivalente più vicino di un CoordinatorLayout è un Scaffold. Un Scaffold fornisce slot di contenuti per combinare i componenti Material in pattern e interazioni comuni dello schermo. Questa pagina descrive come eseguire la migrazione dell'implementazione di CoordinatorLayout per utilizzare Scaffold in Compose.

Passaggi per la migrazione

Per eseguire la migrazione di CoordinatorLayout a Scaffold, segui questi passaggi:

  1. Nello snippet riportato di seguito, CoordinatorLayout contiene un AppBarLayout per contenere un ToolBar, un ViewPager e un FloatingActionButton. Rimuovi il commento relativo a CoordinatorLayout e ai relativi elementi secondari dalla gerarchia della UI e aggiungi un ComposeView per sostituirlo.

    <!--  <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. Nel frammento o nell'attività, ottieni un riferimento a ComposeView che hai appena aggiunto e chiama il metodo setContent. Nel corpo del metodo, imposta un Scaffold come contenuto:

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

  3. Nel contenuto di Scaffold, aggiungi i contenuti principali dello schermo. Poiché i contenuti principali dell'XML riportato sopra sono un ViewPager2, utilizzeremo un HorizontalPager, che è l'equivalente di Compose. La lambda content di Scaffold riceve anche un'istanza di PaddingValues che deve essere applicata alla radice dei contenuti. Puoi utilizzare Modifier.padding per applicare lo stesso PaddingValues a HorizontalPager.

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

  4. Utilizza altri slot per i contenuti forniti da Scaffold per aggiungere altri elementi dello schermo e migrare le visualizzazioni secondarie rimanenti. Puoi utilizzare lo slot topBar per aggiungere un TopAppBar e lo slot floatingActionButton per fornire un 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 */ }
    }
}
    MigrationCommonScenariosSnippets.kt

Casi d'uso comuni

Comprimere ed espandere le barre degli strumenti

Nel sistema di visualizzazione, per comprimere ed espandere la barra degli strumenti con CoordinatorLayout, utilizzi un AppBarLayout come contenitore per la barra degli strumenti. Puoi quindi specificare un Behavior tramite layout_behavior in XML nella View scorrevole associata (ad esempio RecyclerView o NestedScrollView) per dichiarare in che modo la barra degli strumenti si comprime/espande durante lo scorrimento.

In Compose, puoi ottenere un effetto simile tramite un TopAppBarScrollBehavior. Ad esempio, per implementare una barra degli strumenti comprimibile/espandibile in modo che venga visualizzata quando scorri verso l'alto, segui questi passaggi:

  1. Chiama TopAppBarDefaults.enterAlwaysScrollBehavior() per creare un TopAppBarScrollBehavior.
  2. Fornisci l'TopAppBarScrollBehavior creato a TopAppBar.

  3. Collega NestedScrollConnection tramite Modifier.nestedScroll su Scaffold in modo che lo scaffold possa ricevere eventi di scorrimento nidificati man mano che i contenuti scorrevoli scorrono verso l'alto/il basso. In questo modo, la barra delle app contenuta può comprimersi/espandersi in modo appropriato durante lo scorrimento dei contenuti.

    // 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 */
    // ...
}
    MigrationCommonScenariosSnippets.kt

Personalizzare l'effetto di scorrimento di compressione/espansione

Puoi fornire diversi parametri per enterAlwaysScrollBehavior per personalizzare l'effetto di animazione di compressione/espansione. TopAppBarDefaults fornisce anche altre TopAppBarScrollBehavior come exitUntilCollapsedScrollBehavior, che espande la barra delle app solo quando i contenuti vengono scorri fino in fondo.

Per creare un effetto completamente personalizzato (ad esempio, un effetto parallasse), puoi anche creare il tuo NestedScrollConnection e compensare la barra degli strumenti manualmente man mano che i contenuti scorrono. Per un esempio di codice, consulta l'esempio di scorrimento nidificato su AOSP.

Cassettiere

Con Views, implementi un riquadro di navigazione utilizzando un DrawerLayout come visualizzazione principale. A sua volta, il tuo CoordinatorLayout è una visualizzazione secondaria di DrawerLayout. Il DrawerLayout contiene anche un'altra visualizzazione secondaria, ad esempio un NavigationView, per visualizzare le opzioni di navigazione nel riquadro.

In Compose, puoi implementare un riquadro di navigazione utilizzando il composable ModalNavigationDrawer. ModalNavigationDrawer offre uno slot drawerContent per il cassetto e uno slot content per i contenuti dello schermo.

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
        // ...
    }
}
MigrationCommonScenariosSnippets.kt

Per saperne di più, consulta Riquadri.

Snackbar

Scaffold fornisce uno slot snackbarHost, che può accettare un SnackbarHost componente per visualizzare 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
    // ...
}
MigrationCommonScenariosSnippets.kt

Per scoprire di più, consulta Barre di notifica.

Scopri di più

Per ulteriori informazioni sulla migrazione di un CoordinatorLayout a Compose, consulta le seguenti risorse: