快来学习 Compose 中的 “ViewPager” 吧

什么是 ViewPager

对啊，什么是 ViewPager 呢？ViewPager 的功能就是可以使视图滑动，就像桌面左右滑动那样。写过安卓的对它可谓是非常熟悉了，不管是轮播图的使用、亦或是页面之间的切换，都离不开它，先来看看在安卓中的 ViewPager 实现效果吧：

ViewPager1.gif

上图中就是 ViewPager 作为轮播图的简单例子。

顺嘴提一下吧，之前安卓的 ViewPager 确实只能实现左右的滑动，但是在 2019 年的时候谷歌就推出了 ViewPager2 ，ViewPager2 不但可以支持左右滑动，也可以实现竖向的滑动，这样可玩性又提高了许多，也不需要为了产品的一些特定需求而去自定义 ViewGroup 了。

Compose 中的 “ViewPager”

其实 Compose 中并没有 ViewPager ，而是谷歌在 Compose 的扩展库中写了一个名叫 Pager 的库，实现了类似安卓中 ViewPager 的功能。

添加依赖

上面也提到了， Compose 中并没有 ViewPager ，所以需要在 build.gradle 中添加下依赖：

[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0bQBx1T-1645407892234)()]

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-pager:"
}

将上面的 version 替换成最新的版本号即可，笔者在写的时候最新版本为 0.24.2-alpha 。

水平滑动（左右）

添加好依赖来看看如何使用吧！

HorizontalPager(count = 10) { page ->
    Text(text = "Page: $page")
}

没错，就这么简单，还记得之前在 Android View 中使用 ViewPager 有多费劲嘛。。。。在 Compose 中只需要一行代码。

下面来看下预览图吧，如果在 Android View 中想看 ViewPager 预览的话必须得运行到真机或者虚拟机来可以看到，但是在 Compose 中直接就可以进行预览。下面来写下预览代码吧：

@OptIn(ExperimentalPagerApi::class)
@Preview(name = "Test1", heightDp = 170)
@Composable
fun PagerTest1Preview() {
    PagerTest1()
}

简单介绍上上面的预览代码吧，先看第一行注解 OptIn，这是由于 Pager 库目前处于试验阶段，API 随时都可能修改，所以所有 API 都标有@ExperimentalPagerApi注释，第二行注解 Preview，设定了预览图的名字和高度。来看下效果吧：

ViewPager2.gif

这里由于是直接在 as 中进行的预览互动，所以看着可能有些卡顿，但在真机上没有问题，如德芙般丝滑。

垂直滑动（上下）

上面写了水平滑动，这里来看下垂直滑动吧：

VerticalPager(count = 10) { page ->
    Text(text = "Page: $page")
}

很容易理解吧，水平滑动是 HorizontalPager，垂直滑动就是 VerticalPager，具体详细使用在下面篇幅中介绍，这里先来看看垂直滑动的预览效果吧：

@OptIn(ExperimentalPagerApi::class)
@Preview(name = "Test3", heightDp = 170, widthDp = 100)
@Composable
fun PagerTest3Preview() {
    PagerTest3()
}

预览代码和刚才差不多，就不做过多解释了，直接来看效果图吧：

ViewPager3.gif

不错吧，很简单的代码就实现了之前在 Android View 中比较复杂的效果。

源码解析

下面咱们来简单看看 Pager 的源码吧。

水平滑动源码

先来看看水平滑动的源码：

image.png

由于怕大家看着不舒服，所以这里的代码放成了图片，下面来看下可组合项 HorizontalPager 的参数都有什么作用吧，或者说可组合项 HorizontalPager 都有什么功能。

• count：这是可组合项 HorizontalPager 必须要写的参数，顾名思义，就是 Page 的数量
• Modifier：这个在 Compose 中见的太多了，不再赘述，修饰符
• state：用于控制或观察 Pager 状态的状态对象
• reverseLayout：反转滚动和布局的方向，默认为 false，为 true 时第一项将在最后
• itemSpacing：添加项目之间的垂直间距
• contentPadding：内容的 Padding 值
• verticalAlignment：垂直对齐为居中
• flingBehavior：描述滑动行为的逻辑
• key：滚动的位置将根据键保持
• userScrollEnabled：是否允许通过用户手势或辅助功能进行滚动。即使它被禁用，仍然可以使用该状态以编程方式滚动
• content：具体可组合项的内容，在这里，可以引用 PagerScope.currentPage 和 PagerScope 中的其他属性。

垂直滑动源码

接下来再来看下垂直滑动的源码：

image.png

发现点什么没有，水平滑动和垂直滑动的源码是不是非常像，而且都是直接调用的 Pager 可组合项。这里有很多参数和水平滑动的一样，就不再赘述，来看看不同的参数吧。

• horizontalAlignment：上面水平滑动的是 verticalAlignment 垂直对齐居中，这里是水平对齐居中
• flingBehavior：描述滑动行为的逻辑也有所不同

剩下就基本一致了。

Pager 内部实现

下面来看下 Pager 内部的实现吧，同样因为这里是源码，所以还放成图片吧：

image.png

可以看出 Pager 可组合项中有一个 isVertical 参数，用来判断是垂直滑动还是水平滑动，如果是垂直滑动的话用的是 LazyColumn，水平滑动则用的是 LazyRow，还记得吗？在 Compose 中 LazyColumn 和 LazyRow 对标的是 Android View 中的 RecyclerView，值得一说的是，现在 Android View 中的 ViewPager2 也使用的是 RecyclerView。

进阶用法

上面大概说了下 Pager 的基本用法，但如果在生产环境中一般不会这么简单的，这里来举几个生产环境中可能是用到的例子吧。

添加指示器

什么是 指示器呢？很简单，就是文章开头那张动图中间下方的小圆圈，用来告知用户当前在第几页以及一共有几页。

之前想在 Compose 中添加指示器需要自己来绘制，但现在官方也创建了一个库专门 用来实现 Pager 的指示器，来看看吧。

添加依赖

第一步还是在 build.gradle 中添加依赖：

[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cS6d9TU0-1645407892238)()]

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-pager:"

    // 指示器
    implementation "com.google.accompanist:accompanist-pager-indicators:"
}

同上面一样，使用的时候需要将 version 替换成当前最新的版本，笔者在写的时候最新版本为 0.24.2-alpha 。

使用指示器

来看下如何使用指示器吧：

// 水平指示器
HorizontalPagerIndicator(
    pagerState = pagerState,
    modifier = Modifier
        .align(Alignment.CenterHorizontally)
        .padding(16.dp),
)

// 垂直指示器
VerticalPagerIndicator(
    pagerState = pagerState,
    modifier = Modifier
        .align(Alignment.CenterHorizontally)
        .padding(16.dp),
)

是不是 so easy，指示器也是一个可组合项，只需要你传入 Pager 的状态即可，总页数以及当前的页码在 PagerState 中都有。下面先来看下效果图吧：

viewPager5.gif

通过上面代码可以发现指示器也分为水平和垂直的，由于水平的指示器使用较多，所以本文以水平指示器作为讲解对象。

image.png

上图就是水平指示器的源码，其实和我之前绘制的原理都一样，不过当官方推出库之后肯定选择用官方的。方法中的绘制代码不过多赘述，大家应该都能看懂，下面来说一下参数的含义吧：

• pagerState：Pager 的状态
• modifier：修饰符，不过多解释
• activeColor：当前活跃的指示器颜色
• inactiveColor：当前不活跃的指示器颜色
• indicatorWidth：指示器的宽度
• indicatorHeight：指示器的高度
• spacing：指示器之间的宽度
• indicatorShape：指示器的形状，默认为圆形，大家也可以自己进行定义

指示器还可以与 TabRow 进行结合使用，效果和微信的页面切换效果基本一致，大家感兴趣的可以自己下去试一下。

监听页面更改

在 Android View 中咱们如果想监听 ViewPager 的话只需要通过 registerOnPageChangeCallback 方法即可进行监听，那么在 Compose 中咱们应该如何监听 Pager 的页面更改呢？

每当所选页面发生更改时，都会更新该 PagerState.currentPage 属性。您可以使用该 snapshotFlow 函数来观察流的变化：

val pagerState = rememberPagerState()
LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage }.collect { page ->
        AnalyticsService.sendPageSelectedEvent(page)
    }
}
VerticalPager(
    count = 10,
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}

修改 Pager 切换效果

大家都知道，在 Android View 中，ViewPager 的切换效果可以通过设置 PageTransformer 来进行修改。来看下官方提供 Demo 的样例吧：

viewPager4.gif

看着效果还不错吧，由于里面涉及知识点太多，想学习的可以去官方的源码中进行查看，https://github.com/google/accompanist/blob/main/sample/src/main/java/com/google/accompanist/sample/pager/HorizontalPagerTransitionSample.kt

暂时小结

如果大家想系统地学习 Compose 的话，可以购买我的新书《Jetpack Compose：Android全新UI编程》进行阅读，里面有完整的 Compose 框架供大家学习。

京东购买地址

当当购买地址

今天的代码样例都在 玩天气 Github：https://github.com/zhujiang521/PlayWeather

如果对你有帮助的话，别忘记点个 Star，感激不尽。

其实还有一些细节的东西我没有说到，大家如果有疑问的话可以在评论区提出来。

好了，先写到这里吧，再会！