Jetpack Compose Glimmer の横方向ページャ

対象の XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
ディスプレイ メガネ
XR デバイスのタイプについて →

Jetpack Compose Glimmer の GlimmerHorizontalPager は、ページを順番に配置する、遅延コンポーズされた横方向にスクロール可能なレイアウトです。Compose Foundation にある標準の HorizontalPager と似ていますが、Glimmer の動作とデフォルト値を持つディスプレイ グラス用に調整されています。

デフォルトでは、一度に 1 ページのみが目立つように表示されます。洗練されたエクスペリエンスを提供するため、ページャーはスナップ アニメーションを使用して、ユーザーのスクロール操作が終了した後にページが常にビューポートの境界内に正確に収まるようにします。

図 1. GlimmerHorizontalPager の例。

主なパラメータとレイアウト オプション

GlimmerHorizontalPager は、間隔、レイアウトの配置、遅延読み込みを制御するためのカスタマイズ可能なパラメータを提供します。パラメータの一部を以下に示します。

パラメータ 説明

state

ページャのスクロール位置とアクティブ ページを管理、監視、プログラムで制御する GlimmerPagerState オブジェクト。

contentPadding

クリッピング後にコンテンツ全体の境界線の周囲に適用されるパディング。最初のページの前または最後のページの後に、先頭または末尾のパディングを追加する場合に便利です。

pageSpacing

ページャ内の個々のページ間の水平方向の間隔。

pageIndicator

アクティブ ページ インジケーターをレンダリングするコンポーザブル スロット。デフォルトは GlimmerHorizontalPagerDefaults.PageIndicator(state) です。

beyondViewportPageCount

プリローディングの最適化として、表示されているビューポートの範囲外で構成およびレイアウトするページの数。遅延コンポジションの効率を維持するため、大きな値を設定しないでください。

使用可能なすべてのパラメータについては、リファレンス ドキュメントをご覧ください。

アニメーション テキストのモーションに関する推奨事項

ディスプレイ グラスのページャー スナップ アニメーションとトランジションの間に、デフォルトのテキスト レンダリングでピクセル スナップ アーティファクトが発生することがあります。TextMotion.Animated を設定すると、レイアウト アニメーション全体でスムーズなレンダリングが保証されます。

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)

例: 横方向ページャ

次のコードは、10 ページの基本的な水平ページャーを作成し、各ページ内にカードを配置する方法を示しています。

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}

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

  • State: rememberGlimmerPagerState(pageCount = { 10 }) を使用して GlimmerPagerState を初期化し、ページャの状態を管理します。
  • ページ スロット コンテンツ: GlimmerPagerScope ラムダ内のページ インデックス page を受け取り、各カードをレンダリングします。
  • スムーズなアニメーションのテキスト スタイル: LocalTextStyle.current をコピーし、TextMotion.Animated を明示的に有効にします。
  • 自動ページ インジケーター: 外部インジケーター コンポーネントを必要とする標準の Compose ページャーとは異なり、GlimmerHorizontalPager はデフォルトでドットスタイルのページ インジケーターを自動的に埋め込みます。

ページ インジケーター

デフォルトでは、GlimmerHorizontalPager は GlimmerHorizontalPagerDefaults.PageIndicator を使用してドットベースのページ インジケーターをレンダリングします。インジケーターはカラーパターンを自動的に調整します。

  • アクティブなドットは、最も近い周囲の surface から解決されたコンテンツの色を使用します。

カスタマイズした PageIndicator を渡して明示的な色を指定したり、ドットを独自のカスタム レイアウトに置き換えたりできます。

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)