android viewpager 实现画廊效果

首先看一下效果图：

    

xml布局：

activity代码：

（这里我是在fragment里面写的 ，其实跟activity布局里面差不多）

public class FollowFragment extends Fragment {

    private LinearLayout fol_lnlay;
    private ViewPager fow_viewpager;
    int[] picArray;
    ImageView[] ivArray;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_follow,container,false);
        fol_lnlay = (LinearLayout) view.findViewById(R.id.fol_lnlay);
        fow_viewpager = (ViewPager) view.findViewById(R.id.fow_viewpager);
        initData();

        //设置Page间间距
        fow_viewpager.setPageMargin(60);
        //设置缓存的页面数量
        fow_viewpager.setOffscreenPageLimit(4);
       fow_viewpager.setPageTransformer(true, new PagerTransformer());
        fow_viewpager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return Integer.MAX_VALUE;
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                int p = position % 4;
                RoundAngleImageView view = new RoundAngleImageView(getActivity());
                view.setScaleType(ImageView.ScaleType.FIT_XY);
//                ViewGroup.LayoutParams vl = new ViewGroup.LayoutParams(100 , 300);
                view.setImageResource(picArray[p]);

                container.addView(view);
                return view;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
            }
        });
        fow_viewpager.setCurrentItem(Integer.MAX_VALUE/2);
        return view;
    }
    private void initData() {
        picArray = new int[4];
        picArray[0] = R.mipmap.lunpou1;
        picArray[1] = R.mipmap.lunpou2;
        picArray[2] = R.mipmap.lunpou3;
        picArray[3] = R.mipmap.lunpou4;

    }

}

PagerTransformer布局：

public class PagerTransformer implements ViewPager.PageTransformer {
    public static final float minScale = 0.9f;
    private static final float DEFAULT_MAX_ROTATE = 15f;
    private float mMaxRotate = DEFAULT_MAX_ROTATE;
    public static final float DEFAULT_CENTER = 0.4f;
    /**
     * 每个状态的view该显示多大是根据position的值来设置的。
     * 本例中值关心3张图片的大小，就只有3个状态。position小于-1 ， -1到1 大于1
     * 等于-1 就是屏幕上左边的图片 ， 等于1 是屏幕右边的图 等于0是中间的图。
     * @param page
     * @param position -- 第一个view的position初始为0 ，向左滑第一个view的position就慢慢减少成为负数。
     *                 第二个view的position初始为1，向左滑慢慢变成0.变成0时就是这个view在最中间的时候。
     *                 整个过程，每个view的position都是在变的、
     */
    @Override
    public void transformPage(View page, float position) {

        page.setPivotY(page.getHeight()/2);//旋转轴

        if (position < -1) {
//            view.setAlpha(mMinAlpha);
            page.setScaleY(minScale);
            page.setScaleX(minScale);
            page.setRotationY(-1 * mMaxRotate);
            page.setPivotX(page.getWidth());

        } else if (position <= 1) { // [-1,1]
            page.setRotationY(position * mMaxRotate);
            if (position < 0) //[0，-1]
            {
                float factor = minScale + (1 - minScale) * (1 + position);
                page.setScaleY(factor);
                page.setScaleX(factor);

//                page.setPivotX(page.getWidth() * (DEFAULT_CENTER + DEFAULT_CENTER * (-position)));
                page.setPivotX(page.getWidth());

            } else//[1，0]
            {
                float factor = minScale + (1 - minScale) * (1 - position);
                page.setScaleY(factor);
                page.setScaleX(factor);

//                page.setPivotX(page.getWidth() * DEFAULT_CENTER * (1 - position));
                page.setPivotX(0);
            }
        } else { // (1,+Infinity]
            page.setScaleY(minScale);
            page.setScaleX(minScale);


            page.setRotationY(1 * mMaxRotate);
            page.setPivotX(0);
        }
    }

}

在我写适配器的时候，new了一个类，那个类就是我自定义的imageview的圆角，可以参考：https://blog.csdn.net/why_111/article/details/80720043

如果不想写的话  直接new一个Imageview就可以。