卡片 Fragment 轮播

最近有个需求，需要写一个轮播，卡片形式的然后又不单单是图片，里面还需要一些文字布局之类的，那就不能使用简单的banner来加载了。想着也不想去引入包，免得乱七八糟，所以就动手自己画一个，最后经过扩展也搞了一个类似京东订单的布局，和一个风车类型的轮播。先看看效果图：

 

    

也就这三种，其实实现起来非常简单，首先需要的是 一个适配器，用来存放fragment的，这fragment就是你每张的布局，自己爱怎们弄就怎么弄。这个适配器比较通用主要是集成v4包下的FragmentPagerAdapter

public class CardViewPagerAdapter extends FragmentPagerAdapter {

    private FragmentManager mManager;  //创建FragmentManager
    private List<CardFragment> mList; //创建一个List<Fragment>

    //定义构造带两个参数
    public CardViewPagerAdapter(FragmentManager fm, List<CardFragment> list) {
        super(fm);
        this.mManager = fm;
        this.mList = list;
    }

    @Override
    public Fragment getItem(int arg0) {
        if (mList == null || mList.size() == 0) {
            return null;
        }
        return mList.get(arg0); //返回第几个fragment
    }
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return "title";
    }

    @Override
    public int getCount() {
        if (mList == null) {
            return 0;
        }
        return mList.size(); //总共有多少个fragment
    }

}

然后来看第二张图的缩放效果，简单来说就是对每一个Item进行一个缩放，然后自然而然就会看到切换之后有一部分会露出来了。再给每个item设置TranslationZ()，Z轴的阴影，这样就看着有点卡片效果，或者你在fragment里面绘制时候写一个cardview也是可以的。重点就是前一页后一页的缩放比例，中间页的缩放可以看为1，前后两页就是根据自己喜好来设置了。最后因为view有setScaleX()和setScaleY()这两个方法，就可以进行设置缩放了。

  private void animScale(View view, float position) {
        //缩放比例
        float scale = 1;

        if (position <= 0.0f) {         // 当前页

            // 计算缩放比例
            scale = (view.getWidth() + mScale * 5 * position) / (float) (view.getWidth());
            //X轴偏移
            view.setTranslationX(-(view.getWidth() / 6f * position));

            //打开点击事件
            view.setClickable(true);

        } else if (position > 0) {      // 后一页

            // 计算缩放比例
            scale = (view.getWidth() - mScale * 5 * position) / (float) (view.getWidth());
            //X轴偏移
            view.setTranslationX(-(view.getWidth() / 6f * position));

            //屏蔽点击事件
            view.setClickable(false);
        }

        // 设置卡片背景色
        if (view.getBackground() == null) {
            view.setBackgroundColor(0xFFFFFFFF);
        }
        // 设置Z轴及阴影
        view.setTranslationZ(scale * 20);
        // 设置横向缩放
        view.setScaleX(scale * 0.85f);
        // 设置纵向缩放
        view.setScaleY(scale * 0.85f);

    }

同理，设置风车效果也就是给view设置setrotation旋转和Y轴位移。

 private void animWindmill(View view, float position) {
        if (view.getBackground() == null) {
            // 设置卡片背景色
            view.setBackgroundColor(0xFFFFFFFF);
            // 设置横向缩放
            view.setScaleX(0.85f);
            // 设置纵向缩放
            view.setScaleY(0.85f);
        }

        if (position <= 0.0f) {         // 当前页

            // 旋转
            view.setRotation(mRotation * Math.abs(position));

            // Y轴位移
            view.setTranslationY(-(view.getHeight() / 10f * position));

            // Z轴 阴影
            float translationZ = (view.getWidth() + mScale * 5 * position) / (float) (view.getWidth());
            view.setTranslationZ(translationZ * 20);

            //打开点击事件
            view.setClickable(true);
        } else if (position > 0) {      // 后一页

            // 旋转
            view.setRotation(-(mRotation * Math.abs(position)));

            // Y轴位移
            view.setTranslationY((view.getHeight() / 10f * position));

            // Z轴 阴影
            float translationZ = (view.getWidth() - mScale * 5 * position) / (float) (view.getWidth());
            view.setTranslationZ(translationZ * 20);

            //屏蔽点击事件
            view.setClickable(false);
        }

 

 private void animStack(View view, float position) {
        //缩放比例
        float scale = (view.getWidth() - mScale * position) / (float) (view.getWidth());

        // 设置卡片背景色
        if (view.getBackground() == null) {
            view.setBackgroundColor(0xFFFFFFFF);
        }
        // 设置Z轴及阴影
        view.setTranslationZ(scale * 20);
        // 设置横向缩放
        view.setScaleX(scale * 0.85f);
        // 设置纵向缩放
        view.setScaleY(scale * 0.85f);

        if (position <= 0.0f) {         // 当前页

            //X轴偏移
            view.setTranslationX((view.getWidth() / 3f * position));

            //打开点击事件
            view.setClickable(true);

        } else if (position > 0) {      // 后一页

            //X轴偏移
            view.setTranslationX((-view.getWidth() * position) + (mTranslation * position));

            //屏蔽点击事件
            view.setClickable(false);
        }
    }

基本就这点代码就完成了，不用去引用第三方库就能自己手动写，重点是设置参数和增加效果也能随时添加。

 

有兴趣可以看看下面服务号和订阅号：