Android ViewPager打造3D画廊

   <p style="text-align:center"><img src="https://simg.open-open.com/show/41a661738f23b540a7d6a704b8e54287.jpg"></p>    <p style="text-align:center">41A661738F23B540A7D6A704B8E54287.jpg</p>    <p>要实现如上图的功能，需要以下几点：</p>    <ul>     <li> <p>使用ViewPage</p> </li>     <li> <p>设置PageTransformer</p> </li>     <li> <p>获取图片倒影</p> </li>    </ul>    <h2><strong>ViewPager是来自android.support.v4的API</strong></h2>    <p>来自官方的介绍：</p>    <p>Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.</p>    <p>大概翻：ViewPager是一种允许用户左右翻动页面浏览数据的布局管理器，通过应用一个实现了PagerAdapter的实现类来生成展示页面。</p>    <p>通过上面的解释可以知道，对于ViewPager的使用，和ListView类似，也是需要Adapter来管理每个ITEM的。</p>    <p>让我们来了解一下PagerAdapter的使用</p>    <p>要实现PagerAdapter，必须至少实现以下四个方法：</p>    <ul>     <li>public int getCount()</li>    </ul>    <ul>     <li> <p>public Object instantiateItem(ViewGroup container, int position)</p> </li>     <li> <p>public void destroyItem(ViewGroup container, int position, Object object)</p> </li>     <li> <p>public boolean isViewFromObject(View view, Object object)</p> </li>    </ul>    <p><strong>方法的解释</strong></p>    <ul>     <li> <p>放回当前List中的Page数量的</p> </li>     <li> <p>public Object instantiateItem(ViewGroup container, int position)<br> 先从第二个方法说起，这个方法是负责向ViewGroup也就是ViewPager中添加新的页面，并返回一个继承自Object的key，这个key将会在第三个方法destroyItem和第四个方法isViewFromObject中作为参数调用。代码如下写：</p> </li>    </ul>    <pre>  <code class="language-java">@Override              public Object instantiateItem(ViewGroup container, int position) {                  ImageView imageView=imageViewList.get(position);                  container.addView(imageView,position);                  return imageView;              }</code></pre>    <ul>     <li> <p>public void destroyItem(ViewGroup container, int position, Object object)</p> <p>该方法负责从ViewGroup中移除对应position中的page</p> </li>    </ul>    <pre>  <code class="language-java">@Override              public void destroyItem(ViewGroup container, int position, Object object) {                  container.removeView(imageViewList.get(position));              }</code></pre>    <ul>     <li>public boolean isViewFromObject(View view, Object object)</li>    </ul>    <p>确定instantiateItem返回的特定key 对象是否与page View有关联。由于instantiateItem中可以以自身page为key返回，所以在这里就可以这样写：</p>    <pre>  <code class="language-java">@Override              public boolean isViewFromObject(View view, Object object) {                  return view==object;              }</code></pre>    <h2><strong>设置PageTransformer</strong></h2>    <p>PageTransformer是ViewPager的一个公共成员接口，用于设置当一个页面滑入和滑出的过度特效，当然，由于是通过属性动画来设置的，所以设置的pagetransformer在Android3.0以下会被忽略。</p>    <p>关于实现该接口，只需要实现一个方法即可：</p>    <p>public void transformPage(View page, float position);</p>    <p>对于参数position，需要好好说明一下：</p>    <p>position的取值有如下说明：</p>    <p>position是指的是页面相对于中间页面的位置参数，根据位置不同，0的时候在中间最前面，1的时候页面完全在右边，-1的时候页面完全在左边。如下图所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f1bd1ae459fec5ac8ea29628d6a49aae.jpg"></p>    <p style="text-align:center">89D4FD01-3365-459A-AD51-30476A28F274.png</p>    <p>那么要实现上面的效果要怎么做呢？</p>    <p>代码如下：</p>    <p>MyTransformation.java</p>    <pre>  <code class="language-java">public class MyTransformation implements ViewPager.PageTransformer {        private static final float MIN_SCALE=0.85f;      private static final float MIN_ALPHA=0.5f;      private static final float MAX_ROTATE=30;      private Camera camera=new Camera();      @Override      public void transformPage(View page, float position) {          float centerX=page.getWidth()/2;          float centerY=page.getHeight()/2;          float scaleFactor=Math.max(MIN_SCALE,1-Math.abs(position));          float rotate=20*Math.abs(position);          if (position<-1){            }else if (position<0){              page.setScaleX(scaleFactor);              page.setScaleY(scaleFactor);              page.setRotationY(rotate);          }else if (position>=0&&position<1){              page.setScaleX(scaleFactor);              page.setScaleY(scaleFactor);              page.setRotationY(-rotate);          }          else if (position>=1) {              page.setScaleX(scaleFactor);              page.setScaleY(scaleFactor);              page.setRotationY(-rotate);          }      }  }</code></pre>    <p>然后</p>    <pre>  <code class="language-java">viewPager.setPageTransformer(true,new MyTransformation());</code></pre>    <p><strong>遇到的问题 需要注意</strong></p>    <ul>     <li> <p>为解决不在ViewPager中间页面被剪掉的问题：</p> <p>需要在ViewPager和其父容器中设置clipChildren为false</p> </li>    </ul>    <pre>  <code class="language-java"><?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:orientation="vertical"      android:id="@+id/activity_main"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:clipChildren="false"      android:layerType="software"      android:background="@android:color/black"      tools:context="com.example.evanzeng.viewpagertest.MainActivity">        <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="Hello World!"          app:layout_constraintBottom_toBottomOf="@+id/activity_main"          app:layout_constraintLeft_toLeftOf="@+id/activity_main"          app:layout_constraintRight_toRightOf="@+id/activity_main"          app:layout_constraintTop_toTopOf="@+id/activity_main" />      <android.support.v4.view.ViewPager          android:id="@+id/viewPager"          android:layout_width="wrap_content"          android:layout_height="400dp"          android:layout_gravity="center"          android:clipChildren="false"          >      </android.support.v4.view.ViewPager>  </LinearLayout></code></pre>    <ul>     <li> <p>(2)为解决触摸滑动ViewPager左右两边的页面无反应的问题：</p> <p>需要为ViewPager的父容器设置OnTouchListener，将触摸事件传递给ViewPager</p> </li>    </ul>    <pre>  <code class="language-java">findViewById(R.id.activity_main).setOnTouchListener(new View.OnTouchListener() {              @Override              public boolean onTouch(View view, MotionEvent motionEvent) {                  return viewPager.dispatchTouchEvent(motionEvent);              }          });</code></pre>    <h2><strong>获取图片倒影</strong></h2>    <pre>  <code class="language-java">public class ImageUtil {      public static Bitmap getReverseBitmapById(int resId, Context context){          Bitmap sourceBitmap= BitmapFactory.decodeResource(context.getResources(),resId);          Matrix matrix=new Matrix();          matrix.setScale(1,-1);          Bitmap inverseBitmap=Bitmap.createBitmap(sourceBitmap,0,sourceBitmap.getHeight()/2,sourceBitmap.getWidth(),sourceBitmap.getHeight()/3,matrix,false);          Bitmap groupbBitmap=Bitmap.createBitmap(sourceBitmap.getWidth(),sourceBitmap.getHeight()+sourceBitmap.getHeight()/3+60,sourceBitmap.getConfig());          Canvas gCanvas=new Canvas(groupbBitmap);          gCanvas.drawBitmap(sourceBitmap,0,0,null);          gCanvas.drawBitmap(inverseBitmap,0,sourceBitmap.getHeight()+50,null);          Paint paint=new Paint();          Shader.TileMode tileMode= Shader.TileMode.CLAMP;          LinearGradient shader=new LinearGradient(0,sourceBitmap.getHeight()+50,0,                  groupbBitmap.getHeight(), Color.BLACK,Color.TRANSPARENT,tileMode);          paint.setShader(shader);          paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));          gCanvas.drawRect(0,sourceBitmap.getHeight()+50,sourceBitmap.getWidth(),groupbBitmap.getHeight(),paint);          return groupbBitmap;      }  }</code></pre>    <p> </p>    <p>来自：http://www.jianshu.com/p/851c387f0a83</p>    <p> </p>