Compose中的“ViewPager“和Banner

前言

Compose库中是没有原生的类似ViewPager和Banner的控件的,虽然google官方有出"ViewPager",但目前还是测试版本:

implementation "com.google.accompanist:accompanist-pager:0.24.2-alpha"

于是我们来自己实现一个"ViewPager"(ComposePager)和Banner

正文

ComposePager

先看看ComposePager实现的效果:

代码也很简单:

 看一下api:

/**
 * 类似于xml中的ViewPager
 * @param pageCount 一共有多少页
 * @param modifier 修饰
 * @param composePagerState ComposePager的状态
 * @param orientation 滑动的方向
 * @param userEnable 用户是否可以滑动,等于false时用户滑动无反应,但代码可以执行翻页
 * @param pageCache 左右两边的页面缓存,默认左右各缓存1页,但不能少于1页(不宜过大)
 * @param content compose内容区域
 */
@Composable
fun ComposePager(
    pageCount: Int,
    modifier: Modifier = Modifier,
    composePagerState: ComposePagerState = rememberComposePagerState(),
    orientation: Orientation = Orientation.Horizontal,
    userEnable: Boolean = true,
    pageCache: Int = 1,
    content: @Composable ComposePagerScope.() -> Unit
)

其中composePagerState就是ComposePager中的状态,如果不需要监听或修改内部状态,则使用默认的即可

原理:

参考了RecyclerView和ViewPager,相当于一直有三个View,第一个View放在上(左)面,第二个View在中间展示,第三个View放在下(右)面,滑动的时候可以将另外两个滑动出来,手松开后会执行移动动画并重置三个View的状态

Banner

示例代码:

api:

/**
 * 可以自动循环轮播的ComposePager
 * [pageCount]一共有多少页
 * [modifier]修饰
 * [bannerState]Banner的状态
 * [orientation]滑动的方向
 * [userEnable]用户是否可以滑动,等于false时用户滑动无反应,但代码可以执行翻页
 * [autoScroll]是否自动滚动
 * [autoScrollTime]自动滚动间隔时间
 * [content]compose内容区域
 */
@Composable
fun Banner(
    pageCount: Int,
    modifier: Modifier = Modifier,
    bannerState: BannerState = rememberBannerState(),
    orientation: Orientation = Orientation.Horizontal,
    userEnable: Boolean = true,
    autoScroll: Boolean = true,
    autoScrollTime: Long = 3000,
    content: @Composable BannerScope.() -> Unit
)

原理:

其中内部使用了ComposePager,通过将传入的pageCount*n变为无限循环,然后内部开启一个协程,不停调用ComposePager的State的切换到下一页的api就实现了Banner

PagerIndicator

/**
 * 适用于Pager的指示器
 * @param size 指示器数量
 * @param offsetPercentWithSelect 选中的指示器的偏移百分比
 * @param selectIndex 选中的索引
 * @param indicatorItem 未被选中的指示器
 * @param selectIndicatorItem 被选中的指示器
 * @param modifier 修饰
 * @param margin 指示器之间的间距
 * @param orientation 指示器排列方向
 */
@Composable
fun PagerIndicator()

ImageBanner

/**
 * 展示图片的Banner
 * @param imageSize 图片数量
 * @param imageContent 放置图片的content
 * @param indicatorItem 未被选中的指示器,如果为null则不展示指示器
 * @param selectIndicatorItem 被选中的指示器,如果为null则不展示指示器
 * @param modifier 修饰
 * @param bannerState Banner的状态
 * @param orientation 滑动的方向
 * @param autoScroll 是否自动滚动
 * @param autoScrollTime 自动滚动间隔时间
 */
@Composable
fun ImageBanner()

引入项目

 在根项目的build.gradle文件中加入:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        ...
    }
}

app的build.gradle中加上,最新版本参考:JitPack | Publish JVM and Android libraries

dependencies{
    ...
    implementation 'com.github.ltttttttttttt:ComposeViews:1.1.4'
}

 然后就可以愉快的使用ComposePager和Banner了

项目已开源,欢迎star:GitHub - ltttttttttttt/ComposeViews

并且项目中不止有ComposePager,还有更多好用的Compose组件,比如:

FlowLayout

GoodTextField和PasswordTextField

后续还会添加更多的Compose组件

end

对Kotlin或KMP感兴趣的同学可以进Q群 101786950

如果这篇文章对您有帮助的话

可以扫码请我喝瓶饮料或咖啡(如果对什么比较感兴趣可以在备注里写出来)