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

Compose でのページャー

コンテンツを左右または上下にめくるには、 HorizontalPager および VerticalPager 作成できます。これらのコンポーザブルは、ビューシステムの ViewPager と同様の機能を持ちます。デフォルトでは、HorizontalPager は画面の幅いっぱいに表示されます。 VerticalPager は画面全体の高さを占め、ページャーは 1 ページしかスクロールしません。あります。これらのデフォルトは構成可能です。

`HorizontalPager`

左右に水平方向にスクロールするページャーを作成するには、次のコマンドを使用します。 HorizontalPager:

</ph>

図 1.HorizontalPager のデモ

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}PagerSnippets.kt

`VerticalPager`

上下にスクロールするページャーを作成するには、VerticalPager を使用します。

</ph>

図 2.VerticalPager のデモ

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
VerticalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}PagerSnippets.kt

遅延作成

HorizontalPager と VerticalPager の両方のページが遅延する必要に応じて配置できます。ユーザーがページをスクロールすると、不要になったページがコンポーザブルから削除されます。

画面外のページを読み込む

デフォルトでは、ページャーには画面に表示されているページのみが読み込まれます。他のページを読み込むオフスクリーンの場合は、beyondBoundsPageCount を 0 より大きい値に設定します。

ページャー内のアイテムまでスクロールする

ページャー内の特定のページにスクロールするには、rememberPagerState() を使用して PagerState オブジェクトを作成し、state パラメータとしてページャーに渡します。この状態の CoroutineScope 内で PagerState#scrollToPage() を呼び出すことができます。

val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
    coroutineScope.launch {
        // Call scroll to on pagerState
        pagerState.scrollToPage(5)
    }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
    Text("Jump to Page 5")
}PagerSnippets.kt

ページに合わせてアニメーション化する場合は、 PagerState#animateScrollToPage() 関数:

val pagerState = rememberPagerState(pageCount = {
    10
})

HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
    coroutineScope.launch {
        // Call scroll to on pagerState
        pagerState.animateScrollToPage(5)
    }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
    Text("Jump to Page 5")
}PagerSnippets.kt

ページの状態の変更に関する通知を受け取る

PagerState には、ページに関する情報を含む 3 つのプロパティ（currentPage、settledPage、targetPage）があります。

currentPage: スナップ位置に最も近いページ。デフォルトでは、スナップは位置はレイアウトの先頭です。
settledPage: アニメーションやスクロールが実行されていないときのページ番号。この currentPage プロパティとは異なり、currentPage プロパティはページがスナップ位置に十分近い場合は直ちに更新されますが、 settledPage は、すべてのアニメーションの実行が終了するまで変わりません。
targetPage: スクロール動作の停止位置の候補。

snapshotFlow 関数を使用して、これらの変数の変更を監視し、それに応答できます。たとえば、ページが変更されるたびにアナリティクスイベントを送信する場合は、次の操作を行います。

val pagerState = rememberPagerState(pageCount = {
    10
})

LaunchedEffect(pagerState) {
    // Collect from the a snapshotFlow reading the currentPage
    snapshotFlow { pagerState.currentPage }.collect { page ->
        // Do something with each page change, for example:
        // viewModel.sendPageSelectedEvent(page)
        Log.d("Page change", "Page changed to $page")
    }
}

VerticalPager(
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}PagerSnippets.kt

ページインジケーターを追加する

ページにインジケーターを追加するには、PagerState オブジェクトを使用して、ページ数のうちどのページが選択されているかの情報を確認し、カスタムインジケーターを描画します。

たとえば、単純な円のインジケーターが欲しい場合、ページの選択に応じて、円の色を変更できます。 pagerState.currentPage:

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

コンテンツの下に丸いインジケーターが表示されたポケベル — **図 3**. コンテンツの下に円形のインジケータが表示されたページャー

アイテムのスクロール効果をコンテンツに適用する

一般的なユースケースは、スクロール位置を使用してページャーにエフェクトを適用することです。あります。現在選択されているページからページがどのくらい離れているかを確認するには、 PagerState.currentPageOffsetFraction。選択したページからの距離に基づいて、コンテンツに変換効果を適用できます。

図 4. ポケベルのコンテンツへの変換の適用

たとえば、対象物から対象物までの距離に基づいて次のコマンドを使用して alpha を変更します。 Modifier.graphicsLayer ページング内のアイテムに対して

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(state = pagerState) { page ->
    Card(
        Modifier
            .size(200.dp)
            .graphicsLayer {
                // Calculate the absolute offset for the current page from the
                // scroll position. We use the absolute value which allows us to mirror
                // any effects for both directions
                val pageOffset = (
                    (pagerState.currentPage - page) + pagerState
                        .currentPageOffsetFraction
                    ).absoluteValue

                // We animate the alpha, between 50% and 100%
                alpha = lerp(
                    start = 0.5f,
                    stop = 1f,
                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                )
            }
    ) {
        // Card content
    }
}PagerSnippets.kt

カスタムページサイズ

デフォルトでは、HorizontalPager と VerticalPager はそれぞれ幅または高さ全体を占有します。pageSize 変数は、Fixed、Fill（デフォルト）、またはカスタムサイズの計算を設定できます。

たとえば、100.dp の固定幅ページを設定するには、次のようにします。

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    pageSize = PageSize.Fixed(100.dp)
) { page ->
    // page content
}PagerSnippets.kt

ビューポートのサイズに基づいてページのサイズを調整するには、カスタムのページサイズを使用します計算します。カスタム PageSize オブジェクトを作成し、アイテム間のスペースを考慮して availableSpace を 3 で割ります。

private val threePagesPerViewport = object : PageSize {
    override fun Density.calculateMainAxisPageSize(
        availableSpace: Int,
        pageSpacing: Int
    ): Int {
        return (availableSpace - 2 * pageSpacing) / 3
    }
}PagerSnippets.kt

コンテンツのパディング

HorizontalPager と VerticalPager はどちらもコンテンツのパディングの変更をサポートしています。これにより、ページの最大サイズと配置を調整できます。

たとえば、start パディングを設定すると、ページが最後に向かって配置されます。

先頭にパディングがあるページャー。コンテンツは末尾に向かって配置されています

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(start = 64.dp),
) { page ->
    // page content
}PagerSnippets.kt

start と end の両方のパディングを同じ値に設定すると、アイテムが中央に配置されます。水平方向:

開始と終了がパディングされたページャー（コンテンツが中央に配置されている）

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 32.dp),
) { page ->
    // page content
}PagerSnippets.kt

パディング end を設定すると、ページが先頭に揃います。

コンテンツが開始位置に揃えられていることを示す、開始と終了のパディングが設定されたページャー

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(end = 64.dp),
) { page ->
    // page content
}PagerSnippets.kt

top と bottom の値を設定すると、VerticalPager で同様の効果を得ることができます。値 32.dp はここでは例としてのみ使用されています。各パディングディメンションは任意の値に設定できます。

スクロール動作をカスタマイズする

デフォルトの HorizontalPager コンポーザブルと VerticalPager コンポーザブルは、スクロールジェスチャーがページャーでどのように機能するかを指定します。ただし、pagerSnapDistance や flingBehavior などのデフォルトはカスタマイズして変更できます。

スナップ距離

デフォルトでは、HorizontalPager と VerticalPager は、スワイプ操作で一度にスクロールできるページの最大数を 1 ページに設定します。変更するこの pagerSnapDistance 日付: flingBehavior:

val pagerState = rememberPagerState(pageCount = { 10 })

val fling = PagerDefaults.flingBehavior(
    state = pagerState,
    pagerSnapDistance = PagerSnapDistance.atMost(10)
)

Column(modifier = Modifier.fillMaxSize()) {
    HorizontalPager(
        state = pagerState,
        pageSize = PageSize.Fixed(200.dp),
        beyondViewportPageCount = 10,
        flingBehavior = fling
    ) {
        PagerSampleItem(page = it)
    }
}PagerSnippets.kt

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose の ConstraintLayout
グラフィック修飾子
CoordinatorLayout を Compose に移行する

修飾子のリスト

Flow レイアウト