Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果

先来看看,今天要实现的自定义控件效果图:

关于viewdraghelper的使用,大家可以先看这篇文章viewdraghelper的使用介绍

实现该自定义控件的大体步骤如下:

1.viewdraghelper使用的3部曲,初始化viewdraghelper,传递触摸事件,实现viewdraghelper.callback抽象类.

2.需要创建2个直接的子view,分别是前景view和背景view,代表listview每一项item的布局的组成,如下所示:

未划出时显示的frontview:

划出后的右边显示backview:

以上2部分就是该自定义控件要包含的2个直接子view.

3.需要获取frontview的宽高,宽度其实就是屏幕的宽度,高度就是listview每一项item的高度;还需获取backview的宽度,因为这个宽度就是侧滑的最大范围.

4.需要确定frontview和backview的初始位置,在onlayout方法中确定,即默认情况下是只显示frontview的.这个实现起来也很简单,frontview的left=0,backview的left=frontview的right即可.

5.需要同步frontview和backview的滑动,即滑动frontview的时候backview也需要跟着划出,同样滑动backview的时候也需要frontview跟着滑动.

6.需要解决侧拉划出的效果是否有动画效果.平滑滑动的动画可以通过viewdraghelper轻松实现.

好了,直接上自定义的swipelayout源码:

/** 
 * created by mchenys on 2015/12/26. 
 */ 
public class swipelayout extends framelayout { 
  private viewdraghelper.callback mcallback; 
  private viewdraghelper mdraghelper; 
  private view mbackview; //item的侧边布局 
  private view mfrontview;//当前显示的item布局 
  private int mwidth; //屏幕的宽度,mfrontview的宽度 
  private int mheight; //mfrontview的高度 
  private int mrange;//mfrontview侧拉时向左移动的最大距离,即mbackview的宽度 
  public swipelayout(context context) { 
    this(context, null); 
  } 
  public swipelayout(context context, attributeset attrs) { 
    this(context, attrs, 0); 
  } 
  public swipelayout(context context, attributeset attrs, int defstyleattr) { 
    super(context, attrs, defstyleattr); 
    init(); 
  } 
  //1.初始viewdraghelper 
  private void init() { 
    mcallback = new viewdraghelper.callback() { 
      //3.在回调方法中处理触摸事件 
      @override 
      public boolean trycaptureview(view child, int pointerid) { 
        return true; //允许所有子控件的滑动 
      } 
      //设定滑动的边界值 
      @override 
      public int clampviewpositionhorizontal(view child, int left, int dx) { 
        if (child == mfrontview) { 
          //前景view的滑动范围是(0~ -mrange) 
          if (left > 0) { 
            left = 0; 
          } else if (left < -mrange) { 
            left = -mrange; 
          } 
        } 
        if (child == mbackview) { 
          //背景view的滑动范围是(mwidth - mrange ~ mwidth) 
          if (left > mwidth) { 
            left = mwidth; 
          } else if (left < (mwidth - mrange)) { 
            left = mwidth - mrange; 
          } 
        } 
        //返回修正过的建议值 
        return left; 
      } 
      //监听view的滑动位置的改变,同步前景view和背景view的滑动事件 
      @override 
      public void onviewpositionchanged(view changedview, int left, int top, int dx, int dy) { 
        if (changedview == mfrontview) { 
          //当滑动前景view时,也需要滑动背景view 
          mbackview.offsetleftandright(dx); 
        } else if (changedview == mbackview) { 
          //当滑动背景view时,也需要滑动前景view 
          mfrontview.offsetleftandright(dx); 
        } 
        // 兼容老版本 
        invalidate(); 
      } 
      //处理释放后的开启和关闭动作 
      @override 
      public void onviewreleased(view releasedchild, float xvel, float yvel) { 
        if (xvel < 0) { 
          //有向左滑动的速度,则打开 
          open(); 
        } else if (xvel == 0 && mfrontview.getleft() < -mrange / 2.0f) { 
          //前景view向左滑动的left小于背景view宽度一半的负值时,打开 
          open(); 
        } else { 
          //其他情况为关闭 
          close(); 
        } 
      } 
    }; 
    mdraghelper = viewdraghelper.create(this, mcallback); 
  } 
  //2.传递触摸事件 
  @override 
  public boolean onintercepttouchevent(motionevent ev) { 
    return mdraghelper.shouldintercepttouchevent(ev); 
  } 
  @override 
  public boolean ontouchevent(motionevent event) { 
    try { 
      mdraghelper.processtouchevent(event); 
    } catch (exception e) { 
      e.printstacktrace(); 
    } 
    return true; 
  } 
  //获取子控件的引用 
  @override 
  protected void onfinishinflate() { 
    super.onfinishinflate(); 
    mbackview = getchildat(0); //获取背景view,即展示数据的item的右边隐藏的侧滑布局 
    mfrontview = getchildat(1);//获取前景view,即展示数据的item 
  } 
  //获取子控件的相关宽高信息 
  @override 
  protected void onsizechanged(int w, int h, int oldw, int oldh) { 
    super.onsizechanged(w, h, oldw, oldh); 
    mwidth = mfrontview.getmeasuredwidth(); 
    mheight = mfrontview.getmeasuredheight(); 
    mrange = mbackview.getmeasuredwidth(); 
  } 
  //确定子控件的初始位置 
  @override 
  protected void onlayout(boolean changed, int left, int top, int right, int bottom) { 
    super.onlayout(changed, left, top, right, bottom); 
    layoutchildview(false); 
  } 
  /** 
   * 放置子控件的位置 
   * 
   * @param isopen 是否是打开前景view,true打开,false关闭 
   */ 
  private void layoutchildview(boolean isopen) { 
    //计算前景view的位置,将坐标信息封装到矩形中 
    rect fontrect = computerfontviewrect(isopen); 
    //摆放前景view 
    mfrontview.layout(fontrect.left, fontrect.top, fontrect.right, fontrect.bottom); 
    //摆放背景view,left坐标是前景view的right坐标 
    int left = fontrect.right; 
    mbackview.layout(left, 0, left + mrange, mheight); 
    //由于上面是后摆放背景view,所以会覆盖前景view,因此需要通过下面的方式将前景view显示在前面 
    bringchildtofront(mfrontview); 
  } 
  /** 
   * 计算前景view的坐标 
   * 
   * @param isopen 是否是打开前景view 
   * @return 
   */ 
  private rect computerfontviewrect(boolean isopen) { 
    int left = isopen ? -mrange : 0; 
    return new rect(left, 0, left + mwidth, mheight); 
  } 
  /** 
   * 打开侧边栏mbackview,默认平滑打开 
   */ 
  public void open() { 
    open(true); 
  } 
  /** 
   * 打开侧边栏mbackview 
   * 
   * @param issmooth 是否平滑打开 
   */ 
  public void open(boolean issmooth) { 
    if (issmooth) { 
      if (mdraghelper.smoothslideviewto(mfrontview, -mrange, 0)) { 
        //动画在继续 
        viewcompat.postinvalidateonanimation(this); 
      } 
    } else { 
      layoutchildview(true); 
    } 
  } 
  /** 
   * 关闭侧边栏mbackview,默认平滑关闭 
   */ 
  public void close() { 
    close(true); 
  } 
  /** 
   * 关闭侧边栏mbackview 
   * 
   * @param issmooth 是否平滑关闭 
   */ 
  public void close(boolean issmooth) { 
    if (issmooth) { 
      if (mdraghelper.smoothslideviewto(mbackview, mwidth, 0)) { 
        //动画在继续 
        viewcompat.postinvalidateonanimation(this); 
      } 
    } else { 
      layoutchildview(false); 
    } 
  } 
  @override 
  public void computescroll() { 
    super.computescroll(); 
    if (mdraghelper.continuesettling(true)) { 
      //动画还在继续 
      viewcompat.postinvalidateonanimation(this); 
    } 
  } 
} 

如何使用呢?

使用该控件,必须要让其有2个直接的子控件,如下布局所示:

<?xml version="1.0" encoding="utf-8"?> 
<mchenys.net.csdn.blog.myswipelayout.view.swipelayout  
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:id="@+id/sl" 
  android:layout_width="match_parent" 
  android:layout_height="60dp" 
  android:minheight="60dp" 
  android:background="#44000000" > 
  <!--后置布局--> 
  <linearlayout 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:orientation="horizontal" > 
    <textview 
      android:id="@+id/tv_call" 
      android:layout_width="60dp" 
      android:layout_height="match_parent" 
      android:background="#666666" 
      android:gravity="center" 
      android:text="edit" 
      android:textcolor="#ffffff" /> 
    <textview 
      android:id="@+id/tv_del" 
      android:layout_width="60dp" 
      android:layout_height="match_parent" 
      android:background="#ff0000" 
      android:gravity="center" 
      android:text="delete" 
      android:textcolor="#ffffff" /> 
  </linearlayout> 
  <!--前景布局--> 
  <linearlayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#44ffffff" 
    android:gravity="center_vertical" 
    android:orientation="horizontal" > 
    <imageview 
      android:id="@+id/iv_image" 
      android:layout_width="40dp" 
      android:layout_height="40dp" 
      android:layout_marginleft="15dp" 
      android:src="@drawable/head_1" /> 
    <textview 
      android:id="@+id/tv_name" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginleft="15dp" 
      android:text="name" /> 
  </linearlayout> 
</mchenys.net.csdn.blog.myswipelayout.view.swipelayout> 

就是这么简单,跑起来就可以用了.不过这个只是定义出了swipelayout控件,如果要集成到listview中,还需要做进一步的处理.
例如实现如下效果:

需要考虑2点:

1.在自定义swipelayout控件内需要处理3种状态,打开,关闭,拖拽.

2.需要添加一个侧滑监听接口,用于对外暴露当前swipelayout的打开,关闭,拖拽,将要打开,将要关闭这5种情况.接口定义如下所示:

/** 
 * 侧拉swipelayout的监听 
 * created by mchenys on 2015/12/26. 
 */ 
public interface swipeviewlistener { 
  //关闭 
  void onclose(swipelayout mswipelayout); 
  //打开 
  void onopen(swipelayout mswipelayout); 
  //正在侧拉 
  void ondraging(swipelayout mswipelayout); 
  //开始要去关闭 
  void onstartclose(swipelayout mswipelayout); 
  //开始要去开启 
  void onstartopen(swipelayout mswipelayout); 
} 

swipelayout的3种状态,用enum表示即定义接收获取swipeviewlistener监听器的方法1

//以下是定义swipelayout的打开,关闭,滑动的3种状态 
  public enum status { 
    close, open, draging; 
  } 
  //默认关闭 
  private status mstatus = status.close; 
  //滑动的监听器 
  private swipeviewlistener mswipeviewlistener; 
  //设置监听器 
  public void setswipeviewlistener(swipeviewlistener swipeviewlistener) { 
    mswipeviewlistener = swipeviewlistener; 
  } 

在onviewpositionchanged方法内添加多一个方法,用于处理拖拽的监听.

/** 
   * 处理滑动,打开,关闭的3种情况 
   * 在onviewpositionchanged 调用 
   */ 
  private void dispatchswipeevent() { 
    if (mswipeviewlistener != null) { 
      mswipeviewlistener.ondraging(this); 
    } 
    //记录上一次的状态 
    status prestatus = mstatus; 
    //获取当前的状态 
    mstatus = getcurrstatus(); 
    if (prestatus != mstatus && null != mswipeviewlistener) { 
      //说明有状态发生变化 
      if (mstatus == status.close) { 
        //关闭 
        mswipeviewlistener.onclose(this); 
      } else if (mstatus == status.open) { 
        //打开 
        mswipeviewlistener.onopen(this); 
      } else if (mstatus == status.draging) { 
        //这里有2中情况,要么要打开,要么要关闭 
        if (prestatus == status.close) { 
          //如果之前是关闭的,那么就是要打开 
          mswipeviewlistener.onstartopen(this); 
        } else if (prestatus == status.open) { 
          //如果之前是打开,那么就是要关闭 
          mswipeviewlistener.onstartclose(this); 
        } 
      } 
    } 
  } 
  /** 
   * 获取当前的状态 
   * 
   * @return 
   */ 
  private status getcurrstatus() { 
    int left = mfrontview.getleft(); 
    if (left == 0) { 
      return status.close; 
    } else if (left == -mrange) { 
      return status.open; 
    } 
    return status.draging; 
  } 

最后来看看mainactivity的测试:

public class mainactivity extends appcompatactivity { 
  private list<string> mdata = new arraylist<>();//数据集合 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    //获取数据,注意:arrays.aslist返回的并不是一个java.util.arraylist，而是一个arrays类的内部类，该list实现是不能进行增删操作的 
    //因此必须再包装一下 
    mdata = new arraylist<>(arrays.aslist(constant.name)); 
    listview listview = new listview(this); 
    listview.setadapter(madapter); 
    setcontentview(listview); 
  } 
  //自定义适配器 
  private baseadapter madapter = new baseadapter() { 
    //标记当前打开的swipelayout的集合 
    private list<swipelayout> mopenitem = new arraylist<>(); 
    @override 
    public int getcount() { 
      return mdata.size(); 
    } 
    @override 
    public string getitem(int position) { 
      return mdata.get(position); 
    } 
    @override 
    public long getitemid(int position) { 
      return position; 
    } 
    @override 
    public view getview(final int position, view convertview, viewgroup parent) { 
      viewholder holder = null; 
      if (null == convertview) { 
        holder = new viewholder(); 
        convertview = view.inflate(mainactivity.this, r.layout.item_list, null); 
        holder.mswipelayout = (swipelayout) convertview; 
        holder.tvname = (textview) convertview.findviewbyid(r.id.tv_name); 
        holder.tvdel = (textview) convertview.findviewbyid(r.id.tv_del); 
        holder.tvedit = (textview) convertview.findviewbyid(r.id.tv_edit); 
        convertview.settag(holder); 
      } else { 
        holder = (viewholder) convertview.gettag(); 
      } 
      //设置侧拉监听 
      holder.mswipelayout.setswipeviewlistener(getswipeviewlistener()); 
      holder.tvname.settext(getitem(position)); 
      holder.tvdel.setonclicklistener(new view.onclicklistener() { 
        @override 
        public void onclick(view v) { 
          //删除 
          mdata.remove(position); 
          madapter.notifydatasetchanged(); 
        } 
      }); 
      holder.tvedit.setonclicklistener(new view.onclicklistener() { 
        @override 
        public void onclick(view v) { 
          toastutils.showtoast(mainactivity.this,"编辑"); 
        } 
      }); 
      return convertview; 
    } 
    class viewholder { 
      textview tvname, tvdel, tvedit; 
      swipelayout mswipelayout; 
    } 
    //获取滑动监听器 
    private swipeviewlistener getswipeviewlistener() { 
      return new swipeviewlistener() { 
        @override 
        public void onclose(swipelayout mswipelayout) { 
          //关闭是移除 
          mopenitem.remove(mswipelayout); 
          toastutils.showtoast(mainactivity.this, "关闭"); 
        } 
        @override 
        public void onopen(swipelayout mswipelayout) { 
          //打开时添加 
          mopenitem.add(mswipelayout); 
          toastutils.showtoast(mainactivity.this, "打开"); 
        } 
        @override 
        public void ondraging(swipelayout mswipelayout) { 
        } 
        @override 
        public void onstartclose(swipelayout mswipelayout) { 
          toastutils.showtoast(mainactivity.this, "开始关闭"); 
        } 
        @override 
        public void onstartopen(swipelayout mswipelayout) { 
          //将要打开时,需要将集合中的之前打开的swipelayout统统关闭 
          for (swipelayout swipelayout : mopenitem) { 
            swipelayout.close(); 
          } 
          mopenitem.clear();//清空集合 
          toastutils.showtoast(mainactivity.this, "开始打开"); 
        } 
      }; 
    } 
  }; 
} 

总结

以上所述是小编给大家介绍的 android 中通过viewdraghelper实现listview的item的侧拉划出效果，希望对大家有所帮助