【Jetpack Compose】HorizontalPagerのスワイプ判定を調整する

この記事はand factory.inc Advent Calendar 2023 16日目の記事です。

はじめに

今までAndoridViewではUIを実現するために諸々手間がかかっていたものが
JetpackComposeを利用することで一気に楽になる経験を多くされていると思います。

その中でもPagerの実装は非常に簡単になったと実感しており、
以下のコード(HorizontalPager)だけでPagerが実装できると知った時は私自身大変驚きました😅

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerSample() {
    // ページの総数
    val state = rememberPagerState { 10 }
    HorizontalPager(
        state = state,
        modifier = Modifier.fillMaxSize(),
    ) { page ->
        Box(
            modifier = Modifier
                .padding(10.dp)
                .background(Color.Blue)
                .fillMaxWidth()
                .aspectRatio(1f),
            contentAlignment = Alignment.Center
        ) {
            // ページ毎のコンテンツを記述
            // pageでindexは渡ってくるのでそこで切り替えれば良い
            Text(text = page.toString(), fontSize = 32.sp)
        }
    }
}

これだけで書けてしまいます、すごい簡単わかりやすい

今までの
Activityのxmlの中にViewPagerの枠をとって、、FragmentPagerAdapter用意して、、あ、ページ毎にFragmentも作らなきゃ…！みたいな手間がなくなって嬉しい限りですホントに🙌

本題

そんな感じで簡潔かつ状態も扱いやすいHorizontalPager君ですが、
ビルドして実際に触ってみたの違和感としてページのスワイプ判定が厳しく
従来のAndroidViewでの操作感との差を考えたときに
UX観点から導入、もしくはComposeへのリプレイスを躊躇っていられる方もいらっしゃるのではないでしょうか？

私自身そんな思いを抱えていまして、なんとか解決できないかとドキュメントを漁っていたところ
流石はJetpackComposeといったところでそれ用のパラメーターが用意されていました。

それがこのflingBehaviorsnapPositionalThresholdというパラメーターです。

ざっくり説明するとページのスワイプを判定する割合を設定するパラメーターで初期値だと0.5f、つまり50%が設定されています。
だからスワイプ判定が厳しく感じていた、というわけです。

なので、この割合を調整してあげるとAndroidViewと似たような、もしくは任意のスワイプ範囲を設定してあげることができます。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerSample() {
    // ページの総数
    val state = rememberPagerState { 10 }
    HorizontalPager(
        state = state,
        modifier = Modifier.fillMaxSize(),
        // ここに追加,今回は20%
        flingBehavior = PagerDefaults.flingBehavior(state, snapPositionalThreshold = 0.2f),
    ) { page ->
        Box(
            modifier = Modifier
                .padding(10.dp)
                .background(Color.Blue)
                .fillMaxWidth()
                .aspectRatio(1f),
            contentAlignment = Alignment.Center
        ) {
            Text(text = page.toString(), fontSize = 32.sp)
        }
    }
}

おわりに

以上、ComposeにおけるPagerでのスワイプ判定の調整方法でした。
Pager+Tab等で実装の機会はたくさんあると思うのでお役立ちできれば幸いです。