👆

Composeでページングしたい ▶︎HorizontalPagerを使う

2022/10/24に公開

2023/08/21

Jetpack Compose でスワイプしてページ移動したい時に使うHorizontalPagerを触ってみたので共有します。
何卒何卒...

Compose でページングしたい

下のようなページングしたくなる時があると思います。（インスタみたいですね）

そんな時に使うのが Accompanist のHorizontalPagerです。

HorizontalPagerの使い方

HorizontalPager(count = 10) { page ->
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}

count引数にページの合計を教えるだけで各ページを作ってくれます。
引数のラムダの引数(上記コードのpage引数)にはページの番号(0 から始まる)が渡されます。

また手動でページを移動させたくなるかもしれません(ボタンを押したら ◯◯ ページへ移動など)。そんなときはrememberPagerStateを使って pageState を保存し、pageState.scrollToPage(ページ番号)。

val pagerState = rememberPagerState()

HorizontalPager(count = 10, state = pagerState) { page ->
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}

// Button.onClickなどで
coroutineScope.launch {
    pagerState.scrollToPage(2)
}

上記にもあるようにpagerState.scrollToPage()はコルーチンスコープ内で呼び出す必要があるのでrememberCoroutineScope()などでスコープを作ってから実行しましょう。

上下バージョンもある

HorizontalPagerはその名の通り横方向にスワイプすることでページングできますが、上下バージョンのVerticalPagerというのもあるそうです。

Compose でページングしたい

Discussion