CoordinatorLayout
adalah ViewGroup
yang memungkinkan tata letak yang kompleks, tumpang-tindih, dan
bertingkat. Digunakan sebagai penampung untuk mengaktifkan interaksi Desain Material tertentu, seperti meluaskan/mengecilkan toolbar dan sheet bawah, untuk View 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 penerapan 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
. KomentariCoordinatorLayout
dan turunannya dari hierarki UI Anda, lalu tambahkanComposeView
untuk menggantikannya.<!-- <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 // ... } }
Dalam konten
Scaffold
, tambahkan konten utama layar Anda di dalamnya. Karena konten utama dalam XML di atas adalahViewPager2
, kita akan menggunakanHorizontalPager
, yang merupakan padanan Compose-nya. 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
dikecilkan/diperluas saat Anda men-scroll.
Di Compose, Anda dapat mencapai efek serupa melalui
TopAppBarScrollBehavior
. Misalnya, untuk menerapkan toolbar yang dapat diciutkan/diekspandikan 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, kolom aplikasi yang disertakan dapat dikecilkan/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 ciut/luas
Anda dapat memberikan beberapa parameter untuk enterAlwaysScrollBehavior
guna menyesuaikan efek animasi menciut/meluas. TopAppBarDefaults
juga
menyediakan TopAppBarScrollBehavior
lain seperti
exitUntilCollapsedScrollBehavior
, yang hanya meluaskan kolom aplikasi saat
konten di-scroll hingga ke bawah.
Untuk membuat efek yang sepenuhnya kustom (misalnya, efek paralaks), Anda juga dapat membuat NestedScrollConnection
sendiri dan mengimbangi toolbar secara manual saat konten di-scroll. Lihat Contoh scroll bertingkat di 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
drawer.
Di Compose, Anda dapat menerapkan panel navigasi menggunakan
composable ModalNavigationDrawer
. ModalNavigationDrawer
menawarkan slot
drawerContent
untuk panel 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 mengetahui 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 pada 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