ViewPager实现画廊

1,普通样式

• 1,效果图
  

---

• 2,布局文件
  clipChild被设置为true,需要在根布局和ViewPager中设为false.

<?xml version="1.0" encoding="utf-8"?><LinearLayout    android:id="@+id/ll_gallery_outer"    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    android:clipChildren="false">    <android.support.v4.view.ViewPager        android:id="@+id/vp_gallery_vp"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:clipChildren="false"        android:layout_margin="50dp"/></LinearLayout>

• 3,主要代码

/** * Created by  on 2017/11/8 * <p> * 普通画廊 */public class GalleryActivity2 extends AppCompatActivity {    private LayoutInflater mLayoutInflater;    private ViewPager mVp;    private int[] mImg = new int[]{R.mipmap.sea, R.mipmap.sunset, R.mipmap.sea, R.mipmap.lotus, R.mipmap.red};    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_gallery);        mLayoutInflater = LayoutInflater.from(this);        mVp = (ViewPager) findViewById(R.id.vp_gallery_vp);        mVp.setAdapter(new MyAdapter());        mVp.setOffscreenPageLimit(mImg.length);//设置预加载数量        mVp.setPageMargin(10);//控制两幅图之间的间距       mVp.setPageTransformer(true,new ZoomOutPageTransformer());        //viewPager左右两边滑动无效的处理        findViewById(R.id.ll_gallery_outer).setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View view, MotionEvent motionEvent) {                return mVp.dispatchTouchEvent(motionEvent);            }        });    }    class MyAdapter extends PagerAdapter {        @Override        public int getCount() {            return mImg.length;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            View view = mLayoutInflater.inflate(R.layout.item_img, container, false);            ImageView img = view.findViewById(R.id.img_item_img);            //img.setImageResource(R.mipmap.sea);            img.setImageResource(mImg[position]);            img.setScaleType(ImageView.ScaleType.CENTER_CROP);            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }}

• 4,PageTransformer

//设置切换动画public class ZoomOutPageTransformer implements ViewPager.PageTransformer {    //自由控制缩放比例    private static final float MAX_SCALE = 1f;    private static final float MIN_SCALE = 0.85f;//0.85f    @Override    public void transformPage(View page, float position) {        if (position <= 1) {            float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);            page.setScaleX(scaleFactor);            if (position > 0) {                page.setTranslationX(-scaleFactor * 2);            } else if (position < 0) {                page.setTranslationX(scaleFactor * 2);            }            page.setScaleY(scaleFactor);        } else {            page.setScaleX(MIN_SCALE);            page.setScaleY(MIN_SCALE);        }    }}

---

2, 3d画廊

• 1,效果图
  
• 2,布局文件,同上

<?xml version="1.0" encoding="utf-8"?><LinearLayout    android:id="@+id/ll_gallery_outer"    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent"    android:clipChildren="false">    <android.support.v4.view.ViewPager        android:id="@+id/vp_gallery_vp"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:clipChildren="false"        android:layout_margin="50dp"/></LinearLayout>

• 3,主代码

/** * Created by  on 2017/11/8 * * 3d画廊 */public class GalleryActivity extends AppCompatActivity {    private ViewPager mVp;    private int [] mImg=new int[]{R.mipmap.sea,R.mipmap.sunset,R.mipmap.sea,R.mipmap.lotus,R.mipmap.red};    private ArrayList<Integer> mImgList;    private LayoutInflater mLayoutInflater;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_gallery);        mLayoutInflater = LayoutInflater.from(this);        mVp = (ViewPager) findViewById(R.id.vp_gallery_vp);        mImgList = new ArrayList<>();        for (int i = 0; i < mImg.length; i++) {            mImgList.add(mImg[i]);        }        mVp.setAdapter(new MyAdapter());        mVp.setOffscreenPageLimit(mImgList.size());//设置预加载数量        mVp.setPageMargin(10);//控制两幅图之间的间距,尽量以屏幕的宽度来确定        //mVp.setPageTransformer(true,new GallyPageTransformer());//3D画廊模式        mVp.setPageTransformer(true,new RotationPageTransformer());//3D画廊模式        //viewPager左右两边滑动无效的处理        findViewById(R.id.ll_gallery_outer).setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View view, MotionEvent motionEvent) {                return mVp.dispatchTouchEvent(motionEvent);            }        });    }    class MyAdapter extends PagerAdapter{        @Override        public int getCount() {            return mImgList.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view==object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            View view = mLayoutInflater.inflate(R.layout.item_img, container, false);            ImageView img = view.findViewById(R.id.img_item_img);            //img.setImageResource(R.mipmap.sea);            img.setImageResource(mImgList.get(position));            img.setScaleType(ImageView.ScaleType.CENTER_CROP);            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {           container.removeView((View)object);        }    }}

• 4,PageTransform

public class RotationPageTransformer implements ViewPager.PageTransformer {    private static final float MIN_SCALE=0.85f;    @Override    public void transformPage(View page, float position) {        float scaleFactor = Math.max(MIN_SCALE,1 - Math.abs(position));        float rotate = 10 * Math.abs(position);        //position小于等于1的时候，代表page已经位于中心item的最左边，        //此时设置为最小的缩放率以及最大的旋转度数        if (position <= -1){            page.setScaleX(MIN_SCALE);            page.setScaleY(MIN_SCALE);            page.setRotationY(rotate);        }//position从0变化到-1，page逐渐向左滑动        else if (position < 0){            page.setScaleX(scaleFactor);            page.setScaleY(scaleFactor);            page.setRotationY(rotate);        }//position从0变化到1，page逐渐向右滑动        else if (position >=0 && position < 1){            page.setScaleX(scaleFactor);            page.setScaleY(scaleFactor);            page.setRotationY(-rotate);        }//position大于等于1的时候，代表page已经位于中心item的最右边        else if (position >= 1){            page.setScaleX(scaleFactor);            page.setScaleY(scaleFactor);            page.setRotationY(-rotate);        }    }}

---

源码下载