欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-08-13 15:40:23
先来看看,今天要实现的自定义控件效果图: 关于viewdraghelper的使用,大家可以先看这篇文章viewdraghelper的使用介绍 实现该自定义控件的大体...

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

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

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

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

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

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

未划出时显示的frontview:

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

划出后的右边显示backview:

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

以上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中,还需要做进一步的处理.
例如实现如下效果:

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

需要考虑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的侧拉划出效果,希望对大家有所帮助