［Jetpack Compose］ViewPagerのOverscrollエフェクトを消す

改善前

以下のようにViewPagerを実装すると、先頭の要素を左側にスワイプした場合、また最後尾の要素の右側にスワイプした場合、ViewPagerのItemを伸び縮みさせるOverscrollエフェクトが表示される。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomViewPager() {
    val pagerCount = 3
    HorizontalPager(pageCount = pagerCount) { index ->
        val number = index + 1
        Card(modifier = Modifier.size(256.dp)) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(
                    text = number.toString(),
                    fontSize = 32.sp,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }
    }
}

改善方法

Overscrollエフェクトの設定はCompositionLocalProviderで指定されている。OverscrollエフェクトはCompositionLocalProviderのLocalOverscrollConfigurationをnullに設定することで無効化できる。

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CustomViewPager() {
    val pagerCount = 3
    CompositionLocalProvider(
        LocalOverscrollConfiguration provides null
    ) {
        HorizontalPager(pageCount = pagerCount) { index ->
            val number = index + 1
            Card(modifier = Modifier.size(256.dp)) {
                Box(modifier = Modifier.fillMaxSize()) {
                    Text(
                        text = number.toString(),
                        fontSize = 32.sp,
                        modifier = Modifier.align(Alignment.Center)
                    )
                }
            }
        }
    }
}

参考記事

https://developer.android.com/jetpack/compose/compositionlocal?hl=ja#intro