CoordinatorLayout
adalah ViewGroup
yang memungkinkan tata letak yang kompleks, tumpang-tindih, dan
bertingkat. Library ini digunakan sebagai penampung untuk memungkinkan interaksi Desain Material tertentu, seperti toolbar yang memperluas/menciutkan dan sheet bawah, untuk Tampilan
yang ada di dalamnya.
Di Compose, padanan terdekat dari 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-langkah berikut:
Dalam cuplikan di bawah,
CoordinatorLayout
berisiAppBarLayout
untuk berisiToolBar
,ViewPager
, danFloatingActionButton
. JadikanCoordinatorLayout
dan turunannya sebagai komentar dari hierarki UI dan 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, 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 // ... } }
Di konten
Scaffold
, tambahkan konten utama layar 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
Di sistem View, untuk menciutkan dan meluaskan toolbar dengan CoordinatorLayout
,
gunakan AppBarLayout
sebagai penampung untuk toolbar. Anda kemudian dapat menentukan
Behavior
hingga layout_behavior
dalam XML pada Tampilan
terkait 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 menerapkan toolbar yang diciutkan/perluas 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 di-scroll. Dengan cara ini, panel aplikasi yang dimuat 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/memperluas
Anda dapat menyediakan beberapa parameter untuk enterAlwaysScrollBehavior
guna
menyesuaikan efek animasi menciutkan/memperluas. TopAppBarDefaults
juga
menyediakan TopAppBarScrollBehavior
lainnya seperti
exitUntilCollapsedScrollBehavior
, yang hanya memperluas panel aplikasi saat
konten di-scroll ke bawah.
Untuk membuat efek yang sepenuhnya kustom (misalnya, efek paralaks), Anda juga dapat
membuat NestedScrollConnection
sendiri dan meng-offset toolbar secara manual saat
konten di-scroll. Lihat Contoh scroll bertingkat pada AOSP untuk mengetahui contoh kode.
Panel samping
Dengan View, Anda menerapkan 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 Snackbars 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
. - Memigrasikan 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 Material dan tata letak
- Inset jendela di Compose
- Scroll