Android RecyclerView实现侧滑删除

news2024/11/24 3:28:20

距上次写博客有半年多了,回忆起来都觉得不可思议,中间也想憋俩大招,总是被耽误,这俩月忙完之后,终于空下来了,恰好新项目我和UI俩人商量一下,用MD来实现app。中间有个需求是RecyclerView中侧滑显示删除按钮,点击删除。于是就有了这篇博客。
在这里插入图片描述

文章目录

  • 一、目标与分析
    • 1\. 目标
    • 2\. 实现难点与关键点
  • 二、实现原理解析
    • 1\. 如何定位被触摸到的子View
    • 2\. 侧滑还是RecyclerView的正常滑动? 如何判断甩动
    • 3\. 松开手怎样实现平滑滚动
  • 三、代码与注意事项

一、目标与分析

先上图:

侧滑删除

1. 目标

如图所示,我们的目标是实现在RecyclerView中实现:

  • 向左侧滑超出菜单按钮一半宽度能够使item展示出菜单按钮;
  • 向左甩动显示菜单按钮;
  • 支持菜单按钮点击消失;
  • 不影响RecyclerView的正常功能。

2. 实现难点与关键点

说明一下,在这里我采用的是在RecyclerView中进行触摸判断拦截,然后处理子View实现的。并没有采用在子View中使用requestDisallowInterceptTouchEvent(true)的方式阻止父View的拦截来处理,尽量减小对RecyclerView的影响。

  • 如何定位被触摸到的子View
  • 如何判断是侧滑还是RecyclerView的正常上下滑动
  • 松开手怎样实现平滑滚动
  • 如何判断甩动

二、实现原理解析

下面来以一一分析上面的问题。

1. 如何定位被触摸到的子View

先来说说ListView

熟悉ListView的同学肯定知道,在ListView中有个pointToPosition(int x, int
y)的方法,该方法其实是其父类AbsListView中实现的,作用就是定位触摸点在list中mTouchPosition。但是这个position并不是子view的下标position,我们知道ListView以及RecyclerView的实现都是采用ViewHolder模式对View进行了复用,其实界面上只有那几个View,不是随着数据项的增加而增加,因此通过getChildAt(position)的方式其实并不能获得真正被触摸到的View。

在ListView中还有个getFirstVisiblePosition()的方法,当然还是AbsListView中实现的,该方法用于获得屏幕上展示的第一个ItemView对应的数据集合中数据的mFirstPosition。这样,我们有了第一个位置的mFirstPosition,又有了触摸点的mTouchPosition,两个位置相减,就得到了被触摸到的子View的下标position,这样再通过getChildAt(position)的方式即可获得触摸点的子View。

RecyclerView如何

Ok,上面是ListView中的触摸点子View获取方式,那么问题来了,挖掘机技术哪家强?

这些方式是否适用于RecyclerView?答案是不适用,因为ListView继承了AbsListView从而具有了这些便捷的方法,而RecyclerView却是继承了ViewGroup实现的,并没有上面的俩方法。怎么搞?
很简单,我们在使用RecyclerView实现ListView的效果时,一定要设置其LayoutManager为LinearLayoutManager,而LinearLayoutManager的类说明是:

A RecyclerView.LayoutManager implementation which provides similar
functionality to android.widget.ListView.

很简单,LayoutManager
提供了与ListView相似的功能。不bb了,其实就是findFirstVisibleItemPosition()方法,可以实现与getFirstVisiblePosition()一样的效果,而pointToPosition(int
x, int y)这个则没有提供,因此我们需要自己来实现,代码如下:

private static final int INVALID_POSITION = -1; // 触摸到的点不在子View范围内
private Rect mTouchFrame;   // 子View所在的矩形范围
public int pointToPosition(int x, int y) {
    int firstPosition = ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition();
    Rect frame = mTouchFrame;
    if (frame == null) {
        mTouchFrame = new Rect();
        frame = mTouchFrame;
    }

    final int count = getChildCount();
    for (int i = count - 1; i >= 0; i--) {
        final View child = getChildAt(i);
        if (child.getVisibility() == View.VISIBLE) {
            child.getHitRect(frame);
            if (frame.contains(x, y)) {
                return firstPosition + i;
            }
        }
    }
    return INVALID_POSITION;
}

分析一下:首先获取第一个View对应的mFirstPosition,然后使用Rect.contains(x,
y)通过遍历所有子View的范围来确定指定的点所在的子view。然后position + i,即可获得到触碰点的position。

代码是直接从AbsListView中copy过来用的,我在AbsListView源码中看了一下,这个方法并没有涉及到别的逻辑,里面用到的方法包括getChildCount()、getHitRect(Rect)都是ViewGroup、View以及Rect的方法,mTouchFrame则是缓存Rect用的,只在这个方法里使用,不会产生冲突,因此可以直接使用。

当然,你也可以直接仿照上面的方法,直接获取到触碰点所在的子View,这样也很方便。

2. 侧滑还是RecyclerView的正常滑动? 如何判断甩动

说说这个甩动的问题,甩动,我们这里通过VelocityTracker速度器来进行速度的判断,VelocityTracker这个我就不细说了,大致的几个api:

mVelocityTracker.addMovement(event);    // 添加触摸点MotionEvent
mVelocityTracker.computeCurrentVelocity(1000);   // 计算1s内x轴方向移动速度
mVelocityTracker.getXVelocity();    // 获取x方向移动速度,负值表示向左滑动

至于滑动的选择,我们在onInterceptTouchEvent(MotionEvent)中进行判断拦截:

@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
    int x = (int) e.getX();
    int y = (int) e.getY();
    obtainVelocity(e);
    switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            ...
            mPosition = pointToPosition(x, y);  // 获取触碰点所在的position
            if (mPosition != INVALID_POSITION) {
                View view = mFlingView;
                // 获取触碰点所在的view
                mFlingView = (ViewGroup) getChildAt(mPosition - ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition());
                // 这里判断一下如果之前触碰的view已经打开,而当前碰到的view不是那个view则立即关闭之前的view,此处并不需要担动画没完成冲突,因为之前已经abortAnimation
                if (view != null && mFlingView != view && view.getScrollX() != 0) {
                    view.scrollTo(0, 0);
                }
                // 这里进行了强制的要求,RecyclerView的子ViewGroup必须要有2个子view,这样菜单按钮才会有值,
                // 需要注意的是:如果不定制RecyclerView的子View,则要求子View必须要有固定的width。
                // 比如使用LinearLayout作为根布局,而content部分width已经是match_parent,此时如果菜单view用的是wrap_content,menu的宽度就会为0。
                if (mFlingView.getChildCount() == 2) {
                    mMenuViewWidth = mFlingView.getChildAt(1).getWidth();
                } else {
                    mMenuViewWidth = INVALID_CHILD_WIDTH;
                }
            }
            break;
        case MotionEvent.ACTION_MOVE:
            mVelocityTracker.computeCurrentVelocity(1000);
            // 此处有俩判断,满足其一则认为是侧滑:
            // 1.如果x方向速度大于y方向速度,且大于最小速度限制;
            // 2.如果x方向的侧滑距离大于y方向滑动距离,且x方向达到最小滑动距离;
            // 注意:之所以要小于负值,是因为向左滑则速度为负值
            float xVelocity = mVelocityTracker.getXVelocity();
            float yVelocity = mVelocityTracker.getYVelocity();
            if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
                    || Math.abs(x - mFirstX) >= mTouchSlop
                    && Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {
                mIsSlide = true;
                return true;
            }
            break;
        case MotionEvent.ACTION_UP:
            releaseVelocity();
            break;
    }
    return super.onInterceptTouchEvent(e);
}

上面的代码注释的很清楚,首先在ACTION_DOWN的时候获取到触碰到的子View。然后在ACTION_MOVE时,速度和距离满足其一,即认为需要拦截:

1. X轴方向滑动速度大于Y轴方向滑动速度,且X轴方向速度大于最小滑动速度;
2. X轴方向滑动距离大于Y轴方向滑动距离,且X轴方向距离大于最小滑动距离。

还有几个需要注意的地方是:

1. 如果ACTION_DOWN时,已经有view已经展开,而当前碰到的不是之前的view,要把之前展开的按钮给隐藏起来,但是如果是之前的View,则不会有变化;
2. 为了方便扩展菜单按钮,因此这里限制了只允许ItemView拥有两个子View;
3. 注意在最后释放VelocityTracker。

3. 松开手怎样实现平滑滚动

平滑滚动,我们使用了Scroller进行了滑动的辅助处理,这个网上讲述的很多,不多说了。
看一下处理view的代码:

@Override
public boolean onTouchEvent(MotionEvent e) {
    if (mIsSlide && mPosition != INVALID_POSITION) {
        float x = e.getX();
        obtainVelocity(e);
        switch (e.getAction()) {
            case MotionEvent.ACTION_DOWN:   // 因为没有拦截,所以不会被调用到
                break;
            case MotionEvent.ACTION_MOVE:
                // 随手指滑动
                if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
                    float dx = mLastX - x;
                    if (mFlingView.getScrollX() + dx <= mMenuViewWidth
                            && mFlingView.getScrollX() + dx > 0) {
                        mFlingView.scrollBy((int) dx, 0);
                    }
                    mLastX = x;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
                    int scrollX = mFlingView.getScrollX();
                    mVelocityTracker.computeCurrentVelocity(1000);
                    // 此处有两个原因决定是否打开菜单:
                    // 1.菜单被拉出宽度大于菜单宽度一半;
                    // 2.横向滑动速度大于最小滑动速度;
                    // 注意:之所以要小于负值,是因为向左滑则速度为负值
                    if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) {    // 向左侧滑达到侧滑最低速度,则打开
                        mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
                    } else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) {  
                        // 向右侧滑达到侧滑最低速度,则关闭
                        mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
                    } else if (scrollX >= mMenuViewWidth / 2) { // 如果超过删除按钮一半,则打开
                        mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
                    } else {    // 其他情况则关闭
                        mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
                    }
                    invalidate();
                }
                ...
                releaseVelocity();
                break;
        }
        return true;
    } else {
        // 此处防止RecyclerView正常滑动时,还有菜单未关闭
        closeMenu();
        // Velocity,这里的释放是防止RecyclerView正常拦截了,但是在onTouchEvent中却没有被释放;
        // 有三种情况:1.onInterceptTouchEvent并未拦截,在onInterceptTouchEvent方法中,DOWN和UP一对获取和释放;
        // 2.onInterceptTouchEvent拦截,DOWN获取,但事件不是被侧滑处理,需要在这里进行释放;
        // 3.onInterceptTouchEvent拦截,DOWN获取,事件被侧滑处理,则在onTouchEvent的UP中释放。
        releaseVelocity();
    }
    return super.onTouchEvent(e);
}

Ok,上面是手指滑动的view处理,注释也都标了:

  • DOWN事件因为没有被拦截,所以不会处理;
  • MOVE事件,如果滑动的范围在菜单的距离限制内,则随着手指滑动;
  • UP事件,上面写的很清楚,如果菜单被拉出超过一半,或者是甩动,就都会打开(或关闭)菜单。

同样,也有几点需要注意的:

  • 我们要限制随手指滑动时,不能超出菜单宽度的范围,当然如果你有需求也可以修改这里;

  • UP时,一定要调用mVelocityTracker.computeCurrentVelocity(1000)计算速度;

  • 最后UP的几个条件要注意,因为X轴速度getXVelocity()负值表示向左滑动,正值表示向右,这里会先判断速度,如果速度满足条件,则不论菜单被拉出的范围都要进行相应的打开或关闭操作。如果速度不达到条件,则会根据菜单被拉出的宽度范围来决定菜单是关上还是打开;

  • VelocityTracker的释放操作,如上面的注释,有三个地方需要对其进行释放:

    • onInterceptTouchEvent并未拦截,在onInterceptTouchEvent方法中,DOWN和UP一对获取和释放;
    • onInterceptTouchEvent拦截,DOWN获取,但事件不是被侧滑处理,需要先在onTouchEvent中释放掉;
    • onInterceptTouchEvent拦截,DOWN获取,事件被侧滑处理,则在onTouchEvent的UP中释放。

三、代码与注意事项

完整代码放在GitHub上:RecyclerView实现侧滑

最后,为了不写死菜单按钮的点击事件,我们把菜单的点击事件留给用户自己在Adapter中实现,同时也暴露了closeMenu()方法来用于用户点击菜单之后手动关闭菜单。

注意:由于没有定制ItemView,所以如果我们使用LinearLayout作为Item根布局而内容区域宽度为MATCH_PARENT时,菜单按钮要有指定的大小,不能是WRAP_CONTENT,因为那样会使菜单按钮宽度为0,则没有滑动效果。当然如果你自己定制了ItemView,同时指定了菜单宽度,也是可以的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/549706.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

node + alipay-sdk 沙箱环境简单测试电脑网站支付

正式上线需要上传营业执照&#xff0c;不知道怎么去申请一个。。。。。 使用沙箱测试&#xff0c;首先前往支付宝开放平台控制台可看到左下方的沙箱测试链接&#xff1a; 然后设置接口加签方式&#xff0c;选择系统默认密钥&#xff1a; 系统默认密钥 -> 公钥模式 -> 查看…

将小米SoundMove 无缝接入 ChatGPT

将小米SoundMove 无缝接入 ChatGPT 本教程内容参考 Github 地址(可选)部署查看小米 SoundMove 信息的环境(可选)查看小米 SoundMove 的信息以容器方式部署程序到小米万兆路由器实际效果有待改善点 本教程内容 1 是记录了将小米 SoundMove 接入 ChatGPT 的操作步骤。 2 是将小米…

Chrome Performance 页面性能分析

Chrome Performance 页面性能分析 背景介绍 性能优化是前端开发一个非常重要的组成部分&#xff0c;如何更好地进行网络传输&#xff0c;如何优化浏览器渲染过程&#xff0c;来定位项目中存在的问题。Chrome DevTools给我们提供了2种常用方式 Audits和Performance&#xff0c…

Flink学习——基本转换算子

目录 一、filter算子 二、map算子 三、聚合算子 1.keyBy——按键分区 2.简单聚合 (1)min&#xff1a;在输入流上&#xff0c;对指定的字段求最小值 (2)minBy&#xff1a;返回包含字段最小值的整条数据 (3)max&#xff1a;在输入流上&#xff0c;对指定的字段求最大值 …

【Navicat 连接MySQL时出现错误1251:客户端不支持服务器请求的身份验证协议;请考虑升级MySQL客户端】

使用Navicat连接时报1251错误&#xff0c;如下图&#xff1a; 原因 MySQL8.0后的版本加密规则是“caching_sha2_password”&#xff0c;而 MySQL8.0之前的版本加密规则是“mysql_native_password” 解决办法 更改加密规则&#xff0c;将MySQL用户登录密码加密规则还原成“…

Python:常见的面试题和答案

1. 什么是Python&#xff1f; 答&#xff1a;Python是一种高级编程语言&#xff0c;被广泛应用于Web开发、数据分析、人工智能等领域。 2. Python的优点是什么&#xff1f; Python的优点包括&#xff1a; 简单易学&#xff1a;Python语法简单&#xff0c;易于上手&#xff…

chatgpt赋能Python-pythonfly

PythonFly介绍 PythonFly是一个功能丰富的Python Web框架&#xff0c;它提供了快速开发Web应用的工具和方法。PythonFly可以轻易扩展、分布式部署和最小化代码重复。PythonFly利用Python的清晰和简单的语法&#xff0c;让Web应用程序更容易阅读和维护。 PythonFly的特点 快速…

CSS图像填充文字(镂空文字效果 / 文字镂空效果)

先展示一下最终效果&#xff1a; 开始做 1. 搭建基本代码结构 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>CSS图像填充文字&#xff08;镂空文字效果&#xff09;</title></head><body><div cl…

20230520查找中国移动的APP在RK3566下调用UVC摄像头出错

20230520查找中国移动的APP在RK3566下调用UVC摄像头出错 2023/5/20 23:34 SDK&#xff1a;Android12RK3566平台 android12 UVC camera 没插摄像头&#xff0c;但是/dev/video0-13标号被占用&#xff0c;是啥原因导致的 板子上也没有摄像头 【板子没有接CSI/MIPI接口的I2C通道…

操作系统(持续更新)

操作系统的定义 操作系统&#xff08;operating system&#xff0c;OS&#xff09;是配置在计算机硬件上的第一层软件&#xff0c;是对硬 件系统的首次扩充&#xff0c;其主要作用是管理硬件设备&#xff0c;提高它们的利用率和系统吞吐量&#xff0c;并为 用户和应用程序提供一…

Spring Cloud 和3种架构分析 以及微服务的详细分析和示意图

目录 SpringCloud & SpringCloud Alibaba架构介绍 Spring Cloud 基本介绍 官方文档 提出问题, 引出微服务 单机架构 - 示意图 动静分离架构&#xff1a;静态缓存 文件存储 解析 分布式架构&#xff1a;业务拆分负载均衡 解析 微服务架构&#xff1a;使用Spring Clo…

UE C++ Windows平台调用讯飞语音合成接口

UE C Windows平台调用讯飞语音合成接口 环境设置调用讯飞语音接口回放语音数据输出EXE 环境设置 下载讯飞语音合成的Windows平台的C版本SDK&#xff0c;包含lib库文件和dll动态链接库在UE工程下新建一个ThirdParty/msc目录&#xff0c;将lib库文件和dll动态链接库放入其中[PRO…

mybatis是如何集成到spring的之托管mapper接口

前言 mybatis集成到spring可以参考spring mvc集成mybatis进行数据库访问 &#xff0c;其中mybatis集成到spring最重要的两个配置分别是SqlSessionFactoryBean和MapperScannerConfigurer&#xff0c;如下所示&#xff1a; <!--mybatis sqlSeesionFactory配置--><bean…

实验五 串行通讯建模以及教程

目录 教程&#xff1a; 第一步下载matlib 第二步找到Simulink 相关文件 链接&#xff1a;https://pan.baidu.com/s/1Im-TUVfV4d8dok2ebXbmjw?pwd2222 提取码&#xff1a;2222 【实验目的】 1、了解MATLAB软件环境和Simulink建模过程&#xff0c;掌握Simulink图形化编程方…

给 compose draw 绘制的非规则图形添加点击监听

前言 导言 在之前的两篇文章中&#xff0c;我们从实例出发&#xff0c;以实践的方式简单介绍了 compose 自定义绘制&#xff08;如何自己绘制想要的控件&#xff09;、为自定义绘制增加动画&#xff08;让控件动起来&#xff09;。 在这篇文章中&#xff0c;我们依然从实例出…

Linux 权限-+完整思维导图+实图例子+深入细节+通俗易懂建议收藏

绪论 当时间的主人&#xff0c;命运的主宰&#xff0c;灵魂的舵手。上一回已将基础权限全部学习完了&#xff0c;本章开始我们将进入到权限的学习。 话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑观看&#xff09;。 附&#xff1a;红色&#xff0c;部分为重点部分…

基于Gitee的webhook编写hugo的自动构建实现博客自动更新

前言 差不多半年前趁着某云优惠&#xff0c;我买了5年的轻量级应用服务器。 拿着这个服务器原本打算做我的某个APP的服务端的&#xff0c;后来又觉得迁移数据好麻烦&#xff0c;所以随便搞了个博客上去。 选来选去&#xff0c;使用了 hugo 作为构建引擎。 正好&#xff0c;…

跟我一起使用 compose 做一个跨平台的黑白棋游戏(1)整体实现思路

前言 为什么写这系列文章 虽然 compose 正式版已经出来很久了&#xff0c;也有很多大佬写了很多教程文章和实例 demo &#xff0c;但是对于 compose 其实我也还是一知半解的。 特别是对于 compose 的状态管理&#xff0c;由于 compose 声明式的特性&#xff0c;如果不对状态…

chatgpt赋能Python-pythonfor怎么用

PythonFor SEO&#xff1a;如何利用Python提高SEO效果 SEO&#xff08;搜索引擎优化&#xff09;是现代数字营销中至关重要的一环。随着搜索引擎算法不断发展&#xff0c;优化网站以提高排名已经成为了一门复杂的艺术。幸运的是&#xff0c;Python提供了一些强大的工具来简化这…

chatgpt赋能Python-pythonelem

PythonELEM - 简易的Python学习工具 作为一名有10年Python编程经验的工程师&#xff0c;我可以深刻地体会到新手们学习Python的难处。PythonELEM是一个以Python为主题的学习工具&#xff0c;它可以帮助初学者更容易地掌握Python编程。 PythonELEM的功能 PythonELEM是一个简易…