史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。
重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup.
本控件不依赖任何父布局,不是针对 RecyclerView、ListView,而是任意的ViewGroup里的childView都可以使用侧滑(删除)菜单。
支持任意ViewGroup、0耦合、史上最简单。
概述
本控件从撸出来在项目使用至今已经过去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时判断是否继续接受触摸事件:
代码如下:
- //防止多只手指一起滑我的flag 在每次down里判断, touch事件结束清空
- private static boolean isTouching;
dispatchTouchEvent()
的ActionDown里:
- if (isTouching) {//如果有别的指头摸过了,那么就return false。这样后续的move..等事件也不会再来找这个View了。
- return false;
- } else {
- isTouching = true;//第一个摸的指头,赶紧改变标志,宣誓主权。
- }
ActionUp里:
- isTouching = false;//没有手指在摸我了
4 支持GridLayoutManager
毕竟项目中在网格布局中使用侧滑菜单还属少数,所以一开始我将场景简单化,给本控件设置的宽度都是父控件的宽度-padding。后来有童鞋提出希望支持网格布局,一开始我思路也走了弯路,我还想着构建一个MatchParent的MeasureSpec,然后传给父控件(GridView、RecyclerView)用于测量呢。
正确思路是,取第一个子View,即ContentView的宽度用作本控件的宽度即可,这样在layout侧滑菜单时,自然而然将侧滑菜单layout在了不可见的区域,只有通过滑动才能显示它。
代码也没啥好说的:
在onMeasure()
中:
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- //2016 11 09 add,适配GridLayoutManager,将以第一个子Item(即ContentItem)的宽度为控件宽度
- int contentWidth = 0;
- int childCount = getChildCount();
- for (int i = 0; i < childCount; i++) {
- View childView = getChildAt(i);
- if (childView.getVisibility() != GONE) {
- measureChildWithMargins(childView, widthMeasureSpec, 0, heightMeasureSpec, 0);
- final MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
- mHeight = Math.max(mHeight, childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
- if (i > 0) {//第一个布局是Left item,从第二个开始才是RightMenu
- mRightMenuWidths += childView.getMeasuredWidth();
- } else {
- contentWidth = childView.getMeasuredWidth();
- }
- }
- }
- setMeasuredDimension(contentWidth, mHeight);//宽度取第一个Item(Content)的宽度
- }
在onLayout()
中,顺序layoutchildView即可。
总结
以上是本控件近期or大家感兴趣的一些点的详解,更详细的讲解可去上篇文章观看,或者去github上下载源码浏览。
上文地址:
http://blog.csdn.net/zxt0601/article/details/52303781
代码传送门:
https://github.com/mcxtzhang/SwipeDelMenuLayout
史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。的更多相关文章
- 史上最简单的SpringCloud教程 | 第十篇: 高可用的服务注册中心(Finchley版本)
转载请标明出处: 原文首发于 https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f10-eureka/ 本文出自方志朋的博客 文章 史上最简单 ...
- 史上最简单的SpringCloud教程 | 第七篇: 高可用的分布式配置中心(Spring Cloud Config)
上一篇文章讲述了一个服务如何从配置中心读取文件,配置中心如何从远程git读取配置文件,当服务实例很多时,都从配置中心读取文件,这时可以考虑将配置中心做成一个微服务,将其集群化,从而达到高可用,架构图如 ...
- 史上最简单的SpringCloud教程 | 第三篇: 服务消费者(Feign)
转载请标明出处: https://www.fangzhipeng.com/springcloud/2017/07/12/sc03-feign/ 本文出自方志朋的博客 最新Finchley版本请访问: ...
- 史上最简单的 SpringCloud 教程
史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)史上最简单的SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon)史上最简单的Spri ...
- 史上最简单的 SpringCloud 教程 | 终章
https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...
- (转) 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)
一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...
- [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)
[分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...
- 史上最简单的排序算法?看起来却满是bug
大家好,我是雨乐. 今天在搜论文的时候,偶然发现一篇文章,名为<Is this the simplest (and most surprising) sorting algorithm ever ...
- 史上最简单的 GitHub 教程
史上最简单的 GitHub 教程 温馨提示:本系列博文已经同步到 GitHub,如有需要的话,欢迎大家到「github-tutorial」进行Star和Fork操作! 1 简介 GitHub 是一个面 ...
随机推荐
- CCS 6新建TMS320F2812工程
准备材料 CCS6 下载地址:http://www.ti.com/tool/ccstudio F2812的C语言头文件 下载地址:http://www.ti.com/lit/zip/sprc097 安 ...
- .Net Core Linux centos7行—.net core json 配置文件
.net core 对配置系统做出了大幅度更新,不在局限于之前的*.xml配置方式.现在支持json,xml,ini,in memory,环境变量等等.毫无疑问的是,现在的json配置文件是.net ...
- django static文件的引入方式
1. 在django project中创建 static文件夹 2.settings.py中配置要在 STATIC_URL = '/static/' 下边 STATICFILES_DIRS = [ ...
- 在渲染前获取 View 的宽高
在渲染前获取 View 的宽高 这是一个比较有意义的问题,或者说有难度的问题,问题的背景为:有时候我们需要在view渲染前去获取其宽高,典型的情形是,我们想在onCreate.onStart.onRe ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
- ionic 界面数据缓存问题
在ionic开发过程中列表到详情,在返回是可能存在,列表重新加载问题,不能回到用户上次点击的地方 在处理前期各种坑,把详情设置为弹出层,缓存数据等等,然而会出现各种问题,无意间发现一篇文章,一个属性解 ...
- 10月25日下午PHP静态、抽象、接口
多态(运行多态)概念:当父类引用指向子类实例,由于子类里面对父类的方法进行了重写,父类引用在调用该方法的时候表现出的不同状态.条件:1.必须发生在继承下2.必须重写父类方法3.父类引用调用该方法 如果 ...
- Google Map API V3开发(1)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- [Head First设计模式]生活中学设计模式——迭代器模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...