CoordinatorLayout
là một ViewGroup
cho phép các bố cục phức tạp, chồng chéo và lồng nhau. Lớp này được dùng làm vùng chứa để cho phép các hoạt động tương tác cụ thể của Material Design, chẳng hạn như mở rộng/thu gọn thanh công cụ và bảng dưới cùng, đối với các Khung hiển thị có trong đó.
Trong Compose, đối tượng tương đương gần nhất của CoordinatorLayout
là Scaffold
. Scaffold
cung cấp các khe nội dung để kết hợp các Thành phần Material vào các mẫu màn hình và hoạt động tương tác phổ biến. Trang này mô tả cách bạn có thể di chuyển quá trình triển khai CoordinatorLayout
để sử dụng Scaffold
trong Compose.
Các bước di chuyển
Để di chuyển CoordinatorLayout
sang Scaffold
, hãy làm theo các bước sau:
Trong đoạn mã dưới đây,
CoordinatorLayout
chứaAppBarLayout
để chứaToolBar
,ViewPager
vàFloatingActionButton
. Nhận xétCoordinatorLayout
và các thành phần con của nó khỏi hệ phân cấp giao diện người dùng rồi thêmComposeView
để thay thế nó.<!-- <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" />
Trong Mảnh hoặc Hoạt động của bạn, hãy lấy thông tin tham chiếu đến
ComposeView
bạn vừa thêm và gọi phương thứcsetContent
trên đó. Trong phần nội dung của phương thức, hãy đặtScaffold
làm nội dung:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Trong nội dung của
Scaffold
, hãy thêm nội dung chính của màn hình vào đó. Vì nội dung chính trong XML ở trên làViewPager2
, nên chúng ta sẽ sử dụngHorizontalPager
, tương đương với Compose. Hàm lambdacontent
củaScaffold
cũng nhận được một thực thể củaPaddingValues
cần được áp dụng cho nội dung gốc. Bạn có thể sử dụngModifier.padding
để áp dụng cùng mộtPaddingValues
choHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Sử dụng các khung nội dung khác mà
Scaffold
cung cấp để thêm các thành phần màn hình khác và di chuyển các Khung hiển thị con còn lại. Bạn có thể sử dụng khetopBar
để thêmTopAppBar
và khefloatingActionButton
để cung cấpFloatingActionButton
.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 */ } } }
Các trường hợp sử dụng phổ biến
Thu gọn và mở rộng thanh công cụ
Trong hệ thống Khung hiển thị, để thu gọn và mở rộng thanh công cụ bằng CoordinatorLayout
, bạn sẽ sử dụng AppBarLayout
làm vùng chứa cho thanh công cụ. Sau đó, bạn có thể chỉ định một Behavior
thông qua layout_behavior
trong XML trên Chế độ xem có thể cuộn được liên kết (như RecyclerView
hoặc NestedScrollView
) để khai báo cách thanh công cụ thu gọn/mở rộng khi bạn cuộn.
Trong Compose, bạn có thể đạt được hiệu ứng tương tự thông qua TopAppBarScrollBehavior
. Ví dụ: để triển khai thanh công cụ thu gọn/mở rộng sao cho thanh công cụ xuất hiện khi bạn cuộn lên, hãy làm theo các bước sau:
- Gọi
TopAppBarDefaults.enterAlwaysScrollBehavior()
để tạoTopAppBarScrollBehavior
. - Cung cấp
TopAppBarScrollBehavior
đã tạo choTopAppBar
. Kết nối
NestedScrollConnection
quaModifier.nestedScroll
trênScaffold
để Scaffold có thể nhận các sự kiện cuộn lồng khi nội dung có thể cuộn lên/xuống. Bằng cách này, thanh ứng dụng bên trong có thể thu gọn/mở rộng một cách phù hợp khi nội dung cuộn.// 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 */ // ... }
Tuỳ chỉnh hiệu ứng cuộn thu gọn/mở rộng
Bạn có thể cung cấp một số tham số cho enterAlwaysScrollBehavior
để tuỳ chỉnh hiệu ứng ảnh động thu gọn/mở rộng. TopAppBarDefaults
cũng cung cấp TopAppBarScrollBehavior
khác, chẳng hạn như exitUntilCollapsedScrollBehavior
, chỉ mở rộng thanh ứng dụng khi nội dung được cuộn xuống hết cỡ.
Để tạo hiệu ứng tuỳ chỉnh hoàn toàn (ví dụ: hiệu ứng thị sai), bạn cũng có thể tạo NestedScrollConnection
của riêng mình và bù trừ thanh công cụ theo cách thủ công khi nội dung cuộn. Hãy xem Mẫu cuộn lồng nhau trên AOSP (Dự án nguồn mở Android) để biết ví dụ về mã.
Ngăn kéo
Với Khung hiển thị, bạn triển khai một ngăn điều hướng bằng cách sử dụng DrawerLayout
làm khung hiển thị gốc. Đổi lại, CoordinatorLayout
là thành phần hiển thị con của DrawerLayout
. DrawerLayout
cũng chứa một thành phần hiển thị con khác, chẳng hạn như NavigationView
, để hiển thị các tuỳ chọn điều hướng trong ngăn.
Trong Compose, bạn có thể triển khai một ngăn điều hướng bằng thành phần kết hợp ModalNavigationDrawer
. ModalNavigationDrawer
cung cấp một khe drawerContent
cho ngăn và một khe content
cho nội dung của màn hình.
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 // ... } }
Xem phần Ngăn để tìm hiểu thêm.
Thanh thông báo nhanh
Scaffold
cung cấp một khe snackbarHost
, có thể chấp nhận thành phần kết hợp SnackbarHost
để hiển thị 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 // ... }
Xem phần Thanh thông báo nhanh để tìm hiểu thêm.
Tìm hiểu thêm
Để biết thêm thông tin về cách di chuyển CoordinatorLayout
sang Compose, hãy xem các tài nguyên sau:
- Thành phần và bố cục Material: Tài liệu về các thành phần Material Design được hỗ trợ trong Compose, chẳng hạn như
Scaffold
. - Di chuyển Sunflower sang Jetpack Compose: Một bài đăng trên blog ghi lại hành trình di chuyển từ Khung hiển thị sang Compose của ứng dụng mẫu Sunflower có chứa
CoordinatorLayout
.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Thành phần và bố cục Material
- Phần lồng ghép cửa sổ trong Compose
- Cuộn