android 3d翻转动画 viewpage,利用ViewPager实现3D画廊效果及其图片加载优化

前言

对于ViewPager，相信大家都已经很熟悉了，在各种切换场景比如Fragment切换、选项卡的切换或者顶部轮播图片等都可以用ViewPager去实现。那么本篇文章带来ViewPager的一种实现效果：3D画廊。直接上图来看：

ic.gif

从上面的图我们可以看出，整个页面分成三个部分，中间的是大图，正中地显示给用户；而两边的是侧图，而这两幅图片又有着角度的旋转，与大图看起来不在同一平面上，这就形成了3D效果。接着拖动页面，侧面的图慢慢移到中间，这个过程也是有着动画的，包括了图片的旋转、缩放和平移。在欣赏了上面的效果后，话不多说，我们来看看是怎样实现的。

实现原理

1、利用ViewGroup的clipChildren属性。大家可能对ClipChildren属性比较陌生，我们先来看看官方文档对该属性的描述：

Defines whether a child is limited to draw inside of its bounds or not. This is useful with animations that scale the size of the children to more than 100% for instance. In such a case, this property should be set to false to allow the children to draw outside of their bounds. The default value of this property is true.

上面的大意是说，ViewGroup的子View默认是不会绘制边界意外的部分的，倘若将clipChildren属性设置为false，那么子View会把自身边界之外的部分绘制出来。

那么这个属性跟我们的ViewPager又有什么关联呢？我们可以这样想，ViewPager自身是一个ViewGroup，如果将它的宽度限制为某一个大小比如200dp(我们通常是match_parent)，这样ViewPager的绘制区域就被限制在了240dp内(此时绘制的是ViewA)，此时我们将它的父容器的clipChildren属性设置为false，那么ViewPager未绘制的部分就会在两旁得到绘制(此时绘制的是ViewA左右两边的Item View)。

那么我们的布局文件可以这样写，activity_main.xml:

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipChildren="false">

android:id="@+id/viewpager"

android:layout_width="240dp"

android:layout_height="match_parent"

android:clipChildren="false"

android:layout_centerInParent="true">

接着，我们需要为每个Item创建一个布局，这个很简单，就是一个ImageView，新建item_main.xml文件：

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/iv"

android:layout_width="240dp"

android:layout_height="360dp"

android:layout_centerInParent="true"/>

布局文件写好后，我们接着完成MainActivity.java和MyPagerAdapter.java的内容：

MainActivity.java:

public class MainActivity extends AppCompatActivity {

//这里的图片从百度图片中下载，图片规格是960*640

private static final int[] drawableIds = new int[]{R.mipmap.ic_01,R.mipmap.ic_02,R.mipmap.ic_03,

R.mipmap.ic_04,R.mipmap.ic_05,R.mipmap.ic_06,R.mipmap.ic_07,R.mipmap.ic_08,R.mipmap.ic_09,

R.mipmap.ic_10,R.mipmap.ic_11,R.mipmap.ic_12};

private ViewPager mViewPager;

private RelativeLayout mRelativeLayout;

private MyPagerAdapter mPagerAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initViews();

}

private void initViews() {

mViewPager = (ViewPager) findViewById(R.id.viewpager);

mPagerAdapter = new MyPagerAdapter(drawableIds,this);

mViewPager.setAdapter(mPagerAdapter);

}

}

MyPagerAdapter.java:

public class MyPagerAdapter extends PagerAdapter {

private int[] mBitmapIds;

private Context mContext;

public MyPagerAdapter(int[] data,Context context){

mBitmapIds = data;

mContext = context;

}

@Override

public int getCount() {

return mBitmapIds.length;

<