一、背景
前面已经实现了 RecyclerView 的下拉刷新和上拉加载更多，给 RecyclerView 添加 header，这两个用的比较多，这次实现的是滑动菜单，实现这个是因为产品经理通常会告诉你，我们要做一个和某某应用一样的效果。有人就说了：“这产品总是模仿，总是让做和别人一样的效果（小声嘀咕：关键这还真不那么容易实现）”。这就不能忍，那还有让你更不能忍的，产品告诉你做一个跟 QQ 的滑动菜单一毛一样的效果，然后你去网上一搜“仿 QQ 滑动菜单”，嚯，这么多写好的裤子，直接拿来用；然后产品说，效果要一样，但是某个地方要小改一下，例如，四面八方都加上图标，就像下面这样：
你有点郁闷了，做成一样不就好了，这现成的裤子都是彷 QQ 的，怎么加图标呀。然后你只好去 Read the fucking code，看看是否支持设置图标，或者能不能改一改库源码来实现，不过你惊喜的发现这裤子居然支持 setMenuBtnImage()，通过这个就能直接设置滑动菜单的图标了，但是当你测试了下之后发现，这玩意是写死的，图标只能定在左边，这就不好实现在四面八方加图标了呀，然后你决定改一下库源码来实现一下这个效果，可是你刚准备开改时，扫地大妈来了，大妈看了一眼后很感兴趣的说了：“你们这个效果我见过，我给你们提个建议啊，这个滑出来的菜单要让人一看就感觉热血沸腾，让用户有一种冲冠一怒为红颜的冲动，要让用户觉得他只要点一下就能上天了…”，产品一听，行，你这个建议好啊，我们就这样干。这样吧，我也不为难你们研发的，我给你个动画，你给我放到这个图标的位置，我要放一匹骏马儿在那奔跑，用户一滑出来就能看见，嘚儿驾~。
你仿佛听见了心中羊驼跑过的声音，大妈你是干啥的？你是来公司体验生活的吧？这时刚走开的大妈接起了电话：“房子？都租出去了，对，六套都租出去了”。
你看了看这灯红酒绿的城市，天空中飘满的雾霾，心中想起了家乡的小薇的你无语凝噎。得，自己写一个吧，你想怎么改就怎么改。
下面是最终效果：
二、思路分析
1.要搞一个能跟着手指左右滑动的 Layout，在这个 Layout 里有正文部分和菜单部分，正文部分占满整个控件的宽，菜单部分在正文的右边，手指往左滑动时滑出菜单部分；
2.控制滑动边界，往左滑动时最多滑动到右边菜单完全显示，往右滑动时最多滑动到正文完全显示，也就是初始状态；
3.手指滑完抬起时，判断是否应该是打开状态还是关闭状态，自动滑动到相应位置；
4.Layout 要做滑动冲突处理，以防 Layout 的滑动操作影响菜单的点击事件；
5.把这个写好的 Layout 放到 RecyclerView 的 item 里，并处理这个滑动 Layout 和 RecyclerView 的滑动冲突；
6.仿 QQ 交互优化，用户滑动 RecyclerView 时，开启的滑动菜单会立即关闭；
三、具体实现
1.首先了解一下 Scroller 的用法，不了解的可以看看郭大佬的一篇文章，本文最后贴出了连接，这个类是用来处理 View 滑动的相关操作，主要是为了实现抬起手指后控制 ScrollerLayout平滑滚动到相应的位置的，具体代码如下：
public class ScrollerLayout extends ViewGroup {
/**
* 用于完成滚动操作的实例
*/
private Scroller mScroller;
/**
* 判定为拖动的最小移动像素数
*/
private int mTouchSlop;
/**
* 手机按下时的屏幕坐标
*/
private float mXDown;
/**
* 手机当时所处的屏幕坐标
*/
private float mXMove;
/**
* 上次触发ACTION_MOVE事件时的屏幕坐标
*/
private float mXLastMove;
/**
* 界面可滚动的左边界
*/
private int leftBorder;
/**
* 界面可滚动的右边界
*/
private int rightBorder;
private int mSwipViewWidth;
private int scrolledX;
private float xDown;
private float yDown;
public ScrollerLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// 第一步，创建Scroller的实例
mScroller = new Scroller(context);
ViewConfiguration configuration = ViewConfiguration.get(context);
// 获取TouchSlop值
mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
setClickable(true);
setFocusable(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measuredHeight = 0;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
// 为ScrollerLayout中的每一个子控件测量大小
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
measuredHeight = Math.max(measuredHeight, childView.getMeasuredHeight());
}
setMeasuredDimension(getMeasuredWidth(), measuredHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
int childCount = getChildCount();
if (childCount > 2) {
throw new IllegalStateException("you can have at most two child views!");
}
if (childCount <= 0) {
return;
}
int width = 0;
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
// 为ScrollerLayout中的每一个子控件在水平方向上进行布局
int measuredWidth = childView.getMeasuredWidth();
childView.layout(width, 0, width + measuredWidth, childView.getMeasuredHeight());
width += measuredWidth;
if (i == childCount - 1) {
mSwipViewWidth = measuredWidth;
}
}
// 初始化左右边界值
leftBorder = getChildAt(0).getLeft();
rightBorder = getChildAt(getChildCount() - 1).getRight();
}
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDown = ev.getX();
yDown = ev.getY();
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
if (Math.abs(xDown - ev.getX()) > Math.abs(yDown - ev.getY())) {
getParent().requestDisallowInterceptTouchEvent(true);
} else {
getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_UP:
getParent().requestDisallowInterceptTouchEvent(false);
break;
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return super.dispatchTouchEvent(ev);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mXDown = ev.getRawX();
mXLastMove = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mXMove = ev.getRawX();
float diff = Math.abs(mXMove - mXDown);
mXLastMove = mXMove;
// 当手指拖动值大于TouchSlop值时，认为应该进行滚动，拦截子控件的事件
if (diff > mTouchSlop) {
return true;
}
break;
}
return super.onInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
mXMove = event.getRawX();
scrolledX = (int) (mXLastMove - mXMove);
if (getScrollX() + scrolledX < leftBorder) {
scrollTo(leftBorder, 0);
return true;
} else if (getScrollX() + getWidth() + scrolledX > rightBorder) {
scrollTo(rightBorder - getWidth(), 0);
return true;
}
scrollBy(scrolledX, 0);
mXLastMove = mXMove;
break;
case MotionEvent.ACTION_UP:
int dx;
int targetX = scrolledX > 0 ? mSwipViewWidth / 5 : mSwipViewWidth * 4 / 5;
//判断打开还是关闭
if (getScrollX() > targetX) {
dx = mSwipViewWidth - getScrollX();
} else {
dx = -getScrollX();
}
// 第二步，调用startScroll()方法来初始化滚动数据并刷新界面
mScroller.startScroll(getScrollX(), 0, dx, 0);
invalidate();
break;
}
return super.onTouchEvent(event);
}
@Override
public void computeScroll() {
// 第三步，重写computeScroll()方法，并在其内部完成平滑滚动的逻辑
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
invalidate();
}
}
public boolean isOpen() {
return getScrollX() > 0;
}
}
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.ScrollerActivity">
<com.lcp.arecyclerview.ScrollerLayout
android:id="@+id/scrollView"
android:layout_width="300dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="50dp"
android:background="#e1d9d9">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e2c4c4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is item view" />
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="button"/>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/settop"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#C8C7CD"
android:gravity="center"
android:text="置顶" />
<TextView
android:id="@+id/collect"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#FDA005"
android:gravity="center"
android:text="标记已读" />
<TextView
android:id="@+id/delete"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#FD3B32"
android:gravity="center"
android:text="删除" />
</LinearLayout>
</com.lcp.arecyclerview.ScrollerLayout>
</android.support.constraint.ConstraintLayout>
代码说明：
在 onLayout 里为每个 childView 按照上面 2.1 的要求布局，正文的宽占满整个控件的宽，菜单部分放到正文的右边，并记录下菜单部分的宽度 mSwipViewWidth 和边界值；
int width = 0;
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
// 为ScrollerLayout中的每一个子控件在水平方向上进行布局
int measuredWidth = childView.getMeasuredWidth();
childView.layout(width, 0, width + measuredWidth, childView.getMeasuredHeight());
width += measuredWidth;
if (i == childCount - 1) {
mSwipViewWidth = measuredWidth;
}
}
// 初始化左右边界值
leftBorder = getChildAt(0).getLeft();
rightBorder = getChildAt(getChildCount() - 1).getRight();
然后处理滑动边界和手指抬起时的状态判断：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
mXMove = event.getRawX();
scrolledX = (int) (mXLastMove - mXMove);
if (getScrollX() + scrolledX < leftBorder) {
scrollTo(leftBorder, 0);
return true;
} else if (getScrollX() + getWidth() + scrolledX > rightBorder) {
scrollTo(rightBorder - getWidth(), 0);
return true;
}
scrollBy(scrolledX, 0);
mXLastMove = mXMove;
break;
case MotionEvent.ACTION_UP:
int dx;
int targetX = scrolledX > 0 ? mSwipViewWidth / 5 : mSwipViewWidth * 4 / 5;
//判断打开还是关闭
if (getScrollX() > targetX) {
dx = mSwipViewWidth - getScrollX();
} else {
dx = -getScrollX();
}
// 第二步，调用startScroll()方法来初始化滚动数据并刷新界面
mScroller.startScroll(getScrollX(), 0, dx, 0);
invalidate();
break;
}
return super.onTouchEvent(event);
}
再处理上面的 2.4，ScrollerLayout 和其子控件的滑动冲突：
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mXDown = ev.getRawX();
mXLastMove = mXDown;
break;
case MotionEvent.ACTION_MOVE:
mXMove = ev.getRawX();
float diff = Math.abs(mXMove - mXDown);
mXLastMove = mXMove;
// 当手指拖动值大于TouchSlop值时，认为应该进行滚动，拦截子控件的事件
if (diff > mTouchSlop) {
return true;
}
break;
}
return super.onInterceptTouchEvent(ev);
}
到这里滑动控件就做好了，单独使用时已经可以实现滑动菜单效果了，可以放到 RecyclerView 的 item 布局里试上一试，然后你会发现有几个奇怪的地方，例如 item 菜单往出滑时还能同时滑动 RecyclerView，如果是和 RecyclerView 同时滑动滑出的菜单，当你手指松开时，ScrollerLayout 的 onTouchEvent 将收不到 ACTION_UP 事件，这就导致 二.3 的逻辑不会执行；这时就得处理 二.5 问题，处理 ScrollerLayout 与 RecyclerView 的滑动冲突，这就要自定义一下 RecyclerView 了，因为要修改 RecyclerView 拦截触摸事件的逻辑；说到处理滑动冲突，大家肯定条件反射的想到两种方式，一种是通过从父 ViewGroup 里判断是否拦截来控制，另一种是通过在子控件里判断是否要申请滑动权限（getParent().requestDisallowInterceptTouchEvent()）来控制，就像提到元歌你就想到1433223一样。
经过深思熟虑之后，我决定把这个逻辑控制放到 ScrollerLayout 里，因为我想让 RecyclerVIew 尽量少的改动，但是即便如此，也得让 RecyclerView 的拦截事件在 ACTION_DOWN 时先返回 false，所以对 RecyclerView 的修改如下：
/**
* Created by Aislli on 2019/3/18 0018.
*/
public class MyRecyclerView extends RecyclerView {
int mLastTouchPosition = -1;
private ScrollerLayout mLastTouchItem;
public MyRecyclerView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = ev.getAction() & MotionEvent.ACTION_MASK;
boolean intercept = super.onInterceptTouchEvent(ev);
if (action == MotionEvent.ACTION_DOWN) {
intercept = false;//1.父View默认不在Down时拦截
float x = ev.getX();
float y = ev.getY();
int childAdapterPosition = getChildAdapterPosition(findChildViewUnder(x, y));
//3.当这次点击的item和上次不是同一个item,且上一个点击的item是ScrollerLayout类型，并且这个滑动菜单是开着的，就关掉菜单并执行RecyclerView的操作
if (childAdapterPosition != mLastTouchPosition && null != mLastTouchItem && mLastTouchItem.isOpen()) {
mLastTouchItem.close();
intercept = true;
}
if (intercept) {
mLastTouchPosition = -1;
mLastTouchItem = null;
} else {
mLastTouchPosition = childAdapterPosition;
ViewHolder viewHolderForAdapterPosition = findViewHolderForAdapterPosition(childAdapterPosition);
//2.如果点击的条目是ScrollerLayout类型（支持滑动菜单的item），就赋值记录
if (null != viewHolderForAdapterPosition && viewHolderForAdapterPosition.itemView instanceof ScrollerLayout) {
mLastTouchItem = (ScrollerLayout) viewHolderForAdapterPosition.itemView;
}
}
}
return intercept;
}
}
ScrollerLayout:
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDown = ev.getX();
yDown = ev.getY();
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
if (Math.abs(xDown - ev.getX()) > Math.abs(yDown - ev.getY())) {
getParent().requestDisallowInterceptTouchEvent(true);
} else {
getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_UP:
getParent().requestDisallowInterceptTouchEvent(false);
break;
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
break;
}
return super.dispatchTouchEvent(ev);
}
逻辑就这几行，如果是横向滑动就由 ScrollerLayout 处理滑动事件，如果这次滑动时点击的 item 和上次不是同一个，且上次点击的 item 是ScrollerLayout 类型，并且这个滑动菜单是开着的，就关掉菜单，并由 RecyclerView 来处理滑动事件；然后运行测试了一通，未发现问题，遂交之测试老姐帮忙鉴定一番，五分钟后她牛13 轰轰的回来了，她用抖音里那魔性的配音给你边演示她发现的一个 bug，边给自己的操作配了个音：“小老弟，来看，哦活！哦活！”
。你大腿一拍，恍然大悟，原来还能这样操作，只见她先把一个item的菜单滑出来，然后按住那个被打开菜单的item猛的往上或往下哦(hua)活(dong)，这时onInterceptTouchEvent里控制菜单关闭的逻辑就走不进去了，因为她是按的同一个菜单拖动的，就导致上下滑动时 item 的菜单还关不了，知道原因就好办，在 MyRecyclerView 里加个滚动判断，只要列表滚动了就关掉菜单：
@Override
public void onScrollStateChanged(int state) {
super.onScrollStateChanged(state);
if (state == RecyclerView.SCROLL_STATE_DRAGGING) {
//滑动时关掉菜单
if (null != mLastTouchItem && mLastTouchItem.isOpen()) {
mLastTouchItem.close();
}
}
}
OK，这样就没问题了，大功告成！
扫一扫
4864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
