Halaman ini diterjemahkan oleh Cloud Translation API.

Memigrasikan CoordinatorLayout ke Compose

CoordinatorLayout adalah ViewGroup yang memungkinkan tata letak yang kompleks, tumpang-tindih, dan bertingkat. Fungsi ini digunakan sebagai penampung untuk mengaktifkan interaksi Desain Material tertentu, seperti meluaskan/menciutkan toolbar dan sheet bawah, untuk Tampilan yang ada di dalamnya.

Di Compose, yang setara dengan CoordinatorLayout adalah Scaffold. Scaffold menyediakan slot konten untuk menggabungkan Komponen Material ke dalam pola dan interaksi layar umum. Halaman ini menjelaskan cara memigrasikan implementasi CoordinatorLayout untuk menggunakan Scaffold di Compose.

Langkah migrasi

Untuk memigrasikan CoordinatorLayout ke Scaffold, ikuti langkah berikut:

Dalam cuplikan di bawah, CoordinatorLayout berisi AppBarLayout untuk berisi ToolBar, ViewPager, dan FloatingActionButton. Jadikan CoordinatorLayout dan turunannya sebagai komentar dari hierarki UI Anda, lalu tambahkan ComposeView untuk menggantinya.

<!--  <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" />

Di Fragment atau Activity Anda, dapatkan referensi ke ComposeView yang baru saja Anda tambahkan dan panggil metode setContent di dalamnya. Di bagian isi metode, tetapkan Scaffold sebagai kontennya:
```
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}MigrationCommonScenariosSnippets.kt
```
Di konten Scaffold, tambahkan konten utama layar Anda di dalamnya. Karena konten utama dalam XML di atas adalah ViewPager2, kita akan menggunakan HorizontalPager, yang setara dengan Compose. Lambda content dari Scaffold juga menerima instance PaddingValues yang harus diterapkan ke root konten. Anda dapat menggunakan Modifier.padding untuk menerapkan PaddingValues yang sama ke HorizontalPager.
```
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}MigrationCommonScenariosSnippets.kt
```

Gunakan slot konten lain yang disediakan Scaffold untuk menambahkan lebih banyak elemen layar dan memigrasikan Tampilan turunan yang tersisa. Anda dapat menggunakan slot topBar untuk menambahkan TopAppBar, dan slot floatingActionButton untuk menyediakan 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

Kasus penggunaan umum

Menciutkan dan meluaskan toolbar

Dalam sistem View, untuk menciutkan dan meluaskan toolbar dengan CoordinatorLayout, Anda menggunakan AppBarLayout sebagai penampung untuk toolbar. Kemudian, Anda dapat menentukan Behavior hingga layout_behavior dalam XML pada Tampilan yang dapat di-scroll (seperti RecyclerView atau NestedScrollView) untuk mendeklarasikan cara toolbar diciutkan/diperluas saat Anda men-scroll.

Di Compose, Anda dapat mencapai efek serupa melalui TopAppBarScrollBehavior. Misalnya, untuk mengimplementasikan toolbar yang diciutkan/diperluas agar toolbar muncul saat Anda men-scroll ke atas, ikuti langkah-langkah berikut:

Panggil TopAppBarDefaults.enterAlwaysScrollBehavior() untuk membuat TopAppBarScrollBehavior.
Berikan TopAppBarScrollBehavior yang dibuat ke TopAppBar.

Hubungkan NestedScrollConnection melalui Modifier.nestedScroll pada Scaffold sehingga Scaffold dapat menerima peristiwa scroll bertingkat saat konten yang dapat di-scroll ke atas/bawah. Dengan cara ini, panel aplikasi yang ada dapat diciutkan/diperluas dengan tepat saat konten di-scroll.

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

Menyesuaikan efek scroll menciutkan/meluaskan

Anda dapat menyediakan beberapa parameter untuk enterAlwaysScrollBehavior guna menyesuaikan efek animasi menciutkan/meluaskan. TopAppBarDefaults juga menyediakan TopAppBarScrollBehavior lainnya seperti exitUntilCollapsedScrollBehavior, yang hanya meluaskan panel aplikasi saat konten di-scroll ke bawah.

Untuk membuat efek yang sepenuhnya kustom (misalnya, efek paralaks), Anda juga dapat membuat NestedScrollConnection sendiri dan melakukan offset toolbar secara manual saat konten di-scroll. Lihat Contoh scroll bertingkat di AOSP untuk mengetahui contoh kode.

Panel samping

Dengan View, Anda akan mengimplementasikan panel navigasi menggunakan DrawerLayout sebagai tampilan root. Selanjutnya, CoordinatorLayout Anda adalah tampilan turunan dari DrawerLayout. DrawerLayout juga berisi tampilan turunan lain, seperti NavigationView, untuk menampilkan opsi navigasi di panel samping.

Di Compose, Anda dapat menerapkan panel navigasi menggunakan composable ModalNavigationDrawer. ModalNavigationDrawer menawarkan slot drawerContent untuk panel samping dan slot content untuk konten layar.

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

Lihat Panel Samping untuk mempelajari lebih lanjut.

Snackbar

Scaffold menyediakan slot snackbarHost, yang dapat menerima composable SnackbarHost untuk menampilkan 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

Lihat Snackbar untuk mempelajari lebih lanjut.

Selengkapnya

Untuk informasi selengkapnya tentang memigrasikan CoordinatorLayout ke Compose, lihat referensi berikut:

Komponen Material dan tata letak: Dokumentasi tentang komponen Desain Material yang didukung di Compose, seperti Scaffold.
Memigrasikan Sunflower ke Jetpack Compose: Postingan blog yang mendokumentasikan perjalanan migrasi dari View ke Compose untuk aplikasi contoh Sunflower, yang berisi CoordinatorLayout.

Direkomendasikan untuk Anda

Catatan: teks link ditampilkan saat JavaScript nonaktif
Komponen Material dan tata letak
Inset jendela di Compose
Scroll