android实现ViewPager.PageTransformer动画效果

step1:

package com.example.myapplication




import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2
import androidx.viewpager2.widget.ViewPager2.ORIENTATION_VERTICAL
import java.lang.Math.abs

class MainActivity : AppCompatActivity() {
    lateinit var verticalViewPager : ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        verticalViewPager = findViewById(R.id.viewPager2)

        //세로 viewpager 생성
        createVerticalView(getCardViewList())
    }

    private fun createVerticalView(data : ArrayList<Int>){
        verticalViewPager.orientation = ORIENTATION_VERTICAL
        val adapter = VerticalViewPagerAdapter(data)
        verticalViewPager.adapter = adapter

        with(verticalViewPager){
            clipToPadding = false
            clipChildren = false
            offscreenPageLimit = 1
        }
        verticalViewPager.setPageTransformer(SwipeTransformer())
    }

    inner class SwipeTransformer : ViewPager2.PageTransformer{

        private val screenHeight = resources.displayMetrics.heightPixels //폰의 높이를 가져옴
        private val pageMarginPy = resources.getDimensionPixelOffset(R.dimen.pageMargin)
        private val offsetPy = resources.getDimensionPixelOffset(R.dimen.offset)
        private val pageHeight = screenHeight - pageMarginPy - offsetPy

        private val MIN_SCALE = 0.75f
        private val MIN_ALPHA = 0.5f
        override fun transformPage(page: View, position: Float) {
            val scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - abs(position))

            page.apply {
                if (position < -1) { // [-Infinity,-1)
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                    alpha = 0f
                } else if (position <= 0) { // [-1,0]
                    translationY = pageHeight * -position

                    scaleX = scaleFactor
                    scaleY = scaleFactor
                    alpha =
                        (MIN_ALPHA + (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                } else if (position <= 1) { // (0,1]
                    alpha = 1f
                    scaleX = 1f
                    scaleY = scaleFactor

                    val viewPager = page.parent.parent as ViewPager2
                    val offset = position * -(2 * offsetPy + pageMarginPy)

                    if (viewPager.orientation == ORIENTATION_VERTICAL) {
                        page.translationY = offset
                    } else {
                        page.translationX = offset
                    }

                } else { // (1,+Infinity]
                    alpha = 0f
                    scaleX = MIN_SCALE + (1 - MIN_SCALE) * (1 - abs(position))
                    scaleY = 1f
                }
            }
        }
    }

    //mock-up data
    private fun getCardViewList(): ArrayList<Int> {
        return arrayListOf<Int>(
            android.R.drawable.ic_dialog_email,
            android.R.drawable.ic_dialog_map,
            android.R.drawable.ic_menu_sort_by_size,
            android.R.drawable.ic_media_pause
        )
    }
}

step2:

package com.example.myapplication


import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView

class VerticalViewPagerAdapter(var list : ArrayList<Int>) : RecyclerView.Adapter<VerticalViewPagerAdapter.PagerViewHolder>(){
    inner class PagerViewHolder(parent : ViewGroup): RecyclerView.ViewHolder
        (LayoutInflater.from(parent.context).inflate(R.layout.card_item_view, parent, false)) {
        val card_image = itemView.findViewById<ImageView>(R.id.iv_card_image)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerViewHolder = PagerViewHolder(parent)

    override fun getItemCount(): Int = list.size

    override fun onBindViewHolder(holder: PagerViewHolder, position: Int) {
        holder.card_image.setImageResource(list[position])
    }
}

step3:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

step4:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="30dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <ImageView
            android:id="@+id/iv_card_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:adjustViewBounds="true"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/stat_notify_error" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

end