使用Jetpack Compose为Android App创建自定义页面指示器

在现代移动应用中，页面指示器在提供视觉导航提示方面发挥着重要作用，帮助用户理解其在应用内容中的当前位置。页面指示器特别适用于顺序展示内容的场景，如图片轮播、图像库、幻灯片放映以及分页列表。本文将详细介绍如何使用Jetpack Compose创建自定义页面指示器，帮助开发者提升用户体验。

版本兼容性

本文的实现要求项目的minSDK设置为API级别21或更高。

依赖项

首先，需要在项目的build.gradle文件中添加Compose库的依赖：

implementation(platform("androidx.compose:compose-bom:2024.06.00"))

创建带有自定义页面指示器的水平分页器

下面的代码示例展示了如何创建一个水平分页器，并为其添加一个页面指示器。页面指示器提供视觉提示，显示总页数以及当前页的位置。

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import com.google.accompanist.pager.*@OptIn(ExperimentalPagerApi::class)
@Composable
fun CustomPageIndicatorPager() {Box(modifier = Modifier.fillMaxSize()) {val pagerState = rememberPagerState(pageCount = {4})HorizontalPager(state = pagerState,modifier = Modifier.fillMaxSize()) { page ->Text(text = "Page: $page",modifier = Modifier.fillMaxSize(),fontWeight = FontWeight.Bold)}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.LightGrayBox(modifier = Modifier.padding(2.dp).clip(CircleShape).background(color).size(16.dp))}}}
}@Preview(showBackground = true)
@Composable
fun CustomPageIndicatorPagerPreview() {CustomPageIndicatorPager()
}

关键代码解析

水平分页器（HorizontalPager）：
- HorizontalPager允许水平滑动不同的内容页面。在本例中，每个页面显示页码。
- rememberPagerState()函数初始化分页器并设置页面数量为4。该函数创建一个状态对象，跟踪当前页面，并允许控制分页器。
页面指示器：
- pagerState.currentPage属性用于确定应高亮显示哪个页面指示器。
- 页面指示器位于一个Row布局中，该布局覆盖在分页器之上。
- 每个页面指示器为一个16 dp的圆圈。当前页面的指示器显示为深灰色（DarkGray），其余页面的指示器显示为浅灰色（LightGray）。
Text组件：
- Text组件在每个页面中显示文本“Page: [page number]”。