Android 一个无限循环滚动的卡片式ViewPager

前段时间做了一个关于商城的分享介绍卡片式ViewPager，效果看起来还是蛮炫丽的，整体有如下效果特点：

1. 无限轮播
2. 两种卡片布局（中间与两边的不同）
3. 指示灯
4. 滚动到下一个卡片会在Y轴进行偏移
5. 可显示前后卡片的一部分
6. 一开始进入从中间开始
7. 卡片圆角，背景可颜色或图片

说的这么多估计大家还是有点懵吧，那我们就先看下效果图跟项目结构图，再一一跟大家解释其效果实现与文件作用。

实现这个不一样的卡片Viewpager注意的地方:

1、对ViewPager设置setPageMargin(int marginPixels)
2、布局中引用自定义的ViewPager进行设置clipToPadding=”false”，paddingLeft，paddingRight
3、对ViewPager设置setPageTransformer()切换时的动画效果

解析以上三个设置特点：

1、setPageMargin：一般ViewPager都是页与页在切换时都是紧贴在一起的。它的设置主要是使页与页有一定的margin。设置之后的效果：

2、clipToPadding: 这个属性一般都是viewgrounp对象才会用到, 他的意思就是对于padding 所占的尺寸大小也绘制其他的item的view。他必须与padding一起使用才会有作用。

clipToPadding=“true”或没有设置时的效果：

看到第一张，是不是明显的左右两张卡片没有显示出预览，再看到第二张才知道原来是左右两边有边距遮盖了，所以只有设置false才可以看到我们要的那种效果。

源码下载

一、类包文件的介绍:

1、bean->ShareCardItem：是通过用来解析数据的一个模型

2、util->StreamUtils：是用来读取文件res->raw文件的数据。

因为这里的卡片数据我这里就不做数据网络请求，防止项目域名变化，大家就大概理解data.json就是通过网络获取来的数据就行了。而该工具类就是通过get(Context context, int id)读取data.json中的数据json字符串。

public class StreamUtils {

    public static String get(Context context, int id) {
        InputStream stream = context.getResources().openRawResource(id);
        return read(stream);
    }

    public static String read(InputStream stream) {
        return read(stream, "utf-8");
    }

    public static String read(InputStream is, String encode) {
        if (is != null) {
            try {
                BufferedReader reader = new BufferedReader(new InputStreamReader(is, encode));
                StringBuilder sb = new StringBuilder();
                String line = null;
                while ((line = reader.readLine()) != null) {
                    sb.append(line + "\n");
                }
                is.close();
                return sb.toString();
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return "";
    }

    public static String getBase64(byte[] base) {
        String base64 = null;
        try {
            base64 = Base64.encodeToString(base, Base64.NO_WRAP);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return base64;
    }
}

3、view->LoopPagerAdapterWrapper/LoopViewPager/ViewPager

本文的卡片无限循环滚动就是通过这上个文件实现的，代码量太多了，这里就不做粘贴，可以下载源码查看。

4、view->ScaleTransformer：是ViewPager中的卡片在Y轴上的移动动画。

注释掉的那些是切换卡片缩放跟透明度的变化，这里没做具体计算，如果要用的话，可以自行计算。

public class ScaleTransformer implements ViewPager.PageTransformer {
   
    private static final float MIN_SCALE = 0.7f;//缩放的比例
    private static final float MIN_ALPHA = 0.5f;//透明度的比例
    private static final float MOVE_Y = 40;//设置y轴移动的基数

    @Override
    public void transformPage(View page, float position) {
        if (position < -1 || position > 1) {
//            page.setAlpha(MIN_ALPHA);
//            page.setScaleX(MIN_SCALE);
//            page.setScaleY(MIN_SCALE);
            page.setTranslationY(0);
        } else if (position <= 1) { // [-1,1]
//            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            if (position <= 0) {
//                float scaleX = 1 + 0.3f * position;
//                page.setScaleX(scaleX);
//                page.setScaleY(scaleX);
                page.setTranslationY(0);
            } else {
                page.setTranslationY(-MOVE_Y * (1 - Math.abs(position)));
//                float scaleX = 1 - 0.3f * position;
//                page.setScaleX(scaleX);
//                page.setScaleY(scaleX);
            }
//            page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        }
    }
}

5、view->ShareCardView：重点来了，这就是所说的卡片ViewPager

这里面用到了两种卡片，所以这里只是为了给大家举例，如果要实现其他效果，大致也是一样的。

public class