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)} 滚动小圆点指示器
/** * 指示器布局,与 * * @param pagerState pager的状态 * @param modifier * @param activeColor 选中颜色 * @param inactiveColor 未选中颜色 * @param indicatorWidth 单个指示器的宽度 * @param indicatorHeight 单个指示器的高度 * @param spacing 每个指示器间隔 * @param indicatorShape 指示器的形状 * * @sample CustomIndicatorSample */@Composablefun 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, )) }}//使用示例@Composableprivate 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
页:
[1]