关于安卓卡片式交互实现(recyclerview)

简介: 安卓卡片式交互实现(recyclerview)

背景

对于安卓卡片式交互,已有很多案例,前有“探探”卡片滑动交互,后有各种各样的三方软件,都在互相复制粘贴。今项目中也有类似需求,特此记录。

!!!代码链接在文末!!!

演示gif

演示

思路

实现这样的效果,其实从宏观上,就是实现了一个layoutmanger以及ItemTouchHelper。
(一)LayoutManager主要是实现recyclerview的布局
(二)ItemTouchHelper主要是实现用户滑动的时候,卡片的交互过程

实现

(一)重写LayoutManger
首先,要确定的是,绘制多少个层级的布局。目前需求是显示三个叠加的item,因此,对于LayoutManager,我们只需要每次刷新的时候,绘制三次即可。(ps:开发过程应当把“层级”变量抽象全局化,适配“层级”变化的情况)

核心代码如下:


    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        super.onLayoutChildren(recycler, state);

        detachAndScrapAttachedViews(recycler);
        int maxCount = SlideConfig.SHOW_MAX_COUNT;
        //获取所有item(包括不可见的)个数
        int count = getItemCount();
        //由于我们是倒序摆放,所以初始索引从后面开始
        int initIndex = count - maxCount;
        if (initIndex < 0) {
            initIndex = 0;
        }

        //当前顺序
        int currentIndex = 0;

        for (int i = initIndex; i < count; i++) {
            //从缓存中获取view
            View view = recycler.getViewForPosition(i);
            //添加到recyclerView
            addView(view);
            //测量一下view
            measureChild(view, 0, 0);

            //居中摆放,getDecoratedMeasuredWidth方法是获取带分割线的宽度,比直接使用view.getWidth()精确
            int realWidth = getDecoratedMeasuredWidth(view);
            int realHeight = getDecoratedMeasuredHeight(view);
            int widthPadding = (int) ((getWidth() - realWidth) / 2f);
            int heightPadding = (int) ((getHeight() - realHeight) / 2f);

            //摆放child
            layoutDecorated(view, widthPadding, heightPadding,
                    widthPadding + realWidth, heightPadding + realHeight);
            //根据索引,来位移和缩放child
            int measureHeight = view.getMeasuredHeight();
            int trainY = SlideDpUtils.dp2px(SlideConfig.TRANSLATION_Y);


            RecyclerView.LayoutParams viewParams = (RecyclerView.LayoutParams) view.getLayoutParams();
            int paramsHeight = viewParams.height;
            if (paramsHeight == -1) {
                viewParams.height = (measureHeight - trainY * (maxCount + 1));
//                viewParams.height = (500);
                view.setLayoutParams(viewParams);
            }

            float translationY = (maxCount - currentIndex - 1) * trainY;
            if (currentIndex != maxCount - 1) {
                view.setTranslationY(translationY);
            }
            view.setScaleX(1 - (maxCount - currentIndex - 1) * SlideConfig.SCALE);
            currentIndex++;

//            view.setScaleY(1 - level * SlideConfig.SCALE);
        }
    }

可见,,其实也没啥,就是一些布局中,宽高的适配,以及一些位置计算罢了。
其实这里的绘制逻辑,是和recyclerview中的LinearLayoutManager中的处理手段,有着异曲同工之妙,所以,这里就不在叙述了。

值得注意的是,在绘制的过程中,LayoutManager有个居中的逻辑,如果布局高度太小,则会出现上下距离过宽的问题。如果布局高度填充满了,则会出现显示不全堆叠效果的问题。

这里的解决思路就是,当布局高度未填充满的情况下,则进行控件的高度进行重新设置,计算好误差距离,然后进行Y轴方向的偏移。

(二)重写ItemTouchHelper
对于ItemTouchHelper,需要在swipe方法进行数据的移除,界面刷新以及监听的回调,核心代码如下:


    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
        //通知adapter
        if (mAdapter != null) {
            int currentPosition = viewHolder.getLayoutPosition();
            //由于是限定了永远只有三个,所以,该current position的值永远少于等于
            mAdapter.getDataList().remove(currentPosition);
//        mAdapter.getDataList().add(0, s);
            mAdapter.notifyDataSetChanged();
            mAdapter.notifyOutSideRefresh();
            mAdapter.notifyPageChange();
        }
    }

而对于触摸的场景下,卡片的宽高,缩放等设置,则在onChildDraw方法实现即可,核心代码如下:


    @Override
    public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView
            recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, float dX, float dY,
                            int actionState, boolean isCurrentlyActive) {
        try {
            //计算移动距离
            float distance = (float) Math.hypot(dX, dY);
            float maxDistance = recyclerView.getWidth() / 2f;
            //比例
            float fraction = distance / maxDistance;
            if (fraction > 1) {
                fraction = 1;
            }
            int maxCount = SlideConfig.SHOW_MAX_COUNT;
            int trainY = SlideDpUtils.dp2px(SlideConfig.TRANSLATION_Y);
            //为每个child执行动画
            int count = recyclerView.getChildCount();
            int adapterCount = mAdapter.getDataList().size();
            for (int i = 0; i < count; i++) {
                if (i != count - 1 && adapterCount > maxCount) {
                    //不是第一层--且数量大于3
                    View view = recyclerView.getChildAt(i);
                    view.setScaleX(1 - (maxCount - i - 1) * SlideConfig.SCALE + fraction * SlideConfig.SCALE);
                    view.setTranslationY((maxCount - i - 1) * trainY - fraction * trainY);
                }


//            int level = SlideConfig.SHOW_MAX_COUNT - i - 1;
//            if (level != SlideConfig.SHOW_MAX_COUNT)
//            //获取的view从下层到上层
//            View view = recyclerView.getChildAt(i);
//            int level = SlideConfig.SHOW_MAX_COUNT - i - 1;
//            //level范围(SlideConfig.SHOW_MAX_COUNT-1)-0,每个child最大只移动一个SlideConfig.TRANSLATION_Y和放大SlideConfig.SCALE
//
//            if (level == SlideConfig.SHOW_MAX_COUNT - 1) { // 最下层的不动和最后第二层重叠
//                view.setTranslationY(SlideConfig.TRANSLATION_Y * (level - 1));
//                view.setScaleX(1 - SlideConfig.SCALE * (level - 1));
//                view.setScaleY(1 - SlideConfig.SCALE * (level - 1));
//            } else if (level > 0) {
//                view.setTranslationY(level * SlideConfig.TRANSLATION_Y - fraction * SlideConfig.TRANSLATION_Y);
//                view.setScaleX(1 - level * SlideConfig.SCALE + fraction * SlideConfig.SCALE);
//                view.setScaleY(1 - level * SlideConfig.SCALE + fraction * SlideConfig.SCALE);
//            }
            }
        } catch (Exception e) {

        }
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }

这里,就实现了recyclerview卡片堆叠效果了。
代码地址--库libslidrecyclerview

that's all---------------------------------------------------------------------

目录
相关文章
|
4月前
|
JSON Android开发 数据格式
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
android与Web服务器交互时的cookie使用-兼谈大众点评数据获得(原创)
70 2
|
1月前
|
XML Android开发 UED
"掌握安卓开发新境界:深度解析AndroidManifest.xml中的Intent-filter配置,让你的App轻松响应scheme_url,开启无限交互可能!"
【8月更文挑战第2天】在安卓开发中,scheme_url 通过在`AndroidManifest.xml`中配置`Intent-filter`,使应用能响应特定URL启动或执行操作。基本配置下,应用可通过定义特定URL模式的`Intent-filter`响应相应链接。
81 12
|
30天前
|
存储 Android开发 开发者
Android项目架构设计问题之定义RecyclerView的ViewHolder如何解决
Android项目架构设计问题之定义RecyclerView的ViewHolder如何解决
28 0
|
30天前
|
数据可视化 Java 数据挖掘
Android项目架构设计问题之设置RecyclerView的LayoutManager如何解决
Android项目架构设计问题之设置RecyclerView的LayoutManager如何解决
24 0
|
30天前
|
JSON Android开发 数据格式
Android项目架构设计问题之实现交互响应的结构化处理如何解决
Android项目架构设计问题之实现交互响应的结构化处理如何解决
12 0
|
3月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
44 2
|
3月前
|
Android开发 Kotlin
Android面试题 之 Kotlin DataBinding 图片加载和绑定RecyclerView
本文介绍了如何在Android中使用DataBinding和BindingAdapter。示例展示了如何创建`MyBindingAdapter`,包含一个`setImage`方法来设置ImageView的图片。布局文件使用`&lt;data&gt;`标签定义变量,并通过`app:image`调用BindingAdapter。在Activity中设置变量值传递给Adapter处理。此外,还展示了如何在RecyclerView的Adapter中使用DataBinding,如`MyAdapter`,在子布局`item.xml`中绑定User对象到视图。关注公众号AntDream阅读更多内容。
63 1
|
3月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
4月前
|
安全 物联网 测试技术
构建未来:Android与IoT设备的无缝交互深入探索软件自动化测试的未来趋势
【5月更文挑战第30天】在物联网(IoT)技术快速发展的当下,Android系统因其开放性和广泛的用户基础成为了连接智能设备的首选平台。本文将探讨如何通过现代Android开发技术实现智能手机与IoT设备的高效、稳定连接,并分析其中的挑战和解决方案。我们将深入挖掘Android系统的底层通信机制,提出创新的交互模式,并通过实例演示如何在Android应用中集成IoT控制功能,旨在为开发者提供一套可行的指导方案,促进IoT生态系统的进一步发展。
|
3月前
|
XML Java Android开发
Android RecyclerView用代码动态设置item的selector
Android RecyclerView用代码动态设置item的selector
32 0