先来看看,今天要实现的自定义控件效果图:
关于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,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 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 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,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,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的侧拉划出效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！
总结以上是内存溢出为你收集整理的Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果全部内容，希望文章能够帮你解决Android 中通过ViewDragHelper实现ListView的Item的侧拉划出效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）