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

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

バージョンの互換性

この実装では、プロジェクトの 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)
        )
    }
}

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

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

結果

図 1. コンテンツの下に円形インジケーターを表示するページャー。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

リストとグリッドを使用すると、アプリでコレクションを視覚的に魅力的でユーザーが使いやすい形式で表示できます。
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。