foreword

There are no native controls similar to ViewPager and Banner in the Compose library. Although Google officially released "ViewPager", it is still a test version:

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

So let's implement a "ViewPager" (ComposePager) and Banner by ourselves

text

ComposePager

First look at the effect of ComposePager:

The code is also very simple:

Take a look at the 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
)

Among them, composePagerState is the state in ComposePager. If you do not need to monitor or modify the internal state, you can use the default one

principle:

Referring to RecyclerView and ViewPager, it is equivalent to always having three Views. The first View is placed on the upper (left) side, the second View is displayed in the middle, and the third View is placed on the lower (right) side. Two slides come out, and after the hand is released, the moving animation will be performed and the state of the three Views will be reset

Banner

Sample code:

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
)

principle:

Among them, ComposePager is used internally, by changing the incoming pageCount*n into an infinite loop, and then opening a coroutine internally, and continuously calling ComposePager's State to switch to the api of the next page to realize 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()

import project

Add to the build.gradle file of the root project:

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

Add it to the app's build.gradle, the latest version reference: JitPack | Publish JVM and Android libraries

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

Then you can happily use ComposePager and Banner

The project is open source, welcome to star: GitHub - ltttttttttttt/ComposeViews

And there are not only ComposePager in the project, but also more useful Compose components, such as:

FlowLayout

GoodTextField和PasswordTextField

More Compose components will be added later

end

"ViewPager" and Banner in Compose