【android自定义控件】android ListView添加侧滑删除

为ListView添加炫酷的Item中带侧滑的删除,原理是利用item布局中的padding(Left和Right)属性为负值,来把删除的按钮隐藏在屏幕外。然后通过自定义ListView重写其中的OnTouchEvent通过手指坐标点的计算来处理事件,实现itemView的滚动,达到滑动出现删除菜单,本例中仅实现右向左滑出现删除按钮,大家可以根据自己需求,参照自定义ListView中事件处理做出左侧滑,右侧滑出现菜单,当然不仅仅局限于删除。更多灵活用法期待发觉。

首先上自定义的ListSlideView代码,其中有有详细注释,我就不废话了!(该ListView参考以前项目里面的事件分发处理判断,具体参考了哪位大神的写法已无法考究,感谢最原先的作者的同时也请见谅,如见可联系博主,把参考出处加上)

ListSlideView:

/**
 * ListSlideView.java
 * 2015 下午3:00:24
 */
package com.example.slideviewtest;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Scroller;

/**
 * @note 自定义的listView,集成自系统的ListView,对list的OnTouchEnvent事件分发进行了拦截处理(最关键的地方,
 *       也是通过该方式实现了控制屏幕外布局的拖拽) 需要配合Item的布局文件来实现
 * @author blank
 * @time 下午3:00:24
 * @version V1.0
 */
public class ListSlideView extends ListView {

	/** 禁止侧滑模式 */
	public static int MODE_FORBID = 0;
	/** 从右向左滑出菜单模式 */
	public static int MODE_RIGHT = 1;
	/** 当前的模式 */
	private int mode = MODE_FORBID;
	/** 右侧菜单的长度 */
	private int rightLength = 0;

	/**
	 * 当前滑动的ListView position
	 */
	private int slidePosition;
	/**
	 * 手指按下X的坐标
	 */
	private int downY;
	/**
	 * 手指按下Y的坐标
	 */
	private int downX;
	/**
	 * ListView的item
	 */
	private View itemView;
	/**
	 * 滑动类
	 */
	private Scroller scroller;
	/**
	 * 认为是用户滑动的最小距离
	 */
	private int mTouchSlop;

	/**
	 * 判断是否可以侧向滑动
	 */
	private boolean canMove = false;
	/**
	 * 标示是否完成侧滑
	 */
	private boolean isSlided = false;

	public ListSlideView(Context context) {
		this(context, null);
	}

	public ListSlideView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.SlideMode);
		mode = a.getInt(R.styleable.SlideMode_mode, 0);
	}

	public ListSlideView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.SlideMode);
		mode = a.getInt(R.styleable.SlideMode_mode, 0);
		scroller = new Scroller(context);
		mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
	}

	/**
	 * 处理我们拖动ListView item的逻辑
	 */
	@Override
	public boolean onTouchEvent(MotionEvent ev) {

		final int action = ev.getAction();
		int lastX = (int) ev.getX();

		switch (action) {
		case MotionEvent.ACTION_DOWN:
			System.out.println("touch-->" + "down");

			/* 默认不处理当前View的事件,即没有侧滑菜单 */
			if (this.mode == MODE_FORBID) {
				return super.onTouchEvent(ev);
			}

			// 侧滑状态判断
			if (isSlided) {
				scrollBack();
				return false;
			}
			// 滚动是否结束
			if (!scroller.isFinished()) {
				return false;
			}
			downX = (int) ev.getX();
			downY = (int) ev.getY();

			slidePosition = pointToPosition(downX, downY);

			// 无效的position
			if (slidePosition == AdapterView.INVALID_POSITION) {
				return super.onTouchEvent(ev);
			}

			itemView = getChildAt(slidePosition - getFirstVisiblePosition());

			/* 右侧菜单的长度 */
			if (this.mode == MODE_RIGHT) {
				this.rightLength = -itemView.getPaddingRight();
			}

			break;
		case MotionEvent.ACTION_MOVE:
			System.out.println("touch-->" + "move");

			if (!canMove
					&& slidePosition != AdapterView.INVALID_POSITION
					&& (Math.abs(ev.getX() - downX) > mTouchSlop && Math.abs(ev
							.getY() - downY) < mTouchSlop)) {
				int offsetX = downX - lastX;
				if (offsetX > 0 && this.mode == MODE_RIGHT) {
					/* 从右向左滑 */
					canMove = true;
				} else {
					canMove = false;
				}
				/* 侧滑时ListView的OnItemClickListener事件的屏蔽 */
				MotionEvent cancelEvent = MotionEvent.obtain(ev);
				cancelEvent
						.setAction(MotionEvent.ACTION_CANCEL
								| (ev.getActionIndex() << MotionEvent.ACTION_POINTER_INDEX_SHIFT));
				onTouchEvent(cancelEvent);
			}
			if (canMove) {
				/* 侧滑动时,ListView不上下滚动 */
				requestDisallowInterceptTouchEvent(true);

				// 根据X坐标的差可以得到手指滑动方向,本例子可以根据自己的需要去灵活修改(左边划出菜单,右边划出菜单,或者左右均可)
				int deltaX = downX - lastX;
				if (deltaX > 0 && this.mode == MODE_RIGHT) {
					/* X坐标差大于0手指向右滑动 */
					itemView.scrollTo(deltaX, 0);
				} else {
					itemView.scrollTo(0, 0);
				}
				return true;
			}
		case MotionEvent.ACTION_UP:
			System.out.println("touch-->" + "up");
			if (canMove) {
				canMove = false;
				scrollByDistanceX();
			}
			break;
		}
		return super.onTouchEvent(ev);
	}

	/**
	 * 根据手指滚动itemView的距离来判断是滚动到开始位置还是向左或者向右滚动
	 */
	private void scrollByDistanceX() {
		/* 当前模式不允许滑动,则直接返回 */
		if (this.mode == MODE_FORBID) {
			return;
		}
		if (itemView.getScrollX() > 0 && this.mode == MODE_RIGHT) {
			/* 从右向左滑 */
			if (itemView.getScrollX() >= rightLength / 2) {
				scrollLeft();
			} else {
				// 滚回原始位置
				scrollBack();
			}
		} else {
			// 滚回原始位置
			scrollBack();
		}

	}

	/**
	 * 向左滑动
	 */
	private void scrollLeft() {
		isSlided = true;
		final int delta = (rightLength - itemView.getScrollX());
		// 调用startScroll方法来设置一些滚动的参数,我们在computeScroll()方法中调用scrollTo来滚动item
		scroller.startScroll(itemView.getScrollX(), 0, delta, 0,
				Math.abs(delta));
		postInvalidate(); // 刷新itemView
	}

	/**
	 * 侧滑菜单复原
	 */
	private void scrollBack() {
		isSlided = false;
		scroller.startScroll(itemView.getScrollX(), 0, -itemView.getScrollX(),
				0, Math.abs(itemView.getScrollX()));
		postInvalidate(); // 刷新itemView
	}

	@Override
	public void computeScroll() {
		// 调用startScroll的时候scroller.computeScrollOffset()返回true,
		if (scroller.computeScrollOffset()) {
			// 让ListView item根据当前的滚动偏移量进行滚动
			itemView.scrollTo(scroller.getCurrX(), scroller.getCurrY());

			postInvalidate();
		}
	}

	/**
	 * 复原
	 */
	public void slideBack() {
		this.scrollBack();
	}

}

为了兼容以前的ListView添加了是否需要侧滑的自定义控件属性




    
        
            
            
        
    


0代表不支持侧滑,1代表支持右侧滑,可以根据自己需要去加上左侧滑

ItemView的布局:




    

        

        
    

    

        

        
    

    


为了适配ListSlideView的适配器:

package com.example.slideviewtest;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
/**
 * @author blank
 * @time 下午4:01:07
 * @version V1.0
 */
public class SlideViewAdapter extends BaseAdapter {

	private Context mContext;
	private LayoutInflater layoutInflr;
	private int itemtype = 1;
	private OnRemoveListener mRemoveListener;

	public int getItemtype() {
		return itemtype;
	}

	public void setItemtype(int itemtype) {
		this.itemtype = itemtype;
	}

	public SlideViewAdapter( Context context) {
		this.mContext = context;
		this.layoutInflr = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

	}

	public void setRemoveListener(OnRemoveListener removeListener) {
		this.mRemoveListener = removeListener;
	}

	class Viewlayout {
		private TextView mDelete;// 隐藏的侧滑删除按钮

	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return 10;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(final int position, View convertView, ViewGroup parent) {
		Viewlayout icom_view;
		if (convertView == null) {
			icom_view = new Viewlayout();
			convertView = layoutInflr.inflate(R.layout.item_product_listview,
					null);
			icom_view.mDelete = (TextView) convertView
					.findViewById(R.id.tvDelete);
			convertView.setTag(icom_view);
		} else {
			icom_view = (Viewlayout) convertView.getTag();
		}
		icom_view.mDelete.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				if(mRemoveListener!=null){mRemoveListener.onRemoveItem(position);}
			}
		});

		return convertView;
	}

	public interface OnRemoveListener {
		void onRemoveItem(int position);
	}

}

demo没有做数据填充,把删除的事件回调出去了!

来2张效果图:

【android自定义控件】android ListView添加侧滑删除_第1张图片







【android自定义控件】android ListView添加侧滑删除_第2张图片


源码地址已修改为正确地址


源码下载地址:源码下载


你可能感兴趣的:(自定义控件)