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的侧拉划出效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！

您可能感兴趣的文章:Android基于ViewDragHelper仿QQ5.0侧滑界面效果Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)Android使用ViewDragHelper实现QQ6.X最新版本侧滑界面效果实例代码Android自定义可拖拽的悬浮按钮DragFloatingActionButtonAndroid利用RecyclerView实现全选、置顶和拖拽功能示例Android ViewDragHelper实现京东、淘宝拖拽详情功能的实现

viewdraghelper listview Android