关于安卓viewpager实现堆叠卡片交互

这篇具有很好参考价值的文章主要介绍了关于安卓viewpager实现堆叠卡片交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

长江后浪推前浪,无聊的需求一浪接一浪。
最近做到一个关于卡片堆叠的需求,觉得挺有意思,所以特此记录一下。

文末将附上源码链接

首先看设计图:
android卡片层叠效果,安卓实战,android,交互,java
可以看到,是一个卡片堆叠的效果,关于这种UI的实现,方法有很多,例如用recyclerview,viewpager,甚至说自定义view都可以实现,本文将讲述如何使用viewpager实现这种效果。

开发环境

win10
jdk 8
as 4+

实现效果

android卡片层叠效果,安卓实战,android,交互,java
由于是demo的演示,所以就不用过多在意颜色,基础功能实现即可。

问题

1、如何修改viewpager的一个卡片堆叠位置
2、如何在滑动的过程中,动态去修改卡片的宽高

思路

对于viewpager中,有个ViewPager.PageTransformer的属性,这个属性是用来干嘛的?
看一下源码的描述:

    /**
     * A PageTransformer is invoked whenever a visible/attached page is scrolled.
     * This offers an opportunity for the application to apply a custom transformation
     * to the page views using animation properties.
     *
     * <p>As property animation is only supported as of Android 3.0 and forward,
     * setting a PageTransformer on a ViewPager on earlier platform versions will
     * be ignored.</p>
     */
    public interface PageTransformer {
        /**
         * Apply a property transformation to the given page.
         *
         * @param page Apply the transformation to this page
         * @param position Position of page relative to the current front-and-center
         *                 position of the pager. 0 is front and center. 1 is one full
         *                 page position to the right, and -1 is one page position to the left.
         */
        void transformPage(@NonNull View page, float position);
    }

简单来讲,就是控制页面的进出场的,简单的你可以用该类实现一些viewpager页面切换进出场的效果,复杂一点的,可以动态计算viewpager滑动过程中,相关view的一个控件属性,等等。

通过继承方式,继承PageTransformer实现一个子类,重写其中的
void transformPage(@NonNull View page, float position);方法。
该方法中,第一个参数就是滑动中的view对象。第二参数,就是view的相对滑动位置。这里要注意,不是view在viewpager中的位置,仅仅是一个滑动位置,简单粗暴地可以理解为是
“负右正左零中间”。当position为0的时候,就是当前显示view,同样地-1,就是0的左边,1就是0的右边。如下图
android卡片层叠效果,安卓实战,android,交互,java
这里的0,就是相对于position等于0的情况。

以上就是关于transformPage方法中,参数回调情况的描述。

---------------------------------分割线-------------------------------------

既然有了view对象,有了position左右滑动的回调,那么,就可以做很多事情了。首先position的数值,是受viewpager左右滑动影响,右滑为负数,左滑为正数。这个时候,可以根据左右滑动,做一些控件大小的转换!
注意,在数据处理的过程中,position的正负值影响。

实现

1、实现viewpager的卡片堆叠
通过setTranslationX,可以设置view的x位置!
通过LayoutParams,可以设置view的右侧边距!


设想一下,通过setTranslationX设置一个负值,是不是可以吧viewpager第二个位置的view直接放到第一个view的位置?只不过说,放完以后还是会被第一个view遮挡,导致看不到而已如此类推,就完成了一个viewpager中,view的位置摆放了。


再到LayoutParams,那不是送分题?根据position直接设置右边距,那不就得了吗?


说到这里,相信大部分人都已经懂了。
不懂的也没有关系,可以看下下面的代码:


    @Override
    public void transformPage(@NonNull View view, float position) {
        int pagerWidth = boundViewPager.getWidth();
        LogUtil.d("transformPage tag: " + view.hashCode() + " pos: " + position + " pagerWidth: " + pagerWidth);
        float scaleWidth = pagerWidth * CENTER_PAGE_SCALE;
        float widthInterval = (pagerWidth - scaleWidth) / 2;

        view.setScaleX(CENTER_PAGE_SCALE);
        view.setScaleY(CENTER_PAGE_SCALE);

        //设置间距----------------------------------------------------------------------
        ViewGroup llRoot = view.findViewById(R.id.llRoot);
        if (llRoot != null) {
            ViewGroup.LayoutParams layoutParams = llRoot.getLayoutParams();
            if (layoutParams instanceof RelativeLayout.LayoutParams) {
                ((RelativeLayout.LayoutParams) layoutParams).setMarginEnd((int) ((2 - Math.abs(position)) * endInterval));
                ((RelativeLayout.LayoutParams) layoutParams).topMargin = (int) (Math.abs(position) * verticalInterval);
                ((RelativeLayout.LayoutParams) layoutParams).bottomMargin = (int) (Math.abs(position) * verticalInterval);
                llRoot.setLayoutParams(layoutParams);
            } else if (layoutParams instanceof CardView.LayoutParams) {
                ((FrameLayout.LayoutParams) layoutParams).setMarginEnd((int) ((2 - Math.abs(position)) * endInterval));
                ((FrameLayout.LayoutParams) layoutParams).topMargin = (int) (Math.abs(position) * verticalInterval);
                ((FrameLayout.LayoutParams) layoutParams).bottomMargin = (int) (Math.abs(position) * verticalInterval);
                llRoot.setLayoutParams(layoutParams);
            }
        }
        //设置偏移量----------------------------------------------------------------------
        if (position >= 0) {
            view.setTranslationX(-pagerWidth * position);
        }
        if (position > -1 && position < 0) {
            view.setAlpha((position * position * position + 1));
        } else if (position > offscreenPageLimit - 1) {
            view.setAlpha((float) (1 - position + Math.floor(position)));
        } else {
            view.setAlpha(1);
        }
    }
}

简洁明了,两个方法,即可实现。
好了,实现了交互,那么,还有一个“无限循环”的问题!
方案无非是两种,一种是adapter getCount设置为无限大,一种是通过前后补数据给用户做一个视觉差。但是具体到我们这里的实现,明显是第一种方法比较合适。这里也不过多叙述了。


最后,源码地址:代码地址
搜索VPTestActivity类

that’s all--------------------------------------------------------------------------------------------------文章来源地址https://www.toymoban.com/news/detail-669602.html

到了这里,关于关于安卓viewpager实现堆叠卡片交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android——禁止ViewPager的左右滑动功能实现

    Android——禁止ViewPager的左右滑动功能实现 在Android开发中,ViewPager是一种常用的滑动控件,用于实现页面的左右切换效果。然而,在某些场景中,我们可能需要禁止ViewPager的左右滑动功能,只允许通过其他方式进行页面切换。本文将介绍如何在Android中实现禁止ViewPager左右滑动

    2024年02月06日
    浏览(44)
  • Android修行手册 - 使用ViewPager2实现画廊效果

    Unity3D特效百例 案例项目实战源码 Android-Unity实战问题汇总 游戏脚本-辅助自动化 Android控件全解手册 再战Android系列 Scratch编程案例 软考全系列 Unity3D学习专栏 蓝桥系列 ChatGPT和AIGC 专注于 Android/Unity 和各种游戏开发技巧,以及 各种资源分享 (网站、工具、素材、源码、游戏等

    2024年02月22日
    浏览(43)
  • 『Android基础入门』ViewPager+Fragment+BottomNavigationView实现底部导航

    👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟 🏡个人主页:starry陆离 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 在ViewPager与Fragment结合实现多页面滑动的学习上再进一步,记录一下ViewPager+Fragment+BottomNavigationView实现底部导航 1.复习ViewPager的用法 2.复习F

    2023年04月08日
    浏览(45)
  • android : 底部导航栏的实现(使用ViewPager和BottomNavigationView)

      本案例中需要用的控件ViewPager和BottomNavigationView ViewPager:主要是页面的切换 Fragment:碎片(也就是每个页面的内容) BottomNavigationView:底部导航栏 非常简单,主要就是一个Viewpager和BottomNavigationView 先来说一下思路:BottomNavigationView底部导航栏   ViewPager+Fragment页面        

    2024年02月03日
    浏览(39)
  • Android 实现 NFC 读取卡片信息

    效果图: 因为朋友需要个读取NFC卡片数据的功能,所以最近看了一下Android 系统下NFC 读取卡片信息的操作。 NFC(近距离无线通信 ) 是一组近距离无线技术,通常只有在距离不超过 4 厘米时才能启动连接.借助 NFC,您可以在 NFC 标签与 Android 设备之间或者两台 Android 设备之间共享小

    2024年02月01日
    浏览(37)
  • Android kotlin 实现仿蜜源ViewPager和指示器对应上面TabLayout功能

    在 app 的 build.gradle 在添加以下代码 1、 TabLayout : implementation \\\'com.google.android.material:material:1.1.0\\\' 2、 implementation \\\'com.github.li-xiaojun:StateLayout:1.3.4\\\' //allprojects {…增加:maven { url ‘https://jitpack.io’ }…} 3、 implementation \\\'com.github.CymChad:BaseRecyclerViewAdapterHelper:3.0.6\\\' ,这个里面带的适配

    2024年02月09日
    浏览(74)
  • 【Android】使用ViewPager2实现轮播图效果,手动/自动轮播图

    这里使用Gilde进行加载图片:Glide 使用Gilde可以加载网络图片还可以提高图片加载性能。 接下来新建一个子布局item_image,加载viewPage2的子布局。 ViewPage2就是使用recyclerView实现的,所以这里使用方法其实类似。 这里直接继承RecyclerView.Adapter即可,代码很简单不必多说。 创建一个

    2024年02月03日
    浏览(48)
  • Android 13 关于安卓判断通知权限

    判断权限是否开启: public class NoticePermissionUtil {       private static final String CHECK_OP_NO_THROW = \\\"checkOpNoThrow\\\";     private static final String OP_POST_NOTIFICATION = \\\"OP_POST_NOTIFICATION\\\";       //调用该方法获取是否开启通知栏权限     public static boolean isNotifyEnabled(Context context) {        

    2023年04月13日
    浏览(42)
  • Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换

    通过几次的踩雷和摸索,完成了以上的操作,本教程写的详细全面,包教包会,对新手有好,看了不会的联系我,我倒立洗头给你看。 所需控件: fragment 作为Android中最常用的控件,它有自己的声明周期,可以粗略地等比为能够分屏的activity,但是和activity有区别,fragment有自

    2024年02月08日
    浏览(46)
  • 关于android和vue.js交互

    本文使用webview框架AgentWeb 使用的Vue版本为vue3 使用的android sdk版本为33 从android 11 开始想要访问sd卡下的数据需要权限 权限请求方法为 使用以下方法注册接口 根据Android与Vue的交互的方法示例这篇文章最后中提到的互调的坑中得知因为Vue的问题Android调用Vue方法需要在window中暴

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包