androidx.compose.foundation.pager

Interfaces

PageInfo

This represents a single measured page in a Pager layout.
Cmn
PageSize

This is used to determine how Pages are laid out in Pager.
Cmn
PagerLayoutInfo

Contains useful information about the currently displayed layout state of a Pager.
Cmn
PagerScope

Receiver scope for Pager.
Cmn
PagerSnapDistance

PagerSnapDistance defines the way the Pager will treat the distance between the current page and the page where it will settle.
Cmn

Classes

PageSize.Fixed

Multiple pages in a viewport
Cmn
PagerState

The state that can be used to control VerticalPager and HorizontalPager
Cmn

Objects

PageSize.Fill

Pages take up the whole Pager size.
Cmn
PagerDefaults

Contains the default values used by Pager.
Cmn

Composables

HorizontalPager

A Pager that scrolls horizontally.
Cmn
VerticalPager

A Pager that scrolls vertically.
Cmn
rememberPagerState

Creates and remember a PagerState to be used with a Pager
Cmn

Top-level functions summary

LazyLayoutScrollScope

A LazyLayoutScrollScope that allows customization of animated scroll in Pager.
Cmn
PagerState
PagerState(
    currentPage: Int,
    currentPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float,
    pageCount: () -> Int
)

Creates a default PagerState to be used with a Pager
Cmn

Top-level functions

LazyLayoutScrollScope

Cmn 
fun LazyLayoutScrollScope(state: PagerState, scrollScope: ScrollScope): LazyLayoutScrollScope

A LazyLayoutScrollScope that allows customization of animated scroll in Pager. The scope contains information about the layout where animated scroll can be performed as well as the necessary tools to do that respecting the scroll mutation priority.

import androidx.compose.animation.core.animate
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.layout.LazyLayoutScrollScope
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.LazyLayoutScrollScope
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

suspend fun PagerState.customScroll(block: suspend LazyLayoutScrollScope.() -> Unit) = scroll {
    block.invoke(LazyLayoutScrollScope(this@customScroll, this))
}

val itemsList = (0..100).toList()
val state = rememberPagerState { itemsList.size }
val scope = rememberCoroutineScope()

Column(Modifier.verticalScroll(rememberScrollState())) {
    Button(
        onClick = {
            scope.launch {
                state.customScroll {
                    snapToItem(40, 0) // teleport to item 40
                    val distance = calculateDistanceTo(50).toFloat()
                    var previousValue = 0f
                    androidx.compose.animation.core.animate(
                        0f,
                        distance,
                        animationSpec = tween(5_000),
                    ) { currentValue, _ ->
                        previousValue += scrollBy(currentValue - previousValue)
                    }
                }
            }
        }
    ) {
        Text("Scroll To Item 50")
    }

    HorizontalPager(state) {
        Box(Modifier.padding(2.dp).background(Color.Red).height(600.dp).fillMaxWidth()) {
            Text(itemsList[it].toString())
        }
    }
}
Parameters
state: PagerState

The PagerState associated with the layout where this animated scroll should be performed.
scrollScope: ScrollScope

The base ScrollScope where the scroll session was created.
Returns
LazyLayoutScrollScope

An implementation of LazyLayoutScrollScope that works with HorizontalPager and VerticalPager.

PagerState

Cmn 
fun PagerState(
    currentPage: Int = 0,
    currentPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float = 0.0f,
    pageCount: () -> Int
): PagerState

Creates a default PagerState to be used with a Pager

Please refer to the sample to learn how to use this API.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// You can use PagerState to define an initial page
val state = rememberPagerState(initialPage = 5) { 10 }
HorizontalPager(modifier = Modifier.fillMaxSize(), state = state) { page ->
    Box(
        modifier =
            Modifier.padding(10.dp).background(Color.Blue).fillMaxWidth().aspectRatio(1f),
        contentAlignment = Alignment.Center,
    ) {
        Text(text = page.toString(), fontSize = 32.sp)
    }
}
Parameters
currentPage: Int = 0

The pager that should be shown first.
currentPageOffsetFraction: @FloatRange(from = -0.5, to = 0.5) Float = 0.0f

The offset of the initial page as a fraction of the page size. This should vary between -0.5 and 0.5 and indicates how to offset the initial page from the snapped position.
pageCount: () -> Int

The amount of pages this Pager will have.