android自定义View之滑动删除

来源:互联网 发布:注塑机机械手如何编程 编辑:程序博客网 时间:2024/06/08 08:30

效果图

这里写图片描述

实现功能

1,可以向左滑动,右侧出现删除2,向左滑动如果删除出现一大半,松手打开删除,反之关闭删除3,应用场景    微信消息的删除功能

实现原理

1,外面是一个ListView2,条目是一个自定义控件继承ViewGroup    1,左边一个TextView,右侧屏幕外也有一个TextView    2,所以继承ViewGroup

实现步骤

1,创建一个SlideDeleteView类    1,构造方法要关联
public class SlideDelete extends ViewGroup {    private View leftView;    private View rightView;    private ViewDragHelper helper;    //第一步关联构造方法    //第二步重写onMeasure和onLViewayout测量子View和布局子View    public SlideDelete(Context context) {        this(context,null);    }    public SlideDelete(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public SlideDelete(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        helper = ViewDragHelper.create(this, callback);    }}
2,在布局文件中设置SlideDeleteView里面的子View    SlideDeleteView height=80        TextView             width:matchParent            height:matchparent        TextView
 <com.example.movedelete.SlideDelete        android:id="@+id/container"        android:layout_width="match_parent"        android:layout_height="80dp">        <TextView            android:id="@+id/content"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:background="#33000000"            android:text="第0个条目"            android:textColor="#fff"            android:textSize="20sp" />        <TextView            android:id="@+id/delete"            android:layout_width="80dp"            android:layout_height="match_parent"            android:background="#f00"            android:gravity="center"            android:text="删除"            android:textColor="#fff"            android:textSize="20sp" />    </com.example.movedelete.SlideDelete>
3,重写onMeasure,给子View进行测量
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        //对当前组合View的测量,不使用的话,也可以自己设置        measureChildren(widthMeasureSpec,heightMeasureSpec);        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }
4,重写onLayout,给子View进行布局    注意事项:        要设置leftView,也要设置rightView,不要都写成leftView了
    protected void onLayout(boolean changed, int l, int t, int r, int b) {        //第一步获取里面子View        leftView = getChildAt(0);        rightView = getChildAt(1);        //第二步给子View提供相应的布局        int leftL = 0;        int leftT = 0;        int leftR = leftView.getMeasuredWidth();        int leftB = leftView.getMeasuredHeight();        leftView.layout(leftL,leftT,leftR,leftB);        //给rightView提供相应的布局        int rightL = leftView.getMeasuredWidth();        int rightT = 0;        int rightR = leftView.getMeasuredWidth()+ rightView.getMeasuredWidth();        int rightB = rightView.getMeasuredHeight();        rightView.layout(rightL,rightT,rightR,rightB);    }
5,设置View的滑动事件onTouchEvent,实现滑动    1,因为要滑动,所以消费该事件返回true    2,使用ViewDragHelper来实现滑动效果    注意事项:        只能实现leftView的滑动,右侧RightView看不到所以滑动不了        只能给滑动的View设置监听,当滑动的时候,重新设置另一个View的布局跟着滑动
    @Override    public boolean onTouchEvent(MotionEvent event) {        //1,要消费该事件,所以直接返回true        //2,使用ViewDragHelper来实现滑动效果        helper.processTouchEvent(event);        return true;    }
6,重写滑动事件的监听onViewPositionChanged解决只有lefView滑动的问题    1,重写的方法是在ViewDragHelper.Callback的子实现类中    2,要实现滑动事件,必须在tryCaptureView方法中返回true
  private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {        //手势滑动时        @Override        public boolean tryCaptureView(View child, int pointerId) {            return true;        }
      //监听控件移动状态        @Override        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {            //如果左边控件拖动,我们要让右边控件也重新布局            if(changedView == leftView){                rightView.layout(rightView.getLeft()+dx,0,rightView.getRight()+dx,rightView.getBottom()+dy);            }else if(changedView == rightView){                leftView.layout(leftView.getLeft()+dx,0,leftView.getRight()+dx,leftView.getBottom()+dy);            }        }
7,重写clampViewPositionHorizontal水平位置移动,解决左右越界问题    1,返回值为移动时左侧滑动的距离    2,如果滑动的控件是leftView时,解决越界    3,如果滑动的控件是rightView时,解决越界
  public int clampViewPositionHorizontal(View child, int left, int dx) {            //对左右越界问题的处理            if(child == leftView){                //处理两边的越界问题                if(left >= 0){                    left = 0;                }else if(left <= -rightView.getMeasuredWidth()){                    left = -rightView.getMeasuredWidth();                }            }else if(child == rightView){                //只处理右边的越界问题,因为左侧越界的时看不到该View                if(left <= leftView.getMeasuredWidth()- rightView.getMeasuredWidth()){                    left = leftView.getMeasuredWidth()- rightView.getMeasuredWidth();                }else if(left >= leftView.getMeasuredWidth()){                    left = leftView.getMeasuredWidth();                }            }            return left;        }
8,手松开时重写onViewReleased方法,实现滑动手松开时,rightView是打开还是关闭    1,使用ViewDragHelper滑动时,要调用invalidate方法,回调computeScroll方法    2,重写computeScroll方法        1,先判断是否要继承滑动        2,使用兼容的invalidate方法来实现匀速滑动
        @Override        public void onViewReleased(View releasedChild, float xvel, float yvel) {            //松开后,什么时候打开rightView,什么时候关闭leftView            //临界值,rightView.getLeft() 和 屏幕的宽度-rightView.getWidth()/2            if(releasedChild == leftView){                if(rightView.getLeft() < getMeasuredWidth() - rightView.getMeasuredWidth()/2){                    //使用ViewDragHelper来滑动                    helper.smoothSlideViewTo(rightView,getMeasuredWidth()-rightView.getMeasuredWidth(),0);                    invalidate();                }else{                    helper.smoothSlideViewTo(rightView,getMeasuredWidth(),0);                    invalidate();                }            }        }    //需要重写computeScroll    @Override    public void computeScroll() {        //判断是否要继承滑动        if(helper.continueSettling(true)){            //invalidate();            //兼容使用            ViewCompat.postInvalidateOnAnimation(this);        }    }
9,实现删除rightView的点击删除事件    1,在listView的adapter中找到右侧的rightView    2,调用rightView的点击事件    3,删除该条目        1,删除集合中的数据            list.remove(position);        2,更新adapter            notifyDataSetChanged();        3,重新绘制整个条目            requestLayout();
      //设置删除的点击事件        vh.delete.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //删除当前的数据                list.remove(position);                notifyDataSetChanged();                //让父容器更新下            }        });        vh.container.requestLayout();

注意事项

1,在重写onLayout方法的时候,给rightView设置布局的时候,写成leftView一直出错2,在onTouchEvent中要返回true,因为要消费该事件3,在使用ViewDragHelper.Callback时,重写tryCaptureView时要返回true4,在onTouchEvent中,不使用scrollby或者scrollTo,而是使用ViewDragHelper工具类,不需要判断滑动的距离

总结

1,首先该控件是自定义View,不是组合控件,因为组合的话rightView在屏幕右侧不能实现2,是自定义View中的继承ViewGroup,因为左侧leftView和右侧rightView都是TextView不需要自己画

源码

SlideDelete的源码

package com.example.movedelete;import android.content.Context;import android.support.v4.view.ViewCompat;import android.support.v4.widget.ViewDragHelper;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;/** * Created by guixin on 2017/1/5. */public class SlideDelete extends ViewGroup {    private View leftView;    private View rightView;    private ViewDragHelper helper;    //第一步关联构造方法    //第二步重写onMeasure和onLViewayout测量子View和布局子View    public SlideDelete(Context context) {        this(context,null);    }    public SlideDelete(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public SlideDelete(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        helper = ViewDragHelper.create(this, callback);    }    private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {        //手势滑动时        @Override        public boolean tryCaptureView(View child, int pointerId) {            return true;        }        //拖动控件水平移动        @Override        public int clampViewPositionHorizontal(View child, int left, int dx) {            //对左右越界问题的处理            if(child == leftView){                //处理两边的越界问题                if(left >= 0){                    left = 0;                }else if(left <= -rightView.getMeasuredWidth()){                    left = -rightView.getMeasuredWidth();                }            }else if(child == rightView){                //只处理右边的越界问题,因为左侧越界的时看不到该View                if(left <= leftView.getMeasuredWidth()- rightView.getMeasuredWidth()){                    left = leftView.getMeasuredWidth()- rightView.getMeasuredWidth();                }else if(left >= leftView.getMeasuredWidth()){                    left = leftView.getMeasuredWidth();                }            }            return left;        }        //监听控件移动状态        @Override        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {            //如果左边控件拖动,我们要让右边控件也重新布局            if(changedView == leftView){                rightView.layout(rightView.getLeft()+dx,0,rightView.getRight()+dx,rightView.getBottom()+dy);            }else if(changedView == rightView){                leftView.layout(leftView.getLeft()+dx,0,leftView.getRight()+dx,leftView.getBottom()+dy);            }        }        //解决滑动一半松手时,View的复位        /**         *         * @param releasedChild 松开的View         * @param xvel         * @param yvel         */        @Override        public void onViewReleased(View releasedChild, float xvel, float yvel) {            //松开后,什么时候打开rightView,什么时候关闭leftView            //临界值,rightView.getLeft() 和 屏幕的宽度-rightView.getWidth()/2            if(releasedChild == leftView){                if(rightView.getLeft() < getMeasuredWidth() - rightView.getMeasuredWidth()/2){                    //使用ViewDragHelper来滑动                    helper.smoothSlideViewTo(rightView,getMeasuredWidth()-rightView.getMeasuredWidth(),0);                    invalidate();                }else{                    helper.smoothSlideViewTo(rightView,getMeasuredWidth(),0);                    invalidate();                }            }        }    };    //需要重写computeScroll    @Override    public void computeScroll() {        //判断是否要继承滑动        if(helper.continueSettling(true)){            //invalidate();            //兼容使用            ViewCompat.postInvalidateOnAnimation(this);        }    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        //对当前组合View的测量,不使用的话,也可以自己设置        measureChildren(widthMeasureSpec,heightMeasureSpec);        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        //第一步获取里面子View        leftView = getChildAt(0);        rightView = getChildAt(1);        //第二步给子View提供相应的布局        int leftL = 0;        int leftT = 0;        int leftR = leftView.getMeasuredWidth();        int leftB = leftView.getMeasuredHeight();        leftView.layout(leftL,leftT,leftR,leftB);        //给rightView提供相应的布局        int rightL = leftView.getMeasuredWidth();        int rightT = 0;        int rightR = leftView.getMeasuredWidth()+ rightView.getMeasuredWidth();        int rightB = rightView.getMeasuredHeight();        rightView.layout(rightL,rightT,rightR,rightB);    }    //View的事件传递    @Override    public boolean onTouchEvent(MotionEvent event) {        //1,要消费该事件,所以直接返回true        //2,使用ViewDragHelper来实现滑动效果        helper.processTouchEvent(event);        return true;    }}

MainActivity.java源码

package com.example.movedelete;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.ListView;import com.example.movedelete.adapter.SlideDeleteAdapter;import java.util.ArrayList;public class MainActivity extends AppCompatActivity {    private ListView lv;    private ArrayList<String> list;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化视图        initView();        //初始化数据        initData();        //初始化事件        initEvent();    }    //初始化视图    private void initView() {        lv = (ListView) findViewById(R.id.lv);    }    //初始化数据    private void initData() {        list = new ArrayList<>();        for (int i = 0; i < 20; i++) {            list.add("第"+i+"项条目");        }    }    //初始化事件    private void initEvent() {        SlideDeleteAdapter adapter = new SlideDeleteAdapter(list);        lv.setAdapter(adapter);    }}

SlideDeleteAdapter.java源码

package com.example.movedelete.adapter;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;import com.example.movedelete.R;import com.example.movedelete.SlideDelete;import java.util.ArrayList;/** * Created by guixin on 2017/1/5. */public class SlideDeleteAdapter extends BaseAdapter{    private ArrayList<String> list;    public SlideDeleteAdapter(ArrayList<String> list) {        this.list = list;    }    @Override    public int getCount() {        return list == null ? 0 : list.size();    }    @Override    public String getItem(int position) {        return  list == null ? null : list.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(final int position, View convertView, ViewGroup parent) {        ViewHolder vh;        if(convertView == null){            convertView = View.inflate(parent.getContext(), R.layout.item_slide,null);            vh = new ViewHolder(convertView);            convertView.setTag(vh);        }else{            vh = (ViewHolder) convertView.getTag();        }        vh.content.setText(list.get(position));        //设置删除的点击事件        vh.delete.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //删除当前的数据                list.remove(position);                notifyDataSetChanged();                //让父容器更新下            }        });        vh.container.requestLayout();        return convertView;    }    class ViewHolder{        private  TextView content;        private  TextView delete;        private  SlideDelete container;        public ViewHolder(View v){              container =  (SlideDelete) v.findViewById(R.id.container);            content =  (TextView) v.findViewById(R.id.content);             delete =  (TextView) v.findViewById(R.id.delete);        }    }}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ListView        android:id="@+id/lv"        android:layout_width="match_parent"        android:layout_height="match_parent">    </ListView></RelativeLayout>

item_slide.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <com.example.movedelete.SlideDelete        android:id="@+id/container"        android:layout_width="match_parent"        android:layout_height="80dp">        <TextView            android:id="@+id/content"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:background="#33000000"            android:text="第0个条目"            android:textColor="#fff"            android:textSize="20sp" />        <TextView            android:id="@+id/delete"            android:layout_width="80dp"            android:layout_height="match_parent"            android:background="#f00"            android:gravity="center"            android:text="删除"            android:textColor="#fff"            android:textSize="20sp" />    </com.example.movedelete.SlideDelete></LinearLayout>
0 0
原创粉丝点击