Esegui la migrazione di CoordinatorLayout in Compose

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

In Compose, l'equivalente più vicino a un CoordinatorLayout è un Scaffold. Un Scaffold fornisce spazi per i 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.

Passi per la migrazione

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

  1. Nello snippet di seguito, CoordinatorLayout contiene un AppBarLayout per contenere un ToolBar, un ViewPager e un FloatingActionButton. Commenta CoordinatorLayout e i relativi elementi secondari dalla gerarchia della UI e aggiungi un ComposeView per sostituirli.

    ```xml 

    <!-- AppBarLayout contents here -->

    ```

  2. Nel frammento o nell'attività, ottieni un riferimento all'oggetto 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
        // ...
    }
}

  3. Nei contenuti di Scaffold, aggiungi i contenuti principali della schermata. Poiché i contenuti principali nell'XML riportato sopra sono un ViewPager2, utilizzeremo un HorizontalPager, che è l'equivalente di Compose. La funzione 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 */ }
    }
}

  4. Utilizza altri slot di contenuti forniti da Scaffold per aggiungere altri elementi dello schermo ed eseguire la migrazione delle viste bambino 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 */ }
    }
}

Casi d'uso comuni

Comprimi ed espandi 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 (come 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 il TopAppBarScrollBehavior creato al TopAppBar.

  3. Collega NestedScrollConnection tramite Modifier.nestedScroll su Scaffold in modo che Scaffold possa ricevere eventi di scorrimento nidificati mentre i contenuti scorrevoli scorrono verso l'alto/il basso. In questo modo, la barra dell'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 */
    // ...
}

Personalizza 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 altri TopAppBarScrollBehavior, come exitUntilCollapsedScrollBehavior, che espande la barra dell'app solo quando i contenuti vengono scorsi fino in fondo.

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

Cassettiere

Con le visualizzazioni, implementi un riquadro di navigazione a scomparsa utilizzando un DrawerLayout come visualizzazione principale. A sua volta, CoordinatorLayout è una vista bambino di DrawerLayout. DrawerLayout contiene anche un'altra vista secondaria, ad esempio NavigationView, per visualizzare le opzioni di navigazione nel riquadro a scomparsa.

In Compose, puoi implementare un riquadro di navigazione a scomparsa utilizzando il componibile ModalNavigationDrawer. ModalNavigationDrawer offre uno slot drawerContent per il riquadro a scomparsa 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
        // ...
    }
}

Per saperne di più, consulta Cassetti.

Snackbar

Scaffold fornisce uno slot snackbarHost, che può accettare un componibile SnackbarHost 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
    // ...
}

Per saperne di più, consulta Snackbar.

Scopri di più

Per saperne di più sulla migrazione di un CoordinatorLayout a Compose, consulta le seguenti risorse: