Jetpack Compose学习(15)——Pager组件的使用(对标ViewPager)

原文地址: Jetpack Compose学习(15)——Pager组件的使用(对标ViewPager)-Stars-One的杂货小窝

从名字可以看出,Pager这个就是ViewPager的替代产物

在Jetpack Compose里的,Pager根据方向,主要分为2个组件: VerticalPagerHorizontalPager

这2个,一个是默认占满高度,一个是默认占满宽度,可以自行通过Modifier来修改尺寸

基本使用

val pagerState = rememberPagerState(pageCount = {
	2
})
HorizontalPager(state = pagerState){pageIndex->
	//这里写你的页面内容,根据下标自动切换不同页面
	when (pageIndex) {
 0 -> {
 Box(modifier=Modifier) { 
 }
 }
 else -> {
 Box(modifier=Modifier) {
 }
 }
 }
}

属性讲解

这里Pager的属性有些多,我挑些常用的属性来进行说明:

fun HorizontalPager(
 state: PagerState,
 modifier: Modifier = Modifier,
 contentPadding: PaddingValues = PaddingValues(0.dp),
 pageSize: PageSize = PageSize.Fill,
 beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount,
 pageSpacing: Dp = 0.dp,
 verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 flingBehavior: TargetedFlingBehavior = PagerDefaults.flingBehavior(state = state),
 userScrollEnabled: Boolean = true,
 reverseLayout: Boolean = false,
 key: ((index: Int) -> Any)? = null,
 pageNestedScrollConnection: NestedScrollConnection = PagerDefaults.pageNestedScrollConnection(
 state,
 Orientation.Horizontal
 ),
 snapPosition: SnapPosition = SnapPosition.Start,
 pageContent: @Composable PagerScope.(page: Int) -> Unit
)

pagerState

表明当前Pager容器的状态,通过rememberPagerState来进行创建

此对象有以下几个常用的属性和方法:

• currentPage：与贴靠位置最近的页面。默认情况下，贴靠位置位于布局的开头。

• settledPage：未运行任何动画或滚动时显示的页码。这与 currentPage 属性不同，因为如果网页足够接近固定位置，currentPage 会立即更新，但 settledPage 会保持不变，直到所有动画都运行完毕。

• targetPage：滚动动作的建议停止位置

• scrollToPage(pageIndex) 无动画指定滚动到指定页面下标(需要配合开启一个协程使用)

• animateScrollToPage(pageIndex) 带动画指定滚动到指定页面下标(需要配合开启一个协程使用)

val coroutineScope = rememberCoroutineScope()
coroutineScope.launch {
	// Call scroll to on pagerState
	pagerState.scrollToPage(5)
}

contentPadding(内边距)

感觉应该不用多说什么,和LazyRow等组件一样,用来设置内边距的

pageSize(页面item尺寸)

默认情况下，HorizontalPager 和 VerticalPager 分别占据整个宽度或整个高度。

可以将 pageSize 变量设置为使用 PageSize.Fixed、PageSize.Fill（默认）或自定义大小计算。

如,在HorizontalPager固定每个页面的宽度,使用PageSize.Fixed(300.dp)

beyondViewportPageCount

接收一个整数,默认为0,即表示: 默认情况下，Pager只会在屏幕上加载可见的页面。

如需在屏幕外加载更多页面，请将 beyondBoundsPageCount 设置为大于零的值

userScrollEnabled

用来控制是否允许用户滚动的一个boolean数值

pageSpacing

接收一个dp数值, 每个页面item的间隔距离

代码示例补充

banner水平轮播

这个是比较常见的效果了,如下图所示:

代码如下:

val pagerState = rememberPagerState(pageCount = {
	4
})
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
	HorizontalPager(state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), pageSpacing = 16.dp) { page -> // Our page content
	val bgColor = when (page) {
	0 -> {
	Color.Blue
	}
	1 -> {
	Color.Yellow
	}
	else -> {
	Color.LightGray
	}
	}
	
	Box(modifier = Modifier
	.fillMaxWidth()
	.height(100.dp)
	.background(bgColor))
	}
	Spacer(modifier = Modifier.height(16.dp))
	CustomIndicator(pagerState)
}

如果想自动轮播的效果,可以使用副作用函数配合,如下代码:

val pagerState = rememberPagerState(pageCount = {
 3
 })
	
LaunchedEffect(Unit) {
	while (true){
	//间隔1s跳转到下一个页面
	delay(1000)
	 if (pagerState.currentPage ==pagerState.pageCount-1) {
	 //重置的话,跳转不使用动画
	pagerState.scrollToPage(0)
	}else{
	pagerState.animateScrollToPage(pagerState.currentPage+1)
	}
	}
}
	
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
	HorizontalPager(state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), pageSpacing = 16.dp) { page -> // Our page content
	val bgColor = when (page) {
	0 -> {
	Color.Blue
	}
	1 -> {
	Color.Yellow
	}
	else -> {
	Color.LightGray
	}
	}
	Box(modifier = Modifier
	.fillMaxWidth()
	.height(100.dp)
	.background(bgColor))
	}
	Spacer(modifier = Modifier.height(16.dp))
	CustomIndicator(pagerState)
}
	

滚动小圆点指示器

/**
 * 指示器布局,与[HorizontalPager]
 *
 * @param pagerState pager的状态
 * @param modifier
 * @param activeColor 选中颜色
 * @param inactiveColor 未选中颜色
 * @param indicatorWidth 单个指示器的宽度
 * @param indicatorHeight 单个指示器的高度
 * @param spacing 每个指示器间隔
 * @param indicatorShape 指示器的形状
 *
 * @sample CustomIndicatorSample
 */
@Composable
fun CustomIndicator(
 pagerState: PagerState,
 modifier: Modifier = Modifier,
 activeColor: Color = MaterialTheme.colorScheme.primary,
 inactiveColor: Color = Color.LightGray,
 indicatorWidth: Dp = 10.dp,
 indicatorHeight: Dp = 5.dp,
 spacing: Dp = 5.dp,
 indicatorShape: Shape = CircleShape,
) {
 val spacingPx = LocalDensity.current.run { spacing.roundToPx() }
 Box(
 modifier = modifier, contentAlignment = Alignment.CenterStart
 ) {
 Row(
 horizontalArrangement = Arrangement.spacedBy(spacing),
 verticalAlignment = Alignment.CenterVertically,
 ) {
 val indicatorModifier = Modifier.background(color = inactiveColor, shape = indicatorShape)
 //不能活动的索引的点
 repeat(pagerState.pageCount) {
 Box(
 indicatorModifier.size(
 indicatorWidth, indicatorHeight
 )
 )
 }
 }
 //计算偏移量
 val scrollPosition = (pagerState.currentPage + pagerState.currentPageOffsetFraction).coerceIn(
 0f, (pagerState.pageCount - 1).coerceAtLeast(0).toFloat()
 ) //可以活动的索引点
 Box(Modifier
 .offset {
 IntOffset(
 x = (spacingPx * scrollPosition + indicatorWidth.roundToPx() * scrollPosition).toInt(), y = 0
 )
 }
 .size(width = indicatorWidth, height = indicatorHeight)
 .background(
 color = activeColor,
 shape = indicatorShape,
 ))
 }
}
//使用示例
@Composable
private fun CustomIndicatorSample() {
 val pagerState = rememberPagerState(pageCount = {
 10
 })
 Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
 HorizontalPager(state = pagerState) { page ->
 Text("page=$page")
 }
 CustomIndicator(pagerState)
 }
}

两侧页面高度减小,且带动画效果

效果不太好描述,直接上动图

添加一个Modifier的扩展方法,然后给Pager里的Item使用即可

fun Modifier.carouselTransition(page: Int, pagerState: PagerState) =
 graphicsLayer {
 val pageOffset =
 ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
 val transformation =
 lerp(
 start = 0.7f,
 stop = 1f,
 fraction = 1f - pageOffset.coerceIn(0f, 1f)
 )
 alpha = transformation
 scaleY = transformation
 }

示例:

val pageState = rememberPagerState(){3}
 Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
 HorizontalPager(state = pageState, contentPadding = PaddingValues(horizontal = 32.dp), pageSpacing = 16.dp, snapPosition = SnapPosition.Center) { page -> // Our page content
 
 val bgColor = when (page) {
 0 -> {
 Color.Blue
 }
 1 -> {
 Color.Yellow
 }
 else -> {
 Color.LightGray
 }
 }
 Box(modifier = Modifier
 .fillMaxWidth()
 .height(100.dp)
 .carouselTransition(page,pageState)
 .background(bgColor))
 }
 }

参考

• Jetpack Compose(八)-常用的布局组件 - 掘金
• Compose 中的分页器  |  Jetpack Compose  |  Android Developers