前言
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