自己实现一个右滑删除的ListView, SwipeMenuListView

参考了以下源码：https://github.com/baoyongzhang/SwipeMenuListView

实现的效果(顺便推荐一个视频转gif的网址：http://www.gif5.net/)

 

 

 

 

 

 

 

 

 

实现的效果包括：

1.左滑item出现menu view,

• 左滑距离过短时自动关掉menu view,
• 左滑距离超过一定值时自动打开menu view,

2.menu view打开的时候，

• 右滑能够关闭menu view;
• 右滑超过一定的值时松开自动关闭menu view
• 右滑距离过短时松开，自动使menu view仍然是打开状态
• 点击其他item关闭menu view
• 点击menu view是打开的item,但是点击区域不在menu view上的时候关闭menu view
• 点击menu view中的按钮，实现相应的操作(具体事件处理见代码)

首先抛出几个问题：

1.如何根据我们的手势判定要左滑的position

2.滑动到什么程度让左滑的Menu显示出来

3.怎么处理item左滑与ListView的滑动的冲突

4.menu怎么添加

5.只能有一个是Open的状态，如果Item1是Open，这时候点击或者滑动Item2,应该使Item1关闭（拦截触摸事件，稍候详细添加）

首先，定义一个CustomSlideDeleteItemView，这个View的layout要重写，确定menu的摆放位置，具体见代码

package com.example.myapp.view;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.util.Log;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;import android.widget.LinearLayout;import android.widget.TextView;import com.example.myapp.R;import com.example.myapp.util.Methods;import java.util.ArrayList;import java.util.List;/** * Created by zyr * DATE: 16-3-19 * Time: 下午3:54 * Email: [e-mail] */public class CustomSlideDeleteItemView extends FrameLayout{    private Context mContext;    private List<View> menuViews = new ArrayList<>();    private View contentView;    public LinearLayout getMenuViewContainer() {        return menuViewContainer;    }    private LinearLayout menuViewContainer;    private int contentViewId;    private int contentViewWidth,contentViewHeight,menuWidth,menuHeight;    private int menuState = MENU_STATE_CLOSE;    public final static int MENU_STATE_CLOSE = 0;    public final static int MENU_STATE_OPEN = 1;    public final static int MENU_STATE_HALF_OPEN = 2;    public void setOnMenuClickListener(OnMenuClickListener onMenuClickListener) {        this.onMenuClickListener = onMenuClickListener;    }    private OnMenuClickListener onMenuClickListener;    public interface OnMenuClickListener{        void onMenuClick(int i,int counts);    }    public CustomSlideDeleteItemView(Context context) {        this(context, null);    }    public CustomSlideDeleteItemView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomSlideDeleteItemView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mContext = context;        menuWidth = Methods.computePixelsWithDensity(mContext,100);//        Log.d("zyr","menuWidth:" + menuWidth);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomSlideDeleteItemView);        for(int i=0;i<typedArray.length();i++){            int attr = typedArray.getIndex(i);            switch (attr){                case R.styleable.CustomSlideDeleteItemView_contentViewId:                    contentViewId = typedArray.getResourceId(R.styleable.CustomSlideDeleteItemView_contentViewId,0);                    break;            }        }        if(contentViewId!=0){            contentView = findViewById(contentViewId);        }        menuViewContainer = new LinearLayout(mContext);        menuViewContainer.setOrientation(LinearLayout.HORIZONTAL);        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);        addView(menuViewContainer, layoutParams);    }    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);        if(contentView!=null){            contentView.layout(0, 0, getMeasuredWidth(), getMeasuredHeight());        }        layoutMenu();    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        if(w!=oldw || h!=oldh){            contentViewHeight = menuHeight = h;            contentViewWidth = w;//            Log.d("zyr","contentViewWidth:" + contentViewWidth);        }    }    public void addMenu(String s,int color){        TextView textView = new TextView(mContext);        textView.setText(s);        textView.setBackgroundColor(color);        textView.setTextColor(getResources().getColor(R.color.white));        textView.setGravity(Gravity.CENTER);        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(menuWidth, ViewGroup.LayoutParams.MATCH_PARENT);        menuViews.add(textView);        menuViewContainer.addView(textView, layoutParams);        invalidate();        for(int i=0;i<menuViews.size();i++){            final int position = i;            View view = menuViews.get(i);            view.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    if(onMenuClickListener!=null){                        onMenuClickListener.onMenuClick(position,menuViews.size());                        scrollClose();                    }                }            });        }    }    public void clearAllMenu(){        menuViews.clear();        menuViewContainer.removeAllViews();        invalidate();    }    private void layoutMenu() {        menuViewContainer.layout(contentViewWidth, 0, contentViewWidth + menuWidth * menuViews.size(), contentViewHeight);    }    public void scroll(int deltaX,int lastDeltaX) {        if(deltaX < 0){//            Log.d("zyr","deltaX:" + deltaX);//            Log.e("zyr","menuWidth * menuViews.size():" + menuWidth * menuViews.size());            if(Math.abs(deltaX) > menuWidth * menuViews.size() ){                scrollTo(menuWidth * menuViews.size(), 0);                menuState = MENU_STATE_OPEN;            }else{                scrollBy(-lastDeltaX, 0);                menuState = MENU_STATE_HALF_OPEN;            }        }else{            if( !isClosed() ){//                Log.d("zyr","deltaX:" + deltaX);//                Log.e("zyr", "menuWidth * menuViews.size():" + menuWidth * menuViews.size());                if(Math.abs(deltaX) > menuWidth * menuViews.size()){                    scrollTo(0,0);                    menuState = MENU_STATE_CLOSE;                }else{                    scrollBy(-lastDeltaX, 0);                    menuState = MENU_STATE_HALF_OPEN;                }            }        }    }    public void autoScroll(int deltaX){        if(deltaX < 0){            if(Math.abs(deltaX) < menuWidth){                scrollTo(0, 0);                menuState = MENU_STATE_CLOSE;            }else{                scrollTo(menuWidth * menuViews.size(), 0);                menuState = MENU_STATE_OPEN;            }        }else{            if( !isClosed() ){                if(Math.abs(deltaX) < menuWidth){                    scrollTo(menuWidth * menuViews.size(), 0);                    menuState = MENU_STATE_OPEN;                }else{                    scrollTo(0,0);                    menuState = MENU_STATE_CLOSE;                }            }        }    }    public void scrollClose(){        scrollTo(0,0);        menuState = MENU_STATE_CLOSE;    }    public boolean isClosed(){        if(menuState == MENU_STATE_CLOSE){            return true;        }else{            return false;        }    }}

在attr文件中定义

<declare-styleable name="CustomSlideDeleteItemView">        <attr name="contentViewId" format="integer"/>    </declare-styleable>

然后定义我们的CustomSlideDeleteListView

package com.example.myapp.view;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.widget.ListView;import com.example.myapp.R;import com.example.myapp.util.Methods;/** * Created by zyr * DATE: 16-3-18 * Time: 下午5:42 * Email: [e-mail] * 参照：https://github.com/baoyongzhang/SwipeMenuListView * 还有一些没有解决的问题， * 1.触摸拦截 */public class CustomSlideDeleteListView extends ListView {    private Context mContext;    private CustomSlideDeleteItemView mCurrentView,mLastTouchItemView;    private int currentItemId,lastItemId,touchItemId;    private int downX,downY,moveX,moveY,deltaX,deltaY,upX,upY,lastX,lastDeltaX;    public final static int MIN_SCROLL_DIS = 100;    private int touchState=TOUCH_STATE_NONE;    public final static int TOUCH_STATE_X = 1;    public final static int TOUCH_STATE_Y = 2;    public final static int TOUCH_STATE_NONE = 0;    private int  direction = DIRECTION_NONE;    public final static int DIRECTION_LEFT = 1;//左滑    public final static int DIRECTION_RIGHT = 2;//右滑    public final static int DIRECTION_TOP = 3;//左滑    public final static int DIRECTION_BOTTOM = 4;//右滑    public final static int DIRECTION_NONE = 0;//    public CustomSlideDeleteListView(Context context) {        this(context, null);    }    public CustomSlideDeleteListView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CustomSlideDeleteListView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mContext = context;        setSelector(new ColorDrawable(Color.TRANSPARENT));        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomSlideDeleteListView);        for(int i=0;i<typedArray.length();i++){            int attr = typedArray.getIndex(i);            switch (attr){                case R.styleable.CustomSlideDeleteListView_rightViewId:                    break;            }        }    }    @Override    public boolean dispatchTouchEvent(MotionEvent ev) {        switch (ev.getAction()){            case MotionEvent.ACTION_DOWN:                lastX = downX = (int) ev.getX();                downY = (int) ev.getY();                touchItemId = pointToPosition(downX,downY);                touchState = TOUCH_STATE_NONE;                break;            case MotionEvent.ACTION_MOVE:                moveX = (int) ev.getX();                moveY = (int) ev.getY();                deltaX = moveX - downX;                deltaY = moveY - downY;                lastDeltaX = moveX - lastX;                lastX = moveX;                if(Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > MIN_SCROLL_DIS){                    touchState = TOUCH_STATE_X;                    if(deltaX > 0){                        direction = DIRECTION_RIGHT;                    }else{                        direction = DIRECTION_LEFT;                    }                }else if(Math.abs(deltaX) <= Math.abs(deltaY) && Math.abs(deltaY) > MIN_SCROLL_DIS){                    touchState = TOUCH_STATE_Y;                    if(deltaY > 0){                        direction = DIRECTION_BOTTOM;                    }else{                        direction = DIRECTION_TOP;                    }                }else {                    touchState = TOUCH_STATE_NONE;                    direction = DIRECTION_NONE;                }//                Log.e("zyr","touchState:" + touchState);//                Log.e("zyr","direction"+ direction);                break;        }        return super.dispatchTouchEvent(ev);    }    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        switch (ev.getAction()){            case MotionEvent.ACTION_DOWN:                //按下的位置不是上次按下的位置                //上次的iew不是空，而且是打开的，拦截                if(touchItemId != lastItemId                        && mLastTouchItemView!=null                        && !mLastTouchItemView.isClosed()){                    return true;                }                break;            case MotionEvent.ACTION_MOVE:                //if 向距离大于纵向距离，拦截                if(touchState == TOUCH_STATE_X ){                    return true;                }                break;            case MotionEvent.ACTION_UP:                //只是点击了一下                //有处于Open状态的menu                //没有点击在menu上面,拦截                if(touchState==TOUCH_STATE_NONE                        && mLastTouchItemView!=null                        && !mLastTouchItemView.isClosed()                        && !Methods.inRangeOfView(mLastTouchItemView.getMenuViewContainer(),ev)){                    return true;                }                break;        }        return super.onInterceptTouchEvent(ev);    }    @Override    public boolean onTouchEvent(MotionEvent ev) {        switch (ev.getAction()){            case MotionEvent.ACTION_DOWN:                if(touchItemId != lastItemId                        && mLastTouchItemView!=null                        && !mLastTouchItemView.isClosed()){                    mLastTouchItemView.scrollClose();                    return true;                }                break;            case MotionEvent.ACTION_MOVE:                if(touchState == TOUCH_STATE_X ){                    lastItemId = currentItemId;                    currentItemId = pointToPosition(downX,downY);                    mLastTouchItemView = mCurrentView;                    mCurrentView = (CustomSlideDeleteItemView)getChildAt(currentItemId - getFirstVisiblePosition());                    mCurrentView.scroll(deltaX,lastDeltaX);                    return true;                }                break;            case MotionEvent.ACTION_UP:                upX = (int)ev.getX();                upY = (int)ev.getY();                if(touchState == TOUCH_STATE_X && mCurrentView!=null){                    mCurrentView.autoScroll(upX - downX);                    return true;                }                if(touchState==TOUCH_STATE_NONE                        && mLastTouchItemView!=null                        && !mLastTouchItemView.isClosed()                        && !Methods.inRangeOfView(mLastTouchItemView.getMenuViewContainer(),ev)){                    mLastTouchItemView.scrollClose();                    return true;                }                break;        }        return super.onTouchEvent(ev);    }}

最后需要定义我们的Adapter

package com.example.myapp.adapter;import android.content.Context;import android.graphics.Color;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.Filter;import android.widget.Filterable;import android.widget.TextView;import android.widget.Toast;import com.example.myapp.R;import com.example.myapp.view.CustomSlideDeleteItemView;import java.util.ArrayList;import java.util.List;/** * Created by zyr * DATE: 15-11-26 * Time: 下午2:52 * Email: [e-mail] */public class CustomSlideDeleteListViewAdapter extends BaseAdapter implements Filterable{    public List<String> arrayList = new ArrayList<String>();    private Context context;    private MyFilter mFilter;    public CustomSlideDeleteListViewAdapter(Context context){        this.context = context;    }    public CustomSlideDeleteListViewAdapter(Context context, List<String> arrayList){        this.context = context;        this.arrayList = new ArrayList<String>(arrayList);    }    public void setData(List<String> array){        if(array ==null){            return;        }        arrayList = new ArrayList<String>(array);        notifyDataSetChanged();    }    @Override    public int getCount() {        return arrayList.size();    }    @Override    public Object getItem(int position) {        return arrayList.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(final int position, View convertView, ViewGroup parent) {        ViewHolder viewHolder = null;        if(convertView ==null){            convertView = LayoutInflater.from(context).inflate(R.layout.list_view_item,null);            viewHolder = new ViewHolder(convertView);            convertView.setTag(viewHolder);        }else{            viewHolder = (ViewHolder)convertView.getTag();        }        viewHolder.itemView.clearAllMenu();        viewHolder.itemView.addMenu("Delete", Color.RED);        viewHolder.itemView.addMenu("Open", Color.BLUE);        viewHolder.itemView.scrollBack();        viewHolder.textView.setText(arrayList.get(position));        viewHolder.itemView.setOnMenuClickListener(new CustomSlideDeleteItemView.OnMenuClickListener() {            @Override            public void onMenuClick(int i, int counts) {                switch (i){                    case 0:                        arrayList.remove(position);                        notifyDataSetChanged();                        break;                    case 1:                        break;                }            }        });        return convertView;    }    @Override    public Filter getFilter() {        if (mFilter == null) {            mFilter = new MyFilter();        }        return mFilter;    }    class MyFilter extends Filter {        @Override        protected FilterResults performFiltering(CharSequence constraint) {            FilterResults results = new FilterResults();            if (arrayList == null) {                arrayList = new ArrayList<String>();            }            results.values = arrayList;            results.count = arrayList.size();            return results;        }        @Override        protected void publishResults(CharSequence constraint, FilterResults results) {            if (results.count > 0) {                notifyDataSetChanged();            } else {                notifyDataSetInvalidated();            }        }    }    class ViewHolder{        CustomSlideDeleteItemView itemView;        TextView textView;        public ViewHolder(View view){            itemView = (CustomSlideDeleteItemView)view;            textView = (TextView)view.findViewById(R.id.list_view_text);        }    }}

adapter引用的xml文件

<?xml version="1.0" encoding="utf-8"?><com.example.myapp.view.CustomSlideDeleteItemView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:background="@drawable/common_listview_bg"    app:contentViewId="@+id/list_view_text">    <TextView android:id="@+id/list_view_text"        android:layout_width="match_parent"        android:layout_height="50dp"        android:gravity="center"        android:textColor="@color/primary"        android:textStyle="bold"        android:paddingLeft="20dp" /></com.example.myapp.view.CustomSlideDeleteItemView>

 

在Activity中引用

  customSlideDeleteListView = (CustomSlideDeleteListView) findViewById(R.id.custom_slid_delete_list_view);        for(int i=0;i<100;i++){            stringList.add("zyr" + i);        }        customSlideDeleteListViewAdapter = new CustomSlideDeleteListViewAdapter(this,stringList);        customSlideDeleteListView.setAdapter(customSlideDeleteListViewAdapter);