从名字可以看出,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))
}
}
评论区