【MyAndroid】viewpage+cardView卡片叠层效果展示（2）--100个经典UI设计模板(98/100)

搞了大半个月凑合着叠层效果 开源代码地址：https://gitee.com/lc951/my-android

这里使用的是viewpager + cardView组件。全部是原生组件几乎没有自定义组件。 动画效果使用的是viewpager自带的接口类ViewPager.PageTransformer，官方有两个例子也有许多博主解析过原理参考里会有笔者觉得不错的博客访问链接，有兴趣可以看看哈！

如果读者大佬留心会发现我打算写一个专题为《大前端极简开发入门》，笔者本人的风格也是简约风。所以也就不啰嗦viewpager中ViewPager.PageTransformer的动画原理和底层实现计算，实在是就算讲了也需要很长的时间来理解里面的一些很专业且晦涩难懂的实现原理。如果实在是想搞清楚可以多看看笔者留下的参考链接。

动画效果有：缩放、移动、透明度设置；单个或多个叠加即可达到动画效果

第一步：把原本左右滑动的pager页面固定到同一个位置

代码如下：

 public void transformPage(@NonNull View page, float position) {
        //设置透明度
//        page.setAlpha(0.5f);
        //设置每个View在中间，即设置相对原位置偏移量
        page.setTranslationX((-page.getWidth() * position));

    }

viewpager设置代码如下：

 CardOverlayTransformer transformer=new CardOverlayTransformer();
vp.setPageTransformer(true, transformer);

如上图看上去就是这样哈！上面是一个对比效果暂时不用搭理 接着把透明度效果加上 三张图片就叠加到一起了。

第二步：加竖向移动（竖向移动比较好理解，不涉及左右滑动的计算因素）

public class CardOverlayTransformer implements ViewPager.PageTransformer{

    private float mOffset = 40;

    @Override
    public void transformPage(@NonNull View page, float position) {
        //设置透明度
        page.setAlpha(0.5f);
        //设置每个View在中间，即设置相对原位置偏移量
        page.setTranslationX((-page.getWidth() * position));
        //移动Y轴坐标
        page.setTranslationY(position * mOffset);

    }
}

效果图如下：

这个时候左右滑动还是无效 接着加position参数处理

public class CardOverlayTransformer implements ViewPager.PageTransformer{

    private float mOffset = 40;

    @Override
    public void transformPage(@NonNull View page, float position) {
        //设置透明度
        page.setAlpha(0.5f);
        if(position

注意设置： android:clipToPadding =false；android:clipChildren=false；这个是为了一屏多页设置的效果，目的是展示viewpager边界以外和padding都可见画面。

cardview

            。。。。
            

viewpager 相关设置

viewPager.setOffscreenPageLimit(3);

结语

就不再啰嗦了，想要调试出UI设计的效果，估计会把这篇博客看个三遍以上，都是同行懂其中的痛。 读者大佬如果看得上请收藏开源项目，笔者争取搞出100个页面特效来以后就不用像现在这样一搞动画差点搞个把月还熬五六个深夜。如果累了就先喝口水。

参考：

https://www.imooc.com/article/274387 http://crazysunj.com/2017/06/25/%E4%B8%80%E8%A1%8C%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0ViewPager%E5%8D%A1%E7%89%87%E6%95%88%E6%9E%9C/ https://blog.csdn.net/chuyouyinghe/article/details/118611973 https://blog.csdn.net/qq_21793463/article/details/52225502 https://blog.csdn.net/qq_33229171/article/details/88937597