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);
        }
    }
}

---

源码下载