Bằng cách sử dụng chỉ báo trang, bạn có thể giúp người dùng hiểu được vị trí hiện tại của họ trong nội dung của ứng dụng, đồng thời cung cấp chỉ báo trực quan về tiến trình. Các tín hiệu điều hướng này rất hữu ích khi bạn trình bày nội dung theo trình tự, chẳng hạn như triển khai băng chuyền, thư viện hình ảnh và trình chiếu hoặc phân trang trong danh sách.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo một trình phân trang theo chiều ngang có chỉ báo trang tuỳ chỉnh
Mã sau đây tạo một trình phân trang theo chiều ngang có chỉ báo trang, cung cấp cho người dùng các tín hiệu trực quan về số lượng trang và trang nào đang hiển thị:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, modifier = Modifier.fillMaxSize() ) { page -> // Our page content Text( text = "Page: $page", ) } Row( Modifier .wrapContentHeight() .fillMaxWidth() .align(Alignment.BottomCenter) .padding(bottom = 8.dp), horizontalArrangement = Arrangement.Center ) { repeat(pagerState.pageCount) { iteration -> val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray Box( modifier = Modifier .padding(2.dp) .clip(CircleShape) .background(color) .size(16.dp) ) } }
Các điểm chính về mã
- Mã này triển khai
HorizontalPager
, cho phép bạn vuốt theo chiều ngang giữa các trang nội dung khác nhau. Trong trường hợp này, mỗi trang sẽ hiển thị số trang. - Hàm
rememberPagerState()
khởi tạo trình phân trang và đặt số trang thành 4. Hàm này tạo một đối tượng trạng thái theo dõi trang hiện tại và cho phép bạn kiểm soát trình phân trang. - Thuộc tính
pagerState.currentPage
được dùng để xác định chỉ báo trang nào sẽ được làm nổi bật. - Chỉ báo trang xuất hiện trong một trình phân trang được phủ bằng hoạt động triển khai
Row
. - Một vòng tròn 16 dp được vẽ cho mỗi trang trong trình phân trang. Chỉ báo cho trang hiện tại sẽ hiển thị dưới dạng
DarkGray
, còn các vòng tròn chỉ báo còn lại sẽ làLightGray
. - Thành phần kết hợp
Text
trongHorizontalPager
hiển thị văn bản "Trang: [số trang]" trên mỗi trang.
Kết quả
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:

Hiển thị danh sách hoặc lưới
