前言

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

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

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

正文

ComposePager

先看看ComposePager实现的效果:

代码也很简单:

看一下api:

/**
 * 类似于xml中的ViewPager
 * [pageCount]一共有多少页
 * [modifier]修饰
 * [composePagerState]ComposePager的状态
 * [orientation]滑动的方向
 * [userEnable]用户是否可以滑动,等于false时用户滑动无反应,但代码可以执行翻页
 * [content]compose内容区域
 */
@Composable
fun ComposePager(
    pageCount: Int,
    modifier: Modifier = Modifier,
    composePagerState: ComposePagerState = rememberComposePagerState(),
    orientation: Orientation = Orientation.Horizontal,
    userEnable: Boolean = true,
    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

引入项目

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

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

app的build.gradle中加上,最新版本参考:

dependencies{
    ...
    implementation com.github.ltttttttttttt:ComposeViews:1.0.9
}

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

项目已开源,欢迎star:

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

FlowLayout

GoodTextField和PasswordTextField

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

end