📚

ComposeでIndicator付きPager

2022/08/03に公開

Android

Accompanistのページをよく見てサンプルコードも追えば分かるのですが、
インジケータを付ける部分が別ページに飛ばないと見れなくて悔しかったので1ページにまとめる作戦です。

完成図

導入

setting.gradle

versionCatalogs {
    version("accompanist", "0.26.0-alpha")
    library("accompanist-pager", "com.google.accompanist", "accompanist-pager").versionRef("accompanist")
    library("accompanist-pager-indicators", "com.google.accompanist", "accompanist-pager-indicators").versionRef("accompanist")
    bundle("accompanist-pager", ["accompanist-pager", "accompanist-pager-indicators"])
}

VersionCatalogsを使わない場合はスキップしてください

app(feature)/build.gradle

dependencies {
    implementation libs.bundles.accompanist.pager
}

プログラム

HorizontalPager

val pagerState = rememberPagerState()
val imageUrls = remember {
    listOf(
        "https://pbs.twimg.com/profile_images/1075242952287346688/qdFCE0yK_400x400.jpg",
        "https://pbs.twimg.com/profile_images/1075242952287346688/qdFCE0yK_400x400.jpg",
	"https://pbs.twimg.com/profile_images/1075242952287346688/qdFCE0yK_400x400.jpg"
    )
}
HorizontalPager(
    modifier = Modifier.fillMaxWidth(),
    count = imageUrls.size,
    state = pagerState
) { page ->
    val imageUrl = imageUrls[page]
    AsyncImage(
	model = imageUrl,
	contentDescription = null,
	modifier = Modifier
	    .fillMaxWidth()
	    .padding(horizontal = 32.dp)
    )
}

val pagerState = rememberPagerState()はインジケータの表示にも使用します。

HorizontalPagerIndicator

HorizontalPagerIndicator(
    pagerState = pagerState,
    modifier = Modifier
	.align(Alignment.CenterHorizontally)
	.padding(32.dp),
)

pagerStateを指定する以外は特に何もしなくてもインジケータが表示されます。

サンプルプロジェクト

こちらのcommitを参考にしてみてください