ViewPager2 양 옆 미리보기

다음과 같이 viewpager2에 확장함수를 구성해두고 필요할때 적용하면 된다.

#Extension.kt
fun ViewPager2.setDefaultPageTransformer() {
    CompositePageTransformer().apply { 
        addTransformer(MarginPageTransformer(8))
        val offsetBetweenPages = resources.getDimensionPixelOffset(R.dimen.offsetBetweenPages).toFloat()
        addTransformer { page, position ->
            val myOffset = position * -(2 * offsetBetweenPages)
            if (position < -1) {
                page.translationX = -myOffset
            } else if (position <= 1) {
                // Paging 시 Y축 Animation 배경색을 약간 연하게 처리
                val scaleFactor = 0.8f.coerceAtLeast(1 - abs(position))
                page.translationX = myOffset
                page.scaleY = scaleFactor
                page.alpha = scaleFactor
            } else {
                page.alpha = 0f
                page.translationX = myOffset
            }
        }
    }.let { transform ->
        this.setPageTransformer(transform)
    }
}

그리고 diemen은 다음과 같이 구성되어있다

<resources>
    <!--  item_view 간의 양 옆 여백을 상쇄할 값   -->
    <dimen name="offsetBetweenPages">30dp</dimen>
    <!--  각 페이지의 양 옆 margin  -->
    <dimen name="pageMargin">40dp</dimen>
</resources>

pageMargin의 경우 화면의 양옆에 마진값(start/end)로 주면된다.

적용후 모습은 위와 같다.