删减android qq代码,Android 模仿QQ消息侧滑删除效果

按照有图有真相的原则，我们先看下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(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"，巩固一下自己的基础知识，整体下来还是收获颇多，需要养成多写文章记录的好习惯；