ViewPager switching animation

Simple use of ViewPager

First of all, ViewPager is a page switching component. It is often used with Fragment, and it can also be used to carry View. Currently, there are ViewPager and ViewPager2. This time, ViewPager2 is used to simply implement a ViewPager for switching pictures.

The first step is to create an empty Activity and add ViewPager to the layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    tools:context=".TestViewPagerActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/testViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Create ViewPagerAdapter and set

class TestViewPagerActivity : AppCompatActivity() {
    
    

    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_pager)
        viewPager = findViewById(R.id.testViewPager)
        viewPager.adapter = ViewPagerAdapter(this)
    }


    class ViewPagerAdapter(val context: Context) : RecyclerView.Adapter<ViewPagerHolder>() {
    
    

        private val mDataList: MutableList<String> by lazy {
    
    
            mutableListOf<String>().apply {
    
    
                add("https://img0.baidu.com/it/u=1697148622,3160789974&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=938")
                add("https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
                add("https://img0.baidu.com/it/u=981218435,2998857702&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675")
                add("https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500")
                add("https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
            }
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewPagerHolder {
    
    
            return ViewPagerHolder(LayoutInflater.from(context).inflate(R.layout.view_pager_item_layout, parent, false))
        }

        override fun onBindViewHolder(holder: ViewPagerHolder, position: Int) {
    
    
            val options = RequestOptions.bitmapTransform(RoundedCorners(DensityUtil.dip2px(context, 16)))
            Glide.with(context).load(mDataList[position]).apply(options).into(holder.image)
        }

        override fun getItemCount(): Int {
    
    
            return mDataList.size
        }

    }

    class ViewPagerHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    
    
        val image: ImageView = itemView.findViewById(R.id.image)
    }
}

ViewPager2 internally uses RecyclerView as a container, so creating Adapter and ViewHolder only needs to refer to RecyclerView. The effect is as follows:

insert image description here

add animation

We can see that the above switching effect is very ordinary, so to add animation to ViewPager, you need to use a method.
insert image description here
This method sets a PageTransformer, so what is PageTransformer? It is actually an interface

in which the Page parameter in the comment The translation is as follows: the position of the page relative to the middle position of the current page navigator. 0 is front and center. 1 is one full page to the right, -2 is two pages to the left. The min/max observed value depends on how many pages we keep, which depends on offscreenPageLimit.

Therefore, we implement this interface, rewrite this method, and set properties on the page through the value of position. For example, we want to achieve the following effect. When a picture slides out of the screen, it will be scaled to 80% of its original size and its transparency will be changed to its original value. 50%, realized as follows:

class ScaleAndAlphaTransformer : ViewPager2.PageTransformer {
    
    
    override fun transformPage(page: View, position: Float) {
    
    
        val minScale = 0.8f
        val minAlpha = 0.5f
        
        // 我们只操作可见页面（当前page与其前一个或者后一个页面），因此对position过滤，
        var pos = position
        if (pos < -1) {
    
    
            pos = -1f
        }
        if (pos > 1) {
    
    
            pos = 1f
        }

        val tempScale = if (pos < 0) 1 + pos else 1 - pos
        val scaleValue = minScale + tempScale * (1 - minScale)
        page.scaleX = scaleValue
        page.scaleY = scaleValue

        val alphaValue = minAlpha + tempScale * (1 - minAlpha)
        page.alpha = alphaValue
    }
}

Schematic disassembly

viewPager.setPageTransformer(ScaleAndAlphaTransformer())

The effect is as follows:
insert image description here
Other effects can be set according to the value of position, as long as you understand the change of the value of position.