ページ インジケーターを使用すると、アプリのコンテンツ内の現在の位置をユーザーにわかりやすく伝え、進行状況を視覚的に示せます。これらのナビゲーション キューは、カルーセルの実装、画像ギャラリーやスライドショー、リスト内のページネーションなど、コンテンツを順番に表示する場合に便利です。
バージョンの互換性
この実装では、プロジェクトの 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
コンポーザブルは、各ページに「ページ: [ページ番号]」というテキストを表示します。
結果
このガイドを含むコレクション
このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

リストまたはグリッドを表示する
リストとグリッドを使用すると、アプリでコレクションを視覚的に魅力的でユーザーが使いやすい形式で表示できます。

インタラクティブなコンポーネントを表示する
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。
ご質問やフィードバックがある場合
よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。