このページは Cloud Translation API によって翻訳されました。

カスタムのページインジケーターを追加する

ページインジケーターを使用すると、アプリのコンテンツ内の現在の位置をユーザーにわかりやすく伝え、進行状況を視覚的に示せます。これらのナビゲーションキューは、カルーセルの実装、画像ギャラリーやスライドショー、リスト内のページネーションなど、コンテンツを順番に表示する場合に便利です。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

カスタムのページインジケータを使用して横向きのページャーを作成する

次のコードは、ページインジケータのある横向きのページャーを作成し、ページ数と表示されているページを視覚的にユーザーに示します。

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}PagerSnippets.kt

コードに関する主なポイント

このコードは HorizontalPager を実装しており、コンテンツの異なるページ間を横方向にスワイプできます。この場合、各ページにページ番号が表示されます。
rememberPagerState() 関数はページャーを初期化し、ページ数を 4 に設定します。この関数は、現在のページを追跡し、ページャーを制御できる状態オブジェクトを作成します。
pagerState.currentPage プロパティは、ハイライト表示するページインジケータを決定するために使用されます。
ページインジケーターは、Row 実装がオーバーレイされたページャーに表示されます。
ページャー内のページごとに 16 dp の円が描画されます。現在のページのインジケーターは DarkGray として表示され、残りのインジケーターサークルは LightGray として表示されます。
HorizontalPager 内の Text コンポーザブルは、各ページに「ページ: [ページ番号]」というテキストを表示します。