Android学习小Demo（18）Todo List 仿QQ删除任务

一般情况下，如果想要在ListView上面实现Listitem的滑动删除效果，或者仿QQ的滑动显示删除效果的时候，只需要继承ListView，自定义一个ListView就可以，不过由于之前用了开源库StickyListHeaders来实现ListView的分组，那么这一次在实现这个仿QQ的左右滑动显示隐藏删除按钮的时候，就要在StickyListHeaders的基础上实现。而StickyListHeaders要开放了一个setOnTouchListener的接口，允许调用者传进去一个OnTouchListener，来实现自定义的OnTouch效果，如下：

    @Override
    public void setOnTouchListener(final OnTouchListener l) {
        if (l != null) {
            mList.setOnTouchListener(new OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    return l.onTouch(StickyListHeadersListView.this, event);
                }
            });
        } else {
            mList.setOnTouchListener(null);
        }
    }

那么解决问题的方法就在于实现一个OnTouchListener，然后将其传给StickyListHeaderListView。

		lvTasks.setOnTouchListener(new ListitemSlopListener(this));

而ListitemSlopListener就是我们自定义的OnTouchListener了，其代码如下：

public class ListitemSlopListener implements OnTouchListener {

	...
	private void initConfiguration() {
		ViewConfiguration vc = ViewConfiguration.get(mContext);
		mSlop = vc.getScaledTouchSlop();
		mMinFling = vc.getScaledMaximumFlingVelocity();
		mMaxFling = mMinFling * 8;
	}
	...
	@Override
	public boolean onTouch(View v, MotionEvent event) {				
		mListView = ((StickyListHeadersListView) v).getWrappedList();
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:			
			mDownX = event.getX();
			mDownY = event.getY();				
			mPosition = mListView.pointToPosition((int)mDownX, (int)mDownY);
			mSlopView = mListView.getChildAt(mPosition - mListView.getFirstVisiblePosition());
			Log.v(Helper.TAG,"Action Down : onTouch Triggered");
			if(mSlopView != null){	
				btnDelete = (Button) mSlopView.findViewById(R.id.btnDelete);	
				if(btnDelete.getVisibility() == View.INVISIBLE || btnDelete.getVisibility() == View.GONE){
					btnDelete.setVisibility(View.VISIBLE);
					ViewHelper.setAlpha(btnDelete, 0);
				}
				mBtnWidth = btnDelete.getWidth();				
				initVelocityTrackerIfNotExists(event);
				return true;
			}
			break;
		case MotionEvent.ACTION_MOVE:			
			if(mVelocityTracker != null && mSlopView != null && btnDelete != null){				
				float dx = event.getX() - mDownX;
				float dy = event.getY() - mDownY;
				if(Math.abs(dx) > mSlop && Math.abs(dy) < mSlop){
					mMoving = true;		
				}
				if(mMoving){
					if (dx > 0) {
						//Direction : right to hide the button if the button shows
						if(ViewHelper.getAlpha(btnDelete) > 0){
							ViewHelper.setAlpha(
								btnDelete,Math.min(1f,Math.max(0f, 1f -  Math.abs(dx) /mBtnWidth)));
						}
					} else {
						//Direction : Left to show the button if the button exists
						ViewHelper.setAlpha(
								btnDelete,
								Math.max(0f,Math.min(1f, Math.abs(dx) / mBtnWidth)));						
					}
					return true;
				}else{					
					return false;
				}
			}
		case MotionEvent.ACTION_UP:					
			if (mVelocityTracker != null && mSlopView != null && mMoving) {
				float dx = event.getX() - mDownX;
				mVelocityTracker.computeCurrentVelocity(1000);
				float vx = Math.abs(mVelocityTracker.getXVelocity());
				float vy = Math.abs(mVelocityTracker.getYVelocity());
				
				boolean isShow = false;
				if(Math.abs(dx) > mBtnWidth / 2){
					isShow = dx < 0;					
				}else if(vx > mMinFling && vx < mMaxFling && vx > vy){
					isShow = vx < 0;
				}

				if(isShow){
					ViewPropertyAnimator.animate(btnDelete).alpha(1f).setDuration(DURATION);
				}else{
					ViewPropertyAnimator.animate(btnDelete).alpha(0f).setDuration(DURATION);
				}								
				recycleVelocityTracker();
				mMoving = false;
			}else{
				//Only When the Delete Button is not visible, the the onItemClick action was fired.
				if(btnDelete != null && ViewHelper.getAlpha(btnDelete) > 0){
					ViewPropertyAnimator.animate(btnDelete).alpha(0f).setDuration(DURATION);
				}else{
					TodoTask todoTask = (TodoTask) mListView.getItemAtPosition(mPosition);
					if(todoTask != null){
						mListView.performItemClick(mSlopView, mPosition, todoTask.getId());
					}
				}
			}			
			return true;
		}
		return false;
	}

}

我们知道，在屏幕上的任何事件，包括点击，长按，滑动，还是其它手势，其实都是由一系列的Touch事件组成的，而这些Touch事件其实是下面三步组成的：

0）一个ACTION_DOWN事件

1）N个ACTION_MOVE事件

2）一个ACTION_UP事件组成的。

而根据Android的事件分发机制，在触发View本身的OnTouchEvent方法的时候，如果存在一个OnTouchListener，那么View会首先调用OnTouchListener来响应事件，只有当OnTouchListener返回false，表明其不处理该事件的时候，才会继续将事件传递给View的OnTouchEvent，那么在这里，我们就要在OnTouchListener的onTouch方法中，将这个事件给完全消费掉，来实现我们自己想要的效果。

OnTouch方法中，主要实现了下面的功能：

1）当我们手指接触到屏幕上的时候，一个Down事件就会被触发，于是会来到Listener的Down分支下面。

在这里，我们会首先利用ListView的pointToPosition方法，根据触摸的点坐标来获取ListView中item的位置，并利用getChildAt方法找出手指触摸到的那个Listitem，并将其放置到变量mSlopView中。

mSlopView其实就是TaskItem，其结构如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/item_selector"
    android:padding="5dip" >

    <ImageView
        android:id="@+id/ivComplete"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/imageview_contentdesc"
        android:padding="5dp" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/ivComplete"
        android:gravity="left|center_vertical"
        android:padding="5dp"
        android:singleLine="true"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btnDelete"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/shape_button"
        android:padding="5dp"
        android:text="@string/action_delete"
        android:textSize="12sp"
        android:visibility="invisible" />

</RelativeLayout>

删除按钮一开始是invisible的，当Down事件发生的时候，我们要将其置为Visible的，但同时要将其alpha值置为0，因为虽然可见，但此时还不能显示出来。

而最后，要在这里返回一个true，表明在这里，Down事件已经被这个OnTouchListener给消费了，这样，后续的Move事件， Up事件才会继续被这个OnTouchListener来处理。

2）当Donw事件被这个OnTouchListener消费后，后续的Move事件也会来到这里进行处理。

在Move分支中， 我们要根据移动的距离来判断这是不是一次移动，这是通过跟mSlop变量比较实现的。mSlop值是Android定义一个滑动事件的最短距离，当移动超过这个距离，表明这是一个滑动事件，那么这个时候，我们就要根据移动的距离去动态地改变删除按钮的alpha值，来显示或者隐藏删除按钮。在这里，定义

2.1）当手指向左移动的时候，则表明这是要显示按钮，那么会将按钮的alpha值由 0 向 1 变化，最终完全显示按钮。

2.2）当手指向右移动的时候，则表明是要删除按钮，那么会将按钮的alpha值由 1 向 0 变化，最终完全隐藏按钮。

最后，这个方法也要返回 true ，表明Move事件也在这里被消费了。

3）最后就是来到Up事件了。每一个Listitem的OnTouch事件其实分两种情况：

3.1）当OnTouch事件被定义为滑动事件时，即滑动距离超过mSlop的时候，我们要根据最终滑动的距离来决定是否要显示按钮。只有当滑动距离超过按钮的一半宽度的时候，才显示按钮，如果按钮还没有完全显示，则添加一个动画效果，来显示按钮。而如果没有超过按钮的一半宽度的时候，也要为该按钮添加一个动画效果，但是这个效果则是慢慢慢将按钮的alpha值变为0，最终隐藏按钮。

3.1）当滑动的距离小于mSlop的时候，该事件只被定义为一个OnItemClick事件，那么在这里要显示地调用performClick方法来触发ListView的OnItemClick事件，这是因为不想去改变开源库的源码，所以我们必须将所有的OnTouch事件（当然，只是我们想处理的）都在OnTouchListener中处理。

最后，在Up分支中，我们处理了事件之后，同样返回一个true，表明所有的OnTouch事件都在这里被处理了，不需要再将事件传递下去。

下面是实现后的效果图：

结束。