ViewPager2撸个3D画廊_viewpage2实现画廊效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35300111/article/details/104638864

废话不多说，先看效果图

Part.1

Google 在androidx组件包里增加了一个新的组件ViewPager2，目前已经更新了两个 alpha 版本了。那么，和之前的ViewPager组件相比，有什么改进呢？查看官方文档，有下面一段话：

大致意思可以理解为ViewPager2是用来替换ViewPager的，解决了ViewPager 的多数痛点，包括 RTL 布局支持，垂直方向滚动，可修改的 Fragment 集合等等。

Part.2

前面也提到了ViewPager2是增加在androidx包里面的，所以要使用ViewPager2之前需要把项目转成androidx项目，然后在gradle文件下导入Viewpager2

dependencies {
 implementation "androidx.viewpager2:viewpager2:1.0.0"
}

导入完成之后在页面的xml文件里面声明一个Viewpager2控件

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

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

</LinearLayout>

最后只需要在Activity里面拿到控件，直接调用setAdapter方法即可完成ViewPager2简单的使用

这里需要注意一下item_viewpager.xml里面的宽高需要设置match_parent，否则运行之后会提示 "Pages must fill the whole ViewPager2 (use match_parent)"

mViewPager2.setAdapter(new RecyclerView.Adapter<ViewHolder>() { 
        @NonNull 
        @Override 
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {      
        //这里需要注意一下item_viewpager.xml里面的宽高需要设置match_parent      
        //否则会提示 Pages must fill the whole ViewPager2 (use match_parent) 
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_viewpager,parent, false); 
        return new ViewHolder(view); 
    }
        @Override 
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {               
        holder.mImageView.setImageResource(mPic[position]); 
    } 
        @Override 
    public int getItemCount() { 
        return 5; 
    } 
});

这样就已经完成了对ViewPager2的基本调用，是不是跟ViewPager比起来代码更加简洁，更方便？

运行一下看下效果~~~~~~

嗯~纵享丝滑，非常完美

Part.3

ViewPager2默认是横向滑动的，既然文档里面说了支持垂直滑动，那我必须得找出来瞜一眼，翻了一下源码，发现他也是利用LinearLayoutManager实现的横向纵向滑动，而且跟RecyclerView很相似

接下来直接调用setOrientation（）试试看能不能成功~

mViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

emmmmm......这好像比RecyclerView还方便...（无话可说）

Part.4

回到主题，继续撸我们的3D画廊，上面的动图看到的效果都是直接滑动，干脆利落，非常简洁，但是有时候我们就是需要花里胡哨一点，搞点骚操作，要的就是高大上~...

要实现3D画廊效果，需要用到一个叫插值器的东西，把代码贴一下，其实很简单

private static final TimeInterpolator sInterpolator = new TimeInterpolator() {    @Override    public float getInterpolation(float input) {      if (input < 0.7) {        return input * (float) pow(0.7, 3) * MAX_ROTATE_Y;      } else {        return (float) pow(input, 4) * MAX_ROTATE_Y;      }    }  };    public void transformPage(View view, float position) {    view.setPivotY(view.getHeight() / 2);    if (position < -1) { // [-Infinity,-1)      // This page is way off-screen to the left.      view.setPivotX(0);      view.setRotationY(90);    } else if (position <= 0) { // [-1,0]      view.setPivotX(pageWidth);      view.setRotationY(-sInterpolator.getInterpolation(-position));    } else if (position <= 1) { // (0,1]      view.setPivotX(0);      view.setRotationY(sInterpolator.getInterpolation(position));    } else { // (1,+Infinity]      // This page is way off-screen to the right.      view.setPivotX(0);      view.setRotationY(90);    }  }

定义好插值器之后，依然简单粗暴的直接用ViewPager2调用setPageTransformer（）

mViewPager2.setPageTransformer(new StereoPagerTransformer(getResources().getDisplayMetrics().widthPixels));

run一下，看下效果~~~~

非常奈斯，打完收工~

Part.5

源码地址：

https://github.com/wayuhan/ViewPager2Flip

个人感觉ViewPager2比ViewPager要方便太多了，而且前者更有比RecyclerView更优秀的苗子，所以还是值得去了解一下滴，

说回文章主题，想像一下把图片换成女朋友的照片，再加上一个炫酷的背景音乐，再加个定时自动滚动，会不会吊炸天？再或者把插值器改一下，换成垂直滚动，子布局内容换成视频播放器，是不是已经很接近那个啥音APP了？~~

哈赛~