PageSize

interface PageSize

This is used to determine how Pages are laid out in Pager. By changing the size of the pages one can change how many pages are shown.

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

Functions

fun Density.calculateMainAxisPageSize(availableSpace: Int, pageSpacing: Int): Int

Based on availableSpace pick a size for the pages

Parameters

Code Examples

CustomPageSizeSample

@Composable
fun CustomPageSizeSample() {
    // [PageSize] should be defined as a top level constant in order to avoid unnecessary re-
    // creations.
    val CustomPageSize =
        object : PageSize {
            override fun Density.calculateMainAxisPageSize(
                availableSpace: Int,
                pageSpacing: Int,
            ): Int {
                // [availableSpace] represents the whole Pager width (in this case), we'd like to
                // have
                // 3 pages per viewport, so we divide it by 3, taking into consideration the start
                // and end spacings.
                return (availableSpace - 2 * pageSpacing) / 3
            }
        }
    val state = rememberPagerState { 10 }
    HorizontalPager(state = state, modifier = Modifier.fillMaxSize(), pageSize = CustomPageSize) {
        page ->
        Box(
            modifier =
                Modifier.padding(10.dp).background(Color.Blue).fillMaxWidth().aspectRatio(1f),
            contentAlignment = Alignment.Center,
        ) {
            Text(text = page.toString(), fontSize = 32.sp)
        }
    }
}