Thêm chỉ báo trang tuỳ chỉnh

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)
        )
    }
}
PagerSnippets.kt

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 trong HorizontalPager hiển thị văn bản "Trang: [số trang]" trên mỗi trang.

Kết quả

Hình 1. Trình chuyển trang hiển thị chỉ báo vòng tròn bên dưới nội dung.

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:

Danh sách và lưới cho phép ứng dụng của bạn hiển thị các bộ sưu tập ở dạng hình ảnh dễ nhìn và dễ sử dụng cho người dùng.
Bộ sưu tập hướng dẫn nhanh
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Bộ sưu tập hướng dẫn nhanh

Bạn có câu hỏi hoặc ý kiến phản hồi

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.
Chuyển đến phần Câu hỏi thường gặp Để lại ý kiến phản hồi