Preface

Compose There is no native similar in the Library ViewPager and Banner Of controls , although google Official "ViewPager", But it is still a beta version :

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

So we come to realize one by ourselves "ViewPager"(ComposePager) and Banner

Text

ComposePager

Have a look first ComposePager To achieve the effect of :

The code is also simple :

  to glance at api:

/**
 *  Be similar to xml Medium ViewPager
 * [pageCount] How many pages are there in all 
 * [modifier] modification 
 * [composePagerState]ComposePager The state of 
 * [orientation] The direction of the slide 
 * [userEnable] Whether the user can slide , be equal to false When the user slides, there is no response , But the code can turn pages 
 * [content]compose Content area 
 */
@Composable
fun ComposePager(
    pageCount: Int,
    modifier: Modifier = Modifier,
    composePagerState: ComposePagerState = rememberComposePagerState(),
    orientation: Orientation = Orientation.Horizontal,
    userEnable: Boolean = true,
    content: @Composable ComposePagerScope.() -> Unit
)

among composePagerState Namely ComposePager The state of , If you don't need to monitor or modify the internal state , Then use the default

principle :

Refer to the RecyclerView and ViewPager, Equivalent to three all the time View, first View Put it on ( Left ) Noodles , the second View Show in the middle , Third View Put it down ( Right ) Noodles , When sliding, you can slide the other two out , When the hand is released, the movement animation will be performed and the three View The state of

Banner

Sample code :

api:

/**
 *  It can automatically rotate ComposePager
 * [pageCount] How many pages are there in all 
 * [modifier] modification 
 * [bannerState]Banner The state of 
 * [orientation] The direction of the slide 
 * [userEnable] Whether the user can slide , be equal to false When the user slides, there is no response , But the code can turn pages 
 * [autoScroll] Whether to scroll automatically 
 * [autoScrollTime] Auto scroll interval 
 * [content]compose Content area 
 */
@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 :

Inside of it... Is used ComposePager, Pass in pageCount*n Become an infinite loop , Then start an internal process , Keep calling ComposePager Of State Switch to the next page api And that's what happened Banner

Introduce projects

  In the root project build.gradle Add... To the document :

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

app Of build.gradle Medium plus , Latest version reference :https://jitpack.io/#ltttttttttttt/ComposeViews

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

  Then you can use it happily ComposePager and Banner 了

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

And there are more than ComposePager, There are more easy to use Compose Components , such as :

FlowLayout

GoodTextField and PasswordTextField

More will be added later Compose Components

end