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

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

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

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

这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