Android 用原生ViewPager控件实现卡片翻动效果

版权声明：请尊重原创，侵权必究 如果想转载或者讨论问题，可以添加微信号 WJ1118825 进行授权获取或者共同交流学习 ，转载请注明原文链接并设置超链接跳转功能，本文链接： https://blog.csdn.net/wjj1996825/article/details/81172396

先放一张效果图：

想要实现这样的效果其实并不是太难，需要对ViewPager的一些细节属性更深入的了解和认识，下面介绍下一个小demo的实现过程：
第一步创建卡片viewpager适配器的itemview的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@drawable/bitmap">   <!-- 说明：这里的 android:background="@drawable/bitmap" 就是你自己放置想要的方形卡片效果的背景图片 --> 


    <ImageView
        android:id="@+id/home_viewpage_item_img"
        android:paddingBottom="@dimen/dp_82"
        android:paddingTop="@dimen/dp_82"
        android:paddingLeft="@dimen/dp_44"
        android:paddingRight="@dimen/dp_44"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>

第二步：创建适配器：

class CardAdapter(var context: Context) : PagerAdapter() {
    val horoscopestrImgs = intArrayOf(R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher)

    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view === `object`
    }

    override fun getCount(): Int {
        return 12 * 30
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val view = LayoutInflater.from(context).inflate(R.layout.home_viewpage_item, null)


        view.home_viewpage_item_img.setImageResource(horoscopestrImgs.get(position%12))

        container.addView(view)
        return view
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)

    }
}

第三步：创建放viewpager控件的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#fff"
    android:layout_height="match_parent" >


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:overScrollMode="never"
        android:clipToPadding="false"
        android:paddingBottom="@dimen/dp_240"
        android:paddingLeft="50dp"
        android:paddingRight="50dp"
        android:paddingTop="@dimen/dp_60" />

</RelativeLayout>

第四步：创建viewpager滑动切换动画效果：

class CardTransformer(var context: Context) :ViewPager.PageTransformer{
    val TAG = "CardTransformer"
    private val MAX_SCALE = 1.0f
    private val MIN_SCALE = 0.85f//0.85f
    var animator:ObjectAnimator?=null


    override fun transformPage(page: View, position: Float) {
        //设置了内间距   有0.15的偏差
         var pos=position -0.15.toFloat()

        if ( pos <= 1) {
            val scaleFactor = MIN_SCALE + (1 - Math.abs(pos)) * (MAX_SCALE - MIN_SCALE)

            page.scaleX = scaleFactor  //缩放效果
            if (pos > 0) {
                page.translationX = -scaleFactor * 2
            } else if (pos < 0 && pos > -1) {
                page.translationX = scaleFactor * 2
            }
            page.scaleY = scaleFactor


        } else {
            page.scaleX = MIN_SCALE
            page.scaleY = MIN_SCALE
        }

    }
}

第五步：开始调用实现卡片效果的关键代码：

class MainActivity : Activity() {

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


        //设置ViewPager中两页之间的距离
        // viewpager?.setPageMargin(80)

        //自定义ViewPager的页面切换动画
        viewpager?.setPageTransformer(false, CardTransformer(applicationContext))
        //设置viewpager预加载的页数
        viewpager?.offscreenPageLimit = 6
        viewpager?.currentItem = 12 * 10
        viewpager?.setAdapter(CardAdapter(this))
    }


}

到这里就基本实现了想要的卡片滑动切换和展示效果了！