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

lichong951

已于 2023-11-21 09:38:09 修改

阅读量1.2k

点赞数 2

分类专栏： android开发文章标签： viewpager cardview 卡片叠层左右叠层上下叠层

于 2022-06-25 12:35:42 首次发布

本文链接：https://blog.csdn.net/lichong951/article/details/125457925

版权

android开发专栏收录该内容

44 篇文章 8 订阅

订阅专栏

搞了大半个月凑合着叠层效果
在这里插入图片描述

开源代码地址：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>