A horizontal indicator for a Pager, representing the currently active page and total pages drawn using a Shape.
HorizontalPageIndicatorSample
@Composable
fun HorizontalPageIndicatorSample() {
val maxPages = 9
var selectedPage by remember { mutableStateOf(0) }
var finalValue by remember { mutableStateOf(0) }
val animatedSelectedPage by
animateFloatAsState(targetValue = selectedPage.toFloat()) { finalValue = it.toInt() }
val pageIndicatorState: PageIndicatorState = remember {
object : PageIndicatorState {
override val pageOffset: Float
get() = animatedSelectedPage - finalValue
override val selectedPage: Int
get() = finalValue
override val pageCount: Int
get() = maxPages
}
}
Box(modifier = Modifier.fillMaxSize().padding(6.dp)) {
InlineSlider(
modifier = Modifier.align(Alignment.Center),
value = selectedPage,
increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
valueProgression = 0 until maxPages,
onValueChange = { selectedPage = it },
)
HorizontalPageIndicator(pageIndicatorState = pageIndicatorState)
}
}