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

时间:2022-07-27
本文章向大家介绍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的侧拉划出效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持!