Original address.Jetpack Compose learning (15) - the use of Pager component (against the ViewPager) - Stars-One's grocery nest
from the name can be seen, Pager this is ViewPager alternative product
In Jetpack Compose, Pager is divided into two main components depending on the orientation.VerticalPager HorizontalPager
These two, one is the default full height, one is the default full width, you can modify the size through the Modifier.
Basic use
val pagerState = rememberPagerState(pageCount = {
2
})
HorizontalPager(state = pagerState){pageIndex->
//Write your page content here,Automatically switch to different pages based on subscripts
when (pageIndex) {
0 -> {
Box(modifier=Modifier) {
}
}
else -> {
Box(modifier=Modifier) {
}
}
}
}
Attributes Explained
There are a lot of attributes in the Pager, so I'll pick some common ones to illustrate.
fun HorizontalPager(
state: PagerState,
modifier: Modifier = Modifier,
contentPadding: PaddingValues = PaddingValues(),
pageSize: PageSize = ,
beyondViewportPageCount: Int = ,
pageSpacing: Dp = ,
verticalAlignment: = ,
flingBehavior: TargetedFlingBehavior = (state = state),
userScrollEnabled: Boolean = true,
reverseLayout: Boolean = false,
key: ((index: Int) -> Any)? = null,
pageNestedScrollConnection: NestedScrollConnection = (
state,
),
snapPosition: SnapPosition = ,
pageContent: @Composable PagerScope.(page: Int) -> Unit
)
pagerState
Indicates the current state of the Pager container, via therememberPagerStateto create
This object has the following common properties and methods.
-
currentPage: The page closest to the docking location. By default, the affixed position is at the beginning of the layout. -
settledPage: The page number to display when no animations or scrolling are running. This is different from the currentPage property, because if the page is close enough to a fixed position, the currentPage is updated immediately, but the settledPage stays the same until all animations have run. -
targetPage: Suggested stopping position for scrolling actions -
scrollToPage(pageIndex)Specify scrolling to the specified page subscript without animation (need to be used in conjunction with turning on a coprocess). -
animateScrollToPage(pageIndex)Scroll to the specified page subscript with the specified drawing (needs to be used in conjunction with the opening of a coprocess).
val coroutineScope = rememberCoroutineScope()
{
// Call scroll to on pagerState
(5)
}
contentPadding(innerMargin)
I don't think I need to say anything about it, it's the same as LazyRow and other components, it's used to set the inner margins.
pageSize(page item size)
By default, HorizontalPager and VerticalPager occupy the entire width or the entire height, respectively.
The pageSize variable can be set to be calculated using , (default) or a custom size.
For example, to fix the width of each page in HorizontalPager, use the()
beyondViewportPageCount
Receives an integer, defaulting to 0, which means.By default, Pager will only load the visible pages on the screen.
To load more pages off-screen, set beyondBoundsPageCount to a value greater than zero
userScrollEnabled
A boolean value that controls whether or not the user is allowed to scroll.
pageSpacing
Receive a dp value, the distance between each page item.
Code Sample Supplement
Banner Horizontal Rotation
This is a more common effect, as shown below.
The code is as follows.
val pagerState = rememberPagerState(pageCount = {
4
})
Column(modifier = (), horizontalAlignment = ) {
HorizontalPager(state = pagerState, contentPadding = PaddingValues(horizontal = ), pageSpacing = ) { page -> // Our page content
val bgColor = when (page) {
0 -> {
}
1 -> {
}
else -> {
}
}
Box(modifier = Modifier
.fillMaxWidth()
.height()
.background(bgColor))
}
Spacer(modifier = ())
CustomIndicator(pagerState)
}
If you want to automatically rotate the effect, you can use the side-effect function with the following code.
val pagerState = rememberPagerState(pageCount = {
3
})
LaunchedEffect(Unit) {
while (true){
//intervals1sJump to next page
delay(1000)
if ( ==-1) {
//reset,Jump without animation
(0)
}else{
(+1)
}
}
}
Column(modifier = (), horizontalAlignment = ) {
HorizontalPager(state = pagerState, contentPadding = PaddingValues(horizontal = ), pageSpacing = ) { page -> // Our page content
val bgColor = when (page) {
0 -> {
}
1 -> {
}
else -> {
}
}
Box(modifier = Modifier
.fillMaxWidth()
.height()
.background(bgColor))
}
Spacer(modifier = ())
CustomIndicator(pagerState)
}
Scrolling Dot Indicator
/**
* Indicator Layout,together with[HorizontalPager]
*
* @param pagerState pagerpresent state
* @param modifier
* @param activeColor 选中颜色
* @param inactiveColor Unchecked color
* @param indicatorWidth Width of single indicator
* @param indicatorHeight Height of individual indicators
* @param spacing Each indicator interval
* @param indicatorShape Shape of the indicator
*
* @sample CustomIndicatorSample
*/
@Composable
fun CustomIndicator(
pagerState: PagerState,
modifier: Modifier = Modifier,
activeColor: Color = ,
inactiveColor: Color = ,
indicatorWidth: Dp = ,
indicatorHeight: Dp = ,
spacing: Dp = ,
indicatorShape: Shape = CircleShape,
) {
val spacingPx = { () }
Box(
modifier = modifier, contentAlignment =
) {
Row(
horizontalArrangement = (spacing),
verticalAlignment = ,
) {
val indicatorModifier = (color = inactiveColor, shape = indicatorShape)
//Points with inactive indexes
repeat() {
Box(
(
indicatorWidth, indicatorHeight
)
)
}
}
//Calculate Offset
val scrollPosition = ( + ).coerceIn(
0f, ( - 1).coerceAtLeast(0).toFloat()
) //Active index points
Box(Modifier
.offset {
IntOffset(
x = (spacingPx * scrollPosition + () * scrollPosition).toInt(), y = 0
)
}
.size(width = indicatorWidth, height = indicatorHeight)
.background(
color = activeColor,
shape = indicatorShape,
))
}
}
//usage example
@Composable
private fun CustomIndicatorSample() {
val pagerState = rememberPagerState(pageCount = {
10
})
Column(modifier = (), horizontalAlignment = ) {
HorizontalPager(state = pagerState) { page ->
Text("page=$page")
}
CustomIndicator(pagerState)
}
}
The height of both sides of the page is reduced, and the animation effect is driven.
The effect is not very descriptive, directly on the picture.
Add a Modifier extension method and use it for the Item in the Pager.
fun (page: Int, pagerState: PagerState) =
graphicsLayer {
val pageOffset =
(( - page) + ).absoluteValue
val transformation =
lerp(
start = 0.7f,
stop = 1f,
fraction = 1f - (0f, 1f)
)
alpha = transformation
scaleY = transformation
}
Example.
val pageState = rememberPagerState(){3}
Column(modifier = modifier, horizontalAlignment = ) {
HorizontalPager(state = pageState, contentPadding = PaddingValues(horizontal = ), pageSpacing = , snapPosition = ) { page -> // Our page content
val bgColor = when (page) {
0 -> {
}
1 -> {
}
else -> {
}
}
Box(modifier = Modifier
.fillMaxWidth()
.height()
.carouselTransition(page,pageState)
.background(bgColor))
}
}
consultation
- Jetpack Compose(VIII)-Commonly Used Layout Components - Nuggets
- Compose The pager in the | Jetpack Compose | Android Developers