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
berisiAppBarLayout
untuk berisiToolBar
,ViewPager
, danFloatingActionButton
. JadikanCoordinatorLayout
dan turunannya sebagai komentar 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 Fragment atau Activity Anda, dapatkan referensi ke
ComposeView
yang baru saja Anda tambahkan dan panggil metodesetContent
di dalamnya. Di bagian isi metode, tetapkanScaffold
sebagai kontennya:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Di konten
Scaffold
, tambahkan konten utama layar Anda di dalamnya. Karena konten utama dalam XML di atas adalahViewPager2
, kita akan menggunakanHorizontalPager
, yang setara dengan Compose. 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 Tampilan turunan yang tersisa. Anda dapat menggunakan slottopBar
untuk menambahkanTopAppBar
, dan slotfloatingActionButton
untuk menyediakanFloatingActionButton
.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
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 membuatTopAppBarScrollBehavior
. - Berikan
TopAppBarScrollBehavior
yang dibuat keTopAppBar
. Hubungkan
NestedScrollConnection
melaluiModifier.nestedScroll
padaScaffold
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 */ // ... }
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 // ... } }
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.
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