👆

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

2022/10/23に公開約1,200字

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

https://google.github.io/accompanist/pager/

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というのもあるそうです。

https://google.github.io/accompanist/pager/#verticalpager

Discussion

ログインするとコメントできます