viewpage2 实现中间大两边小

viewpage.png

思路 运用viewpage2 加transformer实现的
首先依赖

    implementation "androidx.viewpager2:viewpager2:1.0.0"

需要注意两个点 一个xml里面的

 android:clipChildren="false"

还有一个是viewpage的setpageMargin在viewpage2里面也要通过transform来实现 但是设置两个transform会被覆盖 所以我把MarginPageTransformer的源码复制出来到自己的Transformer

代码如下:
activity

package com.gtxc.viewpagedemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.core.view.marginLeft
import androidx.viewpager2.widget.MarginPageTransformer
import kotlinx.android.synthetic.main.activity_main.*

/**
 * https://stackoverflow.com/questions/56114430/android-viewpager2-setpagemargin-unresolved
 */
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPage.adapter=ViewpageAdapter(this)
        viewPage.setClipChildren(false);
        viewPage.setOffscreenPageLimit(3)
      //  viewPage.setPageTransformer(MarginPageTransformer(40))
        viewPage.setPageTransformer(ViewPageTransform(viewPage))

    }


 fun dip2px(value :Int):Int{
     val scale=resources.displayMetrics.density
     return (value*scale+0.5f).toInt()
 }
}

adapter

package com.gtxc.viewpagedemo

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView

class ViewpageAdapter(val context: Context) : RecyclerView.Adapter<ViewpageAdapter.ViewHolder>() {


    override fun getItemCount(): Int {
      return Int.MAX_VALUE
    }


    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val imageView = itemView.findViewById<ImageView>(R.id.image)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {

    }

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

}

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:clipChildren="false"
    android:orientation="vertical"
    tools:context=".MainActivity">

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPage"
    android:clipChildren="false"
    android:overScrollMode="never"
android:layout_marginLeft="40dp"
    android:layout_marginRight="40dp"
    android:layout_marginTop="30dp"
    android:layout_width="match_parent"
    android:layout_height="400dp"/>

</LinearLayout>

item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
    android:background="@color/colorPrimary"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

transform

package com.gtxc.viewpagedemo

import android.util.Log
import android.view.View
import androidx.viewpager2.widget.ViewPager2
import kotlin.math.abs

/**
 * https://blog.csdn.net/chen930724/article/details/50466199
 */
class ViewPageTransform(val viewpae2: ViewPager2) : ViewPager2.PageTransformer {
    val default =14/15f
    val default_trans = 3.6f
    override fun transformPage(page: View, position: Float) {
        // MarginPageTransformer的源码
        val offset: Float = 40 * position
        if (viewpae2.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {
            page.translationX = if (isRtl1()) -offset else offset
        } else {
            page.translationY = offset
        }
//        [-∞ , -1)  :
//             表示左边 的View 且已经看不到了
//        [-1 ,   0]  :
//             表示左边的 View ,且可以看见
//        ( 0 ,   1]  :
//             表示右边的VIew , 且可以看见了
//        ( 1 , -∞)  :     
//             表示右边的 View 且已经看不见了

        when {
            position<=-1 -> {
                Log.e(" ViewPageTransform","11111")
                page.scaleX =default
                page.scaleY =default
                page.translationX=default_trans
            }
            position<=0 -> {
                Log.e("ViewPageTransform","22222222")

                page.scaleX = 1+position/15
                page.scaleY = 1+position/15
                page.translationX=(0-position)*default
             //   page.translationY=(0-position)*default

            }
            position<=1 -> {
                Log.e("ViewPageTransform","33333333")

                page.scaleX = 1-position/15
                page.scaleY =  1-position/15
                page.translationX= (0-position)*default

            }
            else -> {
                Log.e("ViewPageTransform","4444444444444")
                page.scaleX = default
                page.scaleY = default
                page.translationX=default_trans

            }
        }

    }


    fun isRtl1(): Boolean {
        return viewpae2.getLayoutDirection() == 1
    }
}