Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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ị:
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:
Hiển thị danh sách hoặc lưới
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.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nUsing page indicators, you can help your users understand their current position\nwithin your app's content, providing a visual indication of progress. These\nnavigational cues are useful when you present content sequentially, such as\ncarousel implementations, image galleries and slideshows, or pagination in\nlists.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate a horizontal pager with a custom page indicator\n\nThe following code creates a horizontal pager that has a page indicator, giving\nthe user visual cues for how many pages there are and which page is\nvisible:\n\n\n```kotlin\nval pagerState = rememberPagerState(pageCount = {\n 4\n})\nHorizontalPager(\n state = pagerState,\n modifier = Modifier.fillMaxSize()\n) { page -\u003e\n // Our page content\n Text(\n text = \"Page: $page\",\n )\n}\nRow(\n Modifier\n .wrapContentHeight()\n .fillMaxWidth()\n .align(Alignment.BottomCenter)\n .padding(bottom = 8.dp),\n horizontalArrangement = Arrangement.Center\n) {\n repeat(pagerState.pageCount) { iteration -\u003e\n val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray\n Box(\n modifier = Modifier\n .padding(2.dp)\n .clip(CircleShape)\n .background(color)\n .size(16.dp)\n )\n }\n}https://github.com/android/snippets/blob/30ed522851a9273c94afcd3a4c30bf674346ad18/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt#L381-L411\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The code implements a [`HorizontalPager`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#HorizontalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,kotlin.Function2)), which lets you swipe horizontally between different pages of content. In this case, each page displays the page number.\n- The `rememberPagerState()` function initializes the pager and sets the number of pages to 4. This function creates a state object that tracks the current page, and lets you control the pager.\n- The [`pagerState.currentPage`](/reference/kotlin/androidx/compose/foundation/pager/PagerState#currentPage()) property is used to determine which page indicator should be highlighted.\n- The page indictator appears in a pager overlaid by a [`Row`](/reference/kotlin/androidx/compose/foundation/layout/package-summary#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)) implementation.\n- A 16 dp circle is drawn for each page in the pager. The indicator for the current page is displayed as `DarkGray`, while the rest of the indicator circles are `LightGray`.\n- The [`Text`](/reference/kotlin/androidx/compose/material/package-summary#Text(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.collections.Map,kotlin.Function1,androidx.compose.ui.text.TextStyle)) composable within the `HorizontalPager` displays the text \"Page: \\[page number\\]\" on each page.\n\nResults **Figure 1.** Pager showing a circle indicator under the content.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay a list or grid \nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]