# PageSize

Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/pager/PageSize.kt+class:androidx.compose.foundation.pager.PageSize) Added in [1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.4.0) Common/All
- Cmn

  ```
  interface PageSize
  ```
Known direct subclasses [PageSize.Fill](https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fill), [PageSize.Fixed](https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fixed)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fill` | Pages take up the whole Pager size. |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fixed` | Multiple pages in a viewport |

*** ** * ** ***

This is used to determine how Pages are laid out in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`. 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.

```kotlin
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.PageSize
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.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.Density
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// [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)
    }
}
```

## Summary

| ### Nested types |
|---|
| `object https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fill : https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize` Pages take up the whole Pager size. |
| `class https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize.Fixed : https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize` Multiple pages in a viewport |

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize#(androidx.compose.ui.unit.Density).calculateMainAxisPageSize(kotlin.Int,kotlin.Int)(availableSpace: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, pageSpacing: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Based on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize#(androidx.compose.ui.unit.Density).calculateMainAxisPageSize(kotlin.Int,kotlin.Int)` pick a size for the pages | Cmn |

## Public functions

### Density.calculateMainAxisPageSize

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/pager/PageSize.kt+function:calculateMainAxisPageSize) Added in [1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.4.0)

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

Based on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize#(androidx.compose.ui.unit.Density).calculateMainAxisPageSize(kotlin.Int,kotlin.Int)` pick a size for the pages

| Parameters |
|---|---|
| `availableSpace: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The amount of space in pixels the pages in this Pager can use. |
| `pageSpacing: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The amount of space in pixels used to separate pages. |