按照有图有真相的原则，我们先看下QQ中的效果以及最终实现的效果：
两个menu
三个menu
最终效果图
思路
- 由于ListView中每个Item侧滑的Menu数量不是固定的，因此最好的解决方案应该是在适配器中根据每个Item的类型动态的添加Menu；
- 涉及到ListView中的纵向滑动以及Item中的横向滑动，我们需要对Item的触摸事件进行拦截与反拦截；
源码我会在文章的最后给出，这里只贴出关键性的代码；
代码实现
关于代码模块我们主要从两点出发：
- 自定义Item布局，完成滚动、事件处理相关操作，对外公布 openMenu()、closeMenu()、addMenu() 等相关方法让外界可以调用；
- 在 Adapter 以及 ListView 中根据 Item 提供的方法，对每个 Item 设置监听，并记录打开的 Item；
由于Menu的数量不是固定的（或者说不是每个Item的类型都是一样的），因此我们可以提供一个容器（ViewGroup），在适配器的getView()里面动态的为每个Item添加Menu，而我们的ContentView 则是根据情况来设置的，因此这部分可以放在布局文件中来添加；
布局原理
自定义Item
我们的Item就是 ContentView + MenuGroup 的部分，
第一步 我们需要自定义容器
定义 SwipeLayout 继承自 FrameLayout，将我们的 ContentView 和 MenuGroup 都加载进来，然后进行排版；
@Override
protected void onFinishInflate() {
super.onFinishInflate();
// 获取到内容视图(这里我们获取布局文件中的第一个Item作为contentView)
if (getChildCount() > 0) {
mContentView = getChildAt(0);
}
// 为 menu 布局增加容器（这里我们直接new来创建menu的容器）
mMenuLayout = new LinearLayout(mContext);
mMenuLayout.setOrientation(LinearLayout.HORIZONTAL);
mMenuLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
addView(mMenuLayout);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = 0;
int height = 0;
// 计算出内容控件的高度，并将其赋值给父容器
if (mContentView != null) {
measureChild(mContentView, MeasureSpec.makeMeasureSpec(mScreenWidth, MeasureSpec.EXACTLY), heightMeasureSpec);
height = mContentView.getMeasuredHeight();
width = mContentView.getMeasuredWidth();
}
int childCount = getChildCount();
// 计算 menu 的宽高
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
if (child == mContentView) {
continue;
}
measureChild(child, widthMeasureSpec, MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
width += child.getMeasuredWidth();
}
setMeasuredDimension(width, height);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
if (child == mMenuLayout) {
mMaxDistance = child.getMeasuredWidth();
child.layout(mScreenWidth, 0, mScreenWidth + child.getMeasuredWidth(), child.getMeasuredHeight());
} else {
child.layout(0, 0, mScreenWidth, child.getMeasuredHeight());
}
}
}
这里解释下三个方法的作用：
-
onFinishInflate:
将布局文件中的第一个子控件作为ContentView，然后添加Menu的容器，因此我们的布局文件中应该是有两个childView的存在； -
onMeasure:
计算SwipeLayout以及子控件的宽高； -
onLayout:
根据我们的图片中的效果对childView进行排版；
这里需要注意的一点就是我们只取布局文件里面的第一个View作为ContentView，因此如果有多个View，最好使用ViewGroup来封装好；
第二步 添加滚动以及事件拦截
通常我们会借助 scrollTo()/scrollBy() 方法以及Scroller滚动工具类来帮助我们滚动视图的内容，在 onTouchEvent 方法里面对我们的事件进行处理：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
if (!mArrowScroll) {
break;
}
// 计算滑动速度
mVelocityTracker.computeCurrentVelocity(100);
// 获取 x 轴每 100ms 划过的像素数量（矢量）
xVelocity = mVelocityTracker.getXVelocity();
int distanceX = (int) (startX - event.getX());
// 只能滑出右侧菜单
if (getScrollX() + distanceX <= 0) {
distanceX = -getScrollX();
}
// 滑动的距离不能超过菜单按钮的的宽度
if (distanceX + getScrollX() > mMaxDistance) {
// distanceX = distanceX - (distanceX + getScrollX() - mMaxDistance);
distanceX = mMaxDistance - getScrollX();
}
scrollBy(distanceX, getScrollY());
startX = (int) event.getX();
break;
case MotionEvent.ACTION_UP:
if ((getScrollX() > 0 && getScrollX() >= mMaxDistance * mSwitchPercent)
|| (getScrollX() > 0 && xVelocity < -mSpeedThreshold)) { // 滑动的速度超过阈值
// 打开菜单
openMenu();
} else if ((getScrollX() > 0 && xVelocity > mSpeedThreshold) // 滑动的速度超过阈值
|| (getScrollX() > 0 && getScrollX() < mMaxDistance * mSwitchPercent)) {
// 关闭菜单
closeMenu();
}
// 如果是菜单滚动事件，则需要屏蔽 onClick 事件
if (mArrowScroll) {
mVelocityTracker.clear();
mVelocityTracker.recycle();
mVelocityTracker = null;
xVelocity = 0;
return true;
}
break;
}
return super.onTouchEvent(event);
}
方法整体不难，主要就是对拿到的ACTION_MOVE事件进行计算然后滚动视图内容，然后在ACTION_UP事件里面判断，是否满足打开/关闭menu的要求来进行相应的操作，这里有几个需要注意的关键点：
- 我们这里对滑动的速度做了处理，我们拿到的速度是矢量，因此这里需要特别注意方向；
- 在 ACTION_UP 事件的最后我们要判断是否是滚动事件，如果是滚动事件我们不能再次调用
super.onTouchEvent(event)方法，否则可能会触发 View 的onClick 事件；- 需要将我们的SwipeLayout设置为 clickable 设置为 true （在构造方法里面或者布局文件里面），这里我们需要让我们的控件能够拿到处理事件的权限；
到这里我们就可以先预览效果了：
效果预览
实际在ListView中的使用还涉及到事件拦截的操作，因此我们需要对触摸事件进行拦截和反拦截，具体实现我们直接看代码：
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) ev.getX();
startY = (int) ev.getY();
mArrowScroll = false;
break;
case MotionEvent.ACTION_MOVE:
// 手指移动在 x/y 轴上的距离
int distanceX = (int) (startX - ev.getX());
int distanceY = (int) (startY - ev.getY());
// 如果事件已经反拦截了，则不需要再次进行下面的判断
if (mArrowScroll) {
break;
}
// 判断是否是侧滑menu事件，如果是，反拦截事件
if (mMenuLayout.getChildCount() > 0 && distanceX > mTouchSlop || (getScrollX() > 0 && Math.abs(distanceX) > mTouchSlop)) {
// 请求父类不要拦截此事件序列（反拦截）
getParent().requestDisallowInterceptTouchEvent(true);
startX = (int) ev.getX();
mArrowScroll = true;
// 初始化滑动速度检测的相关参数
initVelocityTracker(ev);
// 将我们开始滑动的事件通过回调函数传递出去
if (onStartScrollListener != null) {
onStartScrollListener.onStartScroll(this);
}
}
// 如果是上下滑动，则不在接收此次事件序列
if (Math.abs(distanceY) > mTouchSlop) {
return false;
}
break;
}
return super.dispatchTouchEvent(ev);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
int distanceX = (int) (startX - ev.getX());
// 判断是否是侧滑menu事件，如果是，拦截此次事件（此处的判断条件同反拦截的一致）
if (mMenuLayout.getChildCount() > 0 && distanceX > mTouchSlop || (getScrollX() > 0 && Math.abs(distanceX) > mTouchSlop)) {
return true;
}
break;
}
return super.onInterceptTouchEvent(ev);
}
我们在 dispatchTouchEvent 里面对相关的参数进行了初始化，以及判断是否满足反拦截事件的条件，只有满足条件的情况下我们才会去调用getParent().requestDisallowInterceptTouchEvent(true);将此事件交由Item处理，这里涉及到的主要是View中事件传递/拦截的相关方法。如果不是很明白这一块的，可以去网上找一下这方面的资料，这里就不展开了；
第三步 公布相关的方法
完成前面两个步骤，实际上我们的自定义Item在功能上其实已经完成了，但是我们还不能有效的通过对象来对Item进行操控，因此我们需要对外公布一些方法以及回调接口，这里就不贴代码了，在文章的最后我会附上项目的源码；
定义适配器
这里定义适配器的的原因其实就是封装我们的代码，在使用的过程中，可以很方便的调用我们封装的代码，而不是写一堆业务逻辑之外的代码。
我们直接看如何使用：
mListView.setAdapter(mAdapter = new SwipeAdapter<String>(mContext, mDatas) {
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
holder = new ViewHolder();
convertView = View.inflate(mContext, R.layout.adapter_swipe, null);
holder.tvContent = convertView.findViewById(R.id.tv_content);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
// 初始化相关的监听
init(convertView, position);
// 先移除之前的按钮
removeAllMenu(convertView);
// 根据每个Item的类型来动态的添加Menu
addMenuView(convertView, createView("置顶", Color.BLUE, R.id.tv_up));
if (position % 2 == 0) {
addMenuView(convertView, createView("标为未读", Color.GREEN, R.id.tv_unread));
}
addMenuView(convertView, createView("删除", Color.RED, R.id.tv_remove));
holder.tvContent.setText(mDatas.get(position));
return convertView;
}
});
mAdapter.setOnItemClickListener(new SwipeAdapter.OnItemClickListener() {
@Override
public void onItemClick(int position, View view) {
Toast.makeText(mContext, "onItemClick " + mDatas.get(position), Toast.LENGTH_SHORT).show();
}
});
mAdapter.setOnItemMenuClickListener(new SwipeAdapter.OnItemMenuClickListener() {
@Override
public void onItemMenuClick(int position, View menu) {
switch (menu.getId()) {
case R.id.tv_unread:
Toast.makeText(mContext, " 标记未读 " + mDatas.get(position), Toast.LENGTH_SHORT).show();
break;
case R.id.tv_up:
Toast.makeText(mContext, " 置顶 " + mDatas.get(position), Toast.LENGTH_SHORT).show();
break;
case R.id.tv_remove:
Toast.makeText(mContext, " 删除 " + mDatas.get(position), Toast.LENGTH_SHORT).show();
break;
}
}
});
可以发现和平常使用的适配器基本是一样的，只不过我们需要在 getView() 里面绑定监听同时添加/删除Menu既可以了；
总体来说使用起来还是很方便的，最终的效果就是一开始的效果图。这里我把ListView的滚动监听放到了ListView里面，如果感觉这样不好，可以单独对ListView设置滚动监听；
总结
文章的初衷就是想是完成项目的一些需求，后来就索性写个demo出来，把关键的代码抽取出来分装成一个库compile "com.hewenyu:SwipeListViewLibrary:1.0.0"，巩固一下自己的基础知识，整体下来还是收获颇多，需要养成多写文章记录的好习惯；
网友评论