【Android】史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。

本控件从撸出来在项目使用至今已经过去7个月,距离第一次将它push至github上,也已经2月+。(之前,我发表过一篇文章。传送门:http://blog.csdn.net/zxt0601/article/details/52303781, 里面详细描述了本控件V1.0版本是怎么实现的。)

期间有很多朋友在评论、issue里提出了一些改进意见,例如支持设置滑动方向(左右)、高仿QQ的交互、支持GridLayoutManager等,以及一些bug。已经被我全部实、修复。并且将其打包至jitpack,引入更方便。和第一版相比,改动挺多的。故将其整理,新发一版。

那么本文先从如何使用它讲起,然后介绍它包含的特性、支持的属性。最后就几个难点和冲突的解决进行讲解。

代码传送门:喜欢的话,随手点个star。多谢

https://github.com/mcxtzhang/SwipeDelMenuLayout

先上几个gif给各位看官感受一下最新版的魅力(以下版本都顺便展示了可选的双向滑动)

本控件最大魅力就是0耦合,所以先上配合我另一个库组装的效果(ItemDecorationIndexBar + SwipeMenuLayout):

(ItemDecorationIndexBar : https://github.com/mcxtzhang/ItemDecorationIndexBar)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Android Special Version (无阻塞式,侧滑菜单展开时,依然可以展开其他侧滑菜单,同时上一个菜单会自动关闭):

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

GridLayoutManager (和上图的代码比,只需修改RecyclerView的LayoutManager。):

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

LinearLayout (不需任何修改,连LinearLayout也可以简单的实现侧滑菜单):

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

iOS interaction (阻塞式交互,高仿QQ,侧滑菜单展开式,屏蔽其他ITEM所有操作):

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用:

===

Step 1. 在项目根build.gradle文件中增加JitPack仓库依赖。

allprojects {

repositories {

maven { url “https://jitpack.io” }

}

}

Step 2. Add the dependency

dependencies {

compile ‘com.github.mcxtzhang:SwipeDelMenuLayout:V1.2.1’

}

Step 3. 在需要侧滑删除的ContentItem外面套上本控件,在本控件内依次排列ContentItem、菜单即可:

至此 您就可以使用高仿IOS、QQ 侧滑删除菜单功能了

(侧滑菜单的点击事件等是通过设置的id取到,与其他控件一致,不再赘述)

Demo里,我的ContentItem是一个TextView,那么我就在其外嵌套本控件,并且以侧滑菜单出现的顺序,依次排列菜单控件即可。

<?xml version="1.0" encoding="utf-8"?>

<com.mcxtzhang.swipemenulib.SwipeMenuLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“100dp”

android:clickable=“true”

android:paddingBottom=“1dp”>

<TextView

android:id=“@+id/content”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:background=“?android:attr/selectableItemBackground”

android:gravity=“center”

android:text=“项目中我是任意复杂的原ContentItem布局”/>

<Button

android:id=“@+id/btnTop”

android:layout_width=“60dp”

android:layout_height=“match_parent”

android:background=“#d9dee4”

android:text=“置顶”

android:textColor=“@android:color/white”/>

<Button

android:id=“@+id/btnUnRead”

android:layout_width=“120dp”

android:layout_height=“match_parent”

android:background=“#ecd50a”

android:clickable=“true”

android:text=“标记未读”

android:textColor=“@android:color/white”/>

<Button

android:id=“@+id/btnDelete”

android:layout_width=“60dp”

android:layout_height=“match_parent”

android:background=“@color/red_ff4a57”

android:text=“删除”

android:textColor=“@android:color/white”/>

</com.mcxtzhang.swipemenulib.SwipeMenuLayout>


支持属性:

=====

1 通过 isIos 变量控制是否是IOS阻塞式交互,默认是打开的。

2 通过 isSwipeEnable 变量控制是否开启右滑菜单,默认打开。(某些场景,复用item,没有编辑权限的用户不能右滑)

3 通过开关 isLeftSwipe支持左滑右滑

有两种方式设置:

一:xml:

<com.mcxtzhang.swipemenulib.SwipeMenuLayout

xmlns:app=“http://schemas.android.com/apk/res-auto”

app:ios=“false”

app:leftSwipe=“true”

app:swipeEnable=“true”>

二: java代码:

//这句话关掉IOS阻塞式交互效果 并依次打开左滑右滑 禁用掉侧滑菜单

((SwipeMenuLayout) holder.itemView).setIos(false).setLeftSwipe(position % 2 == 0 ? true : false).setSwipeEnable(false);

支持特性:

=====

  • 不会同时展开2+个侧滑菜单。(可见界面上最多只会出现一个侧滑菜单)。

  • 侧滑过程中,禁止父控件上下滑动。

  • 多指同时滑动,屏蔽后触摸的几根手指。

  • 增加viewChache 的 get()方法,可以用在:当点击外部空白处时,关闭正在展开的侧滑菜单。

  • 以第一个子Item(即ContentItem)的宽度为控件宽度

每次更新的checklist:

===============

由于持续迭代,会发生完成一个feature、fix一个bug后,导致新的bug。

so,整理一份checkList,供每次迭代后验证,都通过,才会push到github库上。

| 项目 | 备注 | 验证 |

| — | — | — |

| isIos | 切换至IOS阻塞交互模式、Android特色无阻塞交互模式 以下feature都可正常工作 | |

| isSwipeEnable | 是否支持关闭侧滑功能 | |

| isLeftSwipe | 是否支持双向滑动 | |

| ContentItem内容可单击 | | |

| ContentItem内容可长按 | | |

| 侧滑菜单显示时,ContentItem不可点击 | | |

| 侧滑菜单显示时,ContentItem不可长按 | | |

| 侧滑菜单显示时,侧滑菜单可以点击 | | |

| 侧滑菜单显示时,点击ContentItem区域关闭菜单 | | |

| 侧滑过程中,屏蔽长按事件 | | |

| 通过滑动关闭菜单,不应该触发ContentItem点击事件 | | |

难点、冲突的解决:

=========

1 ContentItem的长按和本控件侧滑的冲突。

一开始我还是老思路,一直都是通过判断手指起始落点的坐标,判断手指落点处于何位置,屏蔽一些操作。当本控件功能越来越庞大,计算开始复杂,也容易出错。但也跌跌撞撞的撑了过来,但就在今天,我想到了另一种思路:通过禁用子View的longClickable属性来完成这个功能。于是我重构这部分代码,先利用git 查看之前的提交,去除掉那部分代码,并

在侧滑菜单展开smoothExpand()、关闭smoothClose​ ()的函数中分别加入:

//2016 11 13 add 侧滑菜单展开,屏蔽content长按

if (null != mContentView) {

mContentView.setLongClickable(true);

}

//2016 11 13 add 侧滑菜单展开,屏蔽content长按

if (null != mContentView) {

mContentView.setLongClickable(true);

}

代码就这么简单,几小时前我才想到这么简单的解决方法,这也是促使我新撸一遍文章,记录本控件的一些改动的缘由之一。

2 如何支持任意父控件

这算是本控件最酷炫的魅力之一吧,在之前的文章 ,我详细描述了实现过程。

总结起来,我利用了一个static变量,保存了当前正在展开的View,

在进行各项操作时就可预先判断,如若会引起冲突,例如界面上出现两个侧滑菜单,

便自动关闭上一个菜单。

代码如下:

//存储的是当前正在展开的View

private static SwipeMenuLayout mViewCache;

dispatchTouchEvent()的ActionDown里:

//如果down,view和cacheview不一样,则立马让它还原。且把它置为null

if (mViewCache != null) {

if (mViewCache != this) {

mViewCache.smoothClose();

}

//只要有一个侧滑菜单处于打开状态, 就不给外层布局上下滑动了

getParent().requestDisallowInterceptTouchEvent(true);

}

在侧滑菜单展开smoothExpand()、关闭smoothClose()的函数:

//展开就加入ViewCache:

mViewCache = SwipeMenuLayout.this;

//关闭置为null

mViewCache = null;

onDetachedFromWindow()里:

//每次ViewDetach的时候,判断一下 ViewCache是不是自己,如果是自己,关闭侧滑菜单,且ViewCache设置为null,

// 理由:1 防止内存泄漏(ViewCache是一个静态变量)

// 2 侧滑删除后自己后,这个View被Recycler回收,复用,下一个进入屏幕的View的状态应该是普通状态,而不是展开状态。

@Override

protected void onDetachedFromWindow() {

if (this == mViewCache) {

mViewCache.smoothClose();

mViewCache = null;

}

super.onDetachedFromWindow();

}

3 解决多指滑动冲突:

利用一个布尔值 flag,在ActionDown时判断是否继续接受触摸事件:

代码如下:

最后

小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取
s == mViewCache) {

mViewCache.smoothClose();

mViewCache = null;

}

super.onDetachedFromWindow();

}

3 解决多指滑动冲突:

利用一个布尔值 flag,在ActionDown时判断是否继续接受触摸事件:

代码如下:

最后

小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-cPlpXcSG-1719094483490)]一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取

  • 23
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值