【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<=0){//移动到左侧区域的pager页面

        }else{//移动到右侧的pager页面
            //设置每个View在中间，即设置相对原位置偏移量
            page.setTranslationX((-page.getWidth() * position));
            //移动Y轴坐标
            page.setTranslationY(position * mOffset);
        }
    }
}

在这里插入图片描述

上面是系统自带动画效果，下面是自定义动画效果作对比就很有眼感了
这里需要说明position的作用，参考其他博客position是页面数量决定的。大致上是[-pager页数，+pager页数]；后面那个+号有些多余哈！不过还是加上进行对比。因为本博客就是一个用对比来实现效果的。可见的区域是[-1,0,1]这个范围的。这个是笔者加了限制参数viewPager.setOffscreenPageLimit(3)

第三步：进行缩放

代码如下：


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<=0){//移动到左侧区域的pager页面

        }else{//移动到右侧的pager页面
            //设置每个View在中间，即设置相对原位置偏移量
            page.setTranslationX((-page.getWidth() * position));
            //移动Y轴坐标
            page.setTranslationY(position * mOffset);

            //缩放卡片并调整位置
            float scale = (page.getWidth() + mOffset * position) / page.getWidth();
            page.setScaleX(scale);
            page.setScaleY(scale);
        }
    }
}

效果如下：
在这里插入图片描述

到这里基本动画效果就加满了。接着就是调试动画相关参数和左右滑动时position变化的相关逻辑
其中的过程就不累赘了
竖向卡片叠加层次实现如下：

 Log.i(TAG, "position =" + position);
//        page.setAlpha(0.5f);
        if (mViewPager == null) {
            mViewPager = (ViewPager) page.getParent();
        }
        int current=mViewPager.getCurrentItem();
        Log.i(TAG,"current="+current);
        int pageWidth = page.getWidth();
        int pageHeight = page.getHeight();
//
        page.setPivotX(pageWidth / 2);
        if(position<=0){
            page.setTranslationX(-position * page.getWidth());
            //缩放卡片并调整位置
            float scale = (page.getWidth() + mOffset * position) / page.getWidth();
            page.setScaleX(scale);
            page.setScaleY(scale);
            page.setTranslationY((position) * mOffset+2.5f*current*mOffset);
            page.setTranslationZ(position);
            page.setPivotY(-1.5f*pageHeight);
        }else{
            //移动X轴坐标，使得卡片在同一坐标
            page.setTranslationX(-position * page.getWidth());

            //缩放卡片并调整位置
            float scale = (page.getWidth() - mOffset * position) / page.getWidth();
            page.setScaleX(scale);
            page.setScaleY(scale);
            //移动Y轴坐标
            page.setTranslationY((position) * mOffset+2.5f*current*mOffset);


            page.setTranslationZ(-position);
            page.setPivotY(1.5f*pageHeight);

        }
    }

效果如下：
在这里插入图片描述

横向的就不啰嗦了，参考开源项目里代码即可。
补充一下布局和相关设置
viewpager 布局文件

<android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:background="#55ff0000"
        app:layout_constraintTop_toTopOf="parent"
        android:importantForAccessibility="no"
        tools:ignore="MissingConstraints"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:layout_margin="10dp"
        android:layout_gravity="left"
        />

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

cardview

<android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="278dp"
            android:layout_height="157dp"
            app:cardBackgroundColor="#ffffff"
            app:cardCornerRadius="8dp"
            >
            。。。。
            </android.support.v7.widget.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

自研产品推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

为了更好服务大家把之前的公众号和软件激活结合，如有疑问请大家反馈到公众号即可，下个版本30%以上的更新会来自公众号的反馈。
嗯！先解释不上服务端原因，API调试工具的绝大多数时候就是一个数据模型、数据处理、数据模型理解共识的问题解决工具，所以作者结合自己十多年开发使用的一些痛点来打造的，再加上服务端开发一般是面向企业的，作者目前没有精力和时间去打造企业服务。再加上没有资金投入所以服务端开发会滞后，至于什么时候会进行开发，这个要看募资情况和用户反馈综合考虑。虽然目前国内有些比较知名的api工具了，但作者使用后还是觉得和实际使用场景不符。如果有相关吐槽也可以在作者的公众号里反馈蛤！
下面是一段smartApi使用介绍：
在这里插入图片描述

下载地址：

https://pan.baidu.com/s/1iultkXqeLNG4_eNiefKTjQ?pwd=cnbl

posted @   lichong951  阅读(83)  评论(0)  编辑  收藏  举报  
相关博文：
· 【MyAndroid】viewpage+cardView卡片海报效果展示--100个经典UI设计模板(99/100)
· 【MyAndroid】RecyclerView+cardView卡片叠层效果展示（3）--100个经典UI设计模板(98/100)
· 安卓中ViewPager组件的使用场景与优劣分析
· Android学习-ViewPager与PagerAdapter合用实现滑动翻页
· 23. ViewPager
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛