CoordinatorLayout
adalah ViewGroup
yang memungkinkan tata letak yang kompleks, tumpang-tindih, dan
bertingkat. View ini digunakan sebagai penampung untuk mengaktifkan interaksi
Desain Material tertentu, seperti meluaskan/menyempitkan toolbar dan sheet bawah, untuk View
yang terdapat di dalamnya.
Di Compose, yang setara dengan CoordinatorLayout
adalah
Scaffold
. Scaffold
menyediakan slot konten untuk menggabungkan Komponen
Material ke dalam pola dan interaksi layar yang umum. Halaman ini menjelaskan cara
memigrasikan implementasi CoordinatorLayout
untuk menggunakan Scaffold
di
Compose.
Langkah migrasi
Untuk memigrasikan CoordinatorLayout
ke Scaffold
, ikuti langkah-langkah berikut:
Dalam cuplikan di bawah,
CoordinatorLayout
berisiAppBarLayout
untuk berisiToolBar
,ViewPager
, danFloatingActionButton
. Beri komentar padaCoordinatorLayout
dan turunannya dari hierarki UI Anda, lalu tambahkanComposeView
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 Fragmen atau Aktivitas, dapatkan referensi ke
ComposeView
yang baru saja Anda tambahkan dan panggil metodesetContent
di dalamnya. Dalam isi metode, tetapkanScaffold
sebagai kontennya:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Dalam konten
Scaffold
, tambahkan konten utama layar dalam konten tersebut. Karena konten utama dalam XML di atas adalahViewPager2
, kita akan menggunakanHorizontalPager
, yang merupakan Compose yang setara. Lambdacontent
dariScaffold
juga menerima instancePaddingValues
yang harus diterapkan ke root konten. Anda dapat menggunakanModifier.padding
untuk menerapkanPaddingValues
yang sama keHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Gunakan slot konten lain yang disediakan
Scaffold
untuk menambahkan lebih banyak elemen layar dan memigrasikan View turunan yang tersisa. Anda dapat menggunakan slottopBar
untuk menambahkanTopAppBar
, dan slotfloatingActionButton
untuk memberikanFloatingActionButton
.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 */ } } }
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
melalui layout_behavior
dalam XML pada View
yang dapat di-scroll terkait (seperti RecyclerView
atau NestedScrollView
) untuk mendeklarasikan cara toolbar
ditutup/diperluas saat Anda men-scroll.
Di Compose, Anda dapat memperoleh efek yang serupa melalui
TopAppBarScrollBehavior
. Misalnya, untuk menerapkan toolbar yang diciutkan/diperluas
sehingga toolbar muncul saat Anda men-scroll ke atas, ikuti langkah-langkah berikut:
- Panggil
TopAppBarDefaults.enterAlwaysScrollBehavior()
untuk membuatTopAppBarScrollBehavior
. - Berikan
TopAppBarScrollBehavior
yang dibuat keTopAppBar
. Hubungkan
NestedScrollConnection
melaluiModifier.nestedScroll
diScaffold
sehingga Scaffold dapat menerima peristiwa scroll bertingkat saat konten yang dapat di-scroll di-scroll ke atas/bawah. Dengan cara ini, panel aplikasi yang dimuat dapat ditutup/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 */ // ... }
Menyesuaikan efek scroll yang diciutkan/diperluas
Anda dapat memberikan beberapa parameter untuk enterAlwaysScrollBehavior
guna
menyesuaikan efek animasi penyingkatan/perluasan. TopAppBarDefaults
juga
menyediakan TopAppBarScrollBehavior
lain 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
Anda sendiri dan mengimbangi toolbar secara manual saat
konten di-scroll. Lihat Contoh scroll bertingkat di AOSP untuk
contoh kode.
Panel samping
Dengan View, Anda mengimplementasikan panel navigasi menggunakan
DrawerLayout
sebagai tampilan root. Pada gilirannya, CoordinatorLayout
Anda adalah
tampilan turunan dari DrawerLayout
. DrawerLayout
juga berisi tampilan
anak 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)) HorizontalDivider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
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 // ... }
Lihat Snackbar untuk mempelajari lebih lanjut.
Pelajari lebih lanjut
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
. - Melakukan migrasi Sunflower ke Jetpack Compose: Postingan blog yang
mendokumentasikan perjalanan migrasi dari View ke Compose aplikasi contoh
Sunflower, yang berisi
CoordinatorLayout
.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Komponen dan tata letak Material
- Inset jendela di Compose
- Scroll