ViewDragHelper实现仿qq列表滑动删除

实现过程概述

实现qq列表侧滑删除，核心还是ViewDragHelper的实现。
关于ViewDragHelper的基础用法，我在另外一篇博客ViewDragHelper简介中已经介绍过了。如果不是特别了解ViewDragHelper，可以看看。
需要实现的ViewGroup是LinearLayout，基本的思路是：LinearLayout中的两个布局都是水平排列。列表的内容布局填充整个列表，菜单布局在屏幕之外，是看不到的。向左滑动内容布局，菜单布局也随之滑动。这时就可以看到屏幕外的菜单布局了。

代码

1. 自定义控件SwipeLayout

public class SwipeLayout extends LinearLayout {

    private ViewDragHelper viewDragHelper;
    private View contentView;
    private View menuview;
    private int dragDistance;
    private int screenWidth;
    private Context context;

    public SwipeLayout(Context context) {
        this(context, null);


    }

    public SwipeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public SwipeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        init();

    }

    @Override
    protected void onFinishInflate() {
        contentView = getChildAt(0);
        menuview = getChildAt(1);
    }

    void init(){
        viewDragHelper = ViewDragHelper.create(this, new DragHelperCallback());
        /**
         * 获取屏幕宽度
         */
        WindowManager wm=(WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        screenWidth=outMetrics.widthPixels;

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /**
         * 必须获得menuview的宽度。因为滑动结束后，menuview必须距离右边为dragDistance个像素长度才能显示完全，
         * 这里的距离计算，是以menuview左上角的为起点开始计算的。
         *
         *
         */

        dragDistance = menuview.getMeasuredWidth();
    }



    private class DragHelperCallback extends ViewDragHelper.Callback {
        @Override
        public void onViewDragStateChanged(int state) {
            super.onViewDragStateChanged(state);
            Log.d("liang", "onViewDragStateChanged: "+state);
        }

        @Override
        public boolean tryCaptureView(View view, int i) {
            return view == contentView||view==menuview ;
        }

        @Override
        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
            /**
             * dx,dy描述的是偏移量
             * 向左边滑动后，contentView随着滑动事件向左边移动。但是menuview是显示不出来的（初始状态menuview是在
             * 屏幕之外的）。
             * 所以要在滑动的同时，给menuview设置偏移量使其跟随contentView滑动并且刷新界面。
             *
             */
            super.onViewPositionChanged( changedView,  left,  top,  dx,  dy);
            if (changedView == contentView) {
                menuview.offsetLeftAndRight(dx);
            } else {
                contentView.offsetLeftAndRight(dx);
            }
            invalidate();
        }

        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
                final int leftBound = getPaddingLeft();
                final int minLeftBound = -leftBound - dragDistance;
                final int newLeft = Math.min(Math.max(minLeftBound, left), 0);//使其不能向右滑动
                Log.d("liang", "clampViewPositionHorizontal: "+newLeft);
                return newLeft;
        }

        @Override
        public int getViewVerticalDragRange(View child) {
            return 0;
        }



        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            /**
             * xvel，yvel表示速度
             */
            super.onViewReleased(releasedChild, xvel, yvel);

            if(contentView.getRight()<(screenWidth-30)){
                viewDragHelper.smoothSlideViewTo(contentView,  -dragDistance, 0);
                ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);

            }else{

                viewDragHelper.smoothSlideViewTo(contentView, 0, 0);
                ViewCompat.postInvalidateOnAnimation(SwipeLayout.this);
            }
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if(viewDragHelper.shouldInterceptTouchEvent(ev)) {
            return true;
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        viewDragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if(viewDragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }
}

注释写得很全，就不一一解释了。需要说明的是：我在这里获取了当前屏幕的宽度，是为了在提高滑动过程中menuView响应事件的灵敏性。

2.listview的item布局文件：

<widget.SwipeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/line"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFDFDFE"
    android:orientation="horizontal">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/fkq"
            />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/image"
            android:layout_alignBottom="@+id/image"
            android:layout_toRightOf="@+id/image"
            android:layout_marginLeft="15dp"
            tools:ignore="RtlHardcoded">

            <TextView
                android:id="@+id/type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/hello_world"
                android:textSize="23sp"
                android:textColor="@color/bright_foreground_material_light"

                />

            <TextView
                android:id="@+id/content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="How are you?"
                android:textSize="24sp"
                android:textColor="#FF4535FF"
                android:layout_alignParentBottom="true"

                />

            <TextView
                android:id="@+id/time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="yesterday"
                android:textSize="19sp"
                android:textColor="#FF7F7F80"
               android:layout_alignParentRight="true"
                android:padding="10dp"

                />

        </RelativeLayout>

    </RelativeLayout>




    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/zhiding"
            android:layout_width="66.5dp"
            android:layout_height="match_parent"
            android:text="置顶"
            android:textColor="#FFF"
            android:textSize="17sp"
            android:gravity="center"
            android:background="#FFC6C6CC"/>
        <TextView
            android:id="@+id/biaojiweiyidu"
            android:layout_width="66.5dp"
            android:layout_height="match_parent"
            android:textColor="#FFF"
            android:textSize="17sp"
            android:text="已读"
            android:gravity="center"
            android:background="#FFFD9C01"/>
        <TextView
            android:id="@+id/delete"
            android:layout_width="66.5dp"
            android:layout_height="match_parent"
            android:textColor="#FFF"
            android:textSize="17sp"
            android:text="删除"
            android:gravity="center"
            android:background="#FFFD3A30"
            android:autoText="false" />

    </LinearLayout>




</widget.SwipeLayout>

这里面包含两个子布局，一个是内容布局，一个是菜单布局。内容布局填充整个item，而菜单布局是在屏幕之外的，不显示。

3.Activity的主布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <ListView
       android:id="@+id/listView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:scrollbars="none">

   </ListView>

</RelativeLayout>

4.listview的适配器及对应的javabean：

public class MyAdapter extends BaseAdapter {
    private Context context;
    private List<Chatter> datas;
    private LayoutInflater inflater;

    public MyAdapter(Context context, List<Chatter> datas) {
        this.context = context;
        this.datas = datas;
        inflater=LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return datas.size();
    }

    @Override
    public Object getItem(int i) {
        return datas.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int position, View covertView, ViewGroup viewGroup) {
        ViewHolder holder=null;
        if(covertView==null){
            holder=new ViewHolder();
            covertView=inflater.inflate(R.layout.item_list,null);
            holder.imageView=(ImageView)covertView.findViewById(R.id.image);
            holder.type=(TextView)covertView.findViewById(R.id.type);
            holder.content=(TextView)covertView.findViewById(R.id.content);
            holder.time=(TextView)covertView.findViewById(R.id.time);
            holder.zhhiding=(TextView)covertView.findViewById(R.id.zhiding);
            holder.biaojiweiyidu=(TextView)covertView.findViewById(R.id.biaojiweiyidu);
            holder.delete=(TextView)covertView.findViewById(R.id.delete);

            covertView.setTag(holder);
        }
        else {
            holder=(ViewHolder)covertView.getTag();
        }

        holder.imageView.setImageBitmap(datas.get(position).getPicture());
        holder.type.setText(datas.get(position).getType());
        holder.content.setText(datas.get(position).getContent());
        holder.time.setText(datas.get(position).getTime());



        holder.biaojiweiyidu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context, "标记为已读", Toast.LENGTH_SHORT).show();
            }
        });

        holder.delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context,"已经删除",Toast.LENGTH_SHORT).show();
            }
        });


        holder.zhhiding.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context, "已经置顶", Toast.LENGTH_SHORT).show();
            }
        });







        return covertView;
    }

    class ViewHolder{
        public ImageView imageView;
        public TextView type,content,time,zhhiding,biaojiweiyidu,delete;

    }
}

public class Chatter {

    private Bitmap picture;
    private String type,content,time;

    public Chatter(Bitmap picture, String type, String content, String time) {
        this.picture = picture;
        this.type = type;
        this.content = content;
        this.time = time;
    }

    public Bitmap getPicture() {
        return picture;
    }

    public void setPicture(Bitmap picture) {
        this.picture = picture;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }
}

5.MainActivity

public class MainActivity extends Activity {
    private LinearLayout linearLayout;
    private TextView textView;

    private ListView listView;
    private List<Chatter> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       initView();
    }

    void initView(){
       listView=(ListView)findViewById(R.id.listView);
        datas=new ArrayList<>();
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.fkq);

        Chatter chatter=new Chatter(bitmap,"好友","你好","昨天");
        Chatter chatter1=new Chatter(bitmap,"好友","你在干什么","今天下午");
        Chatter chatter2=new Chatter(bitmap,"朋友","hello","昨天");
        Chatter chatter3=new Chatter(bitmap,"亲人","病好了吗","前天");
        Chatter chatter4=new Chatter(bitmap,"老师","作业做完了吗","昨天");
        Chatter chatter5=new Chatter(bitmap,"老师","今天不上课","今天");
        Chatter chatter6=new Chatter(bitmap,"同学","去打球","子阿武");
        Chatter chatter7=new Chatter(bitmap,"同学","去打球","子阿武");
        Chatter chatter8=new Chatter(bitmap,"同学","去打球","子阿武");

        datas.add(chatter);
        datas.add(chatter1);
        datas.add(chatter2);
        datas.add(chatter3);
        datas.add(chatter4);
        datas.add(chatter5);
        datas.add(chatter6);
        datas.add(chatter7);
        datas.add(chatter8);

        MyAdapter adapter=new MyAdapter(this,datas);
        listView.setAdapter(adapter);



    }

}

效果图