ViewPager2 오버랩 화면전환 (pageTransformer)

viewpager2로 화면 전환 할 때 일종의 오버랩 형식으로 구현할 필요가 있어서 찾아보았다.

 

 

기존의 viewpager2를 구현하는 방법은 전부 같고, pageTransformer만 커스텀하면 된다.

class OverlapPageTransformer : ViewPager2.PageTransformer {
    override fun transformPage(view: View, position: Float) {
        val pageWidth = view.width

        when {
            position < -1 -> { // view가 왼쪽 뒷 배경으로 넘어갔을 때
                view.apply {
                    alpha = MIN_FADE
                }
            }
            position < 0 -> { // view가 뒷 배경으로 넘어갈 때
                view.apply {
                    alpha = 1 + position * (1 - MIN_FADE)
                    translationX = -pageWidth * MAX_SCALE * position
                    ViewCompat.setTranslationZ(this, position)
                    val scaleFactor =
                        (MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 - Math.abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
            }
            position == 0f -> { // 최상단 view
                view.apply {
                    alpha = 1f
                    translationX = 0f
                    ViewCompat.setTranslationZ(this, 0f)
                    scaleX = MAX_SCALE
                    scaleY = MAX_SCALE
                }
            }
            position <= 1 -> {
                view.apply {
                    alpha = 1 - position * (1 - MIN_FADE)
                    translationX = pageWidth * MAX_SCALE * -position
                    val scaleFactor = (MIN_SCALE
                            + (MAX_SCALE - MIN_SCALE) * (1 - Math.abs(position)))
                    ViewCompat.setTranslationZ(this,-position)
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
            }
            else -> {
                view.apply {
                    alpha = MIN_FADE
                }
            }
        }
    }

    companion object {
        private const val MIN_SCALE = 0.6f // 배경 뷰 크기
        private const val MAX_SCALE = 0.8f // 최상단 뷰 크기
        private const val MIN_FADE = 0.8f // 투명도
    }
}

 

Reference: stackoverflow.com/questions/25439543/how-to-achieve-a-viewpager-with-previous-and-next-page-shown-and-bigger-focused