gpt4 book ai didi

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

转载 作者:撒哈拉 更新时间:2024-12-18 12:47:52 56 4
gpt4 key购买 nike

原文地址: 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

最后此篇关于JetpackCompose学习(15)——Pager组件的使用(对标ViewPager)的文章就讲到这里了,如果你想了解更多关于JetpackCompose学习(15)——Pager组件的使用(对标ViewPager)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

56 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com