【移动应用开发技术】Android中如何通过ViewDragHelper实现ListView的Item的侧拉划出效果

【移动应用开发技术】Android中如何通过ViewDragHelper实现ListView的Item的侧拉划出效果

/upload/information/20200623/125/126976.gif实现该自定义控件的大体步骤如下:/upload/information/20200623/125/126977.png/upload/information/20200623/125/126978.png以上2部分就是该自定义控件要包含的2个直接子View./**

*

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

{

mDragHcessTouchEvent(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()

{

puteScroll();

if

(mDragHelper.continueSettling(true))

{

//动画还在继续

ViewCompat.postInvalidateOnAnimation(this);

}

}

}<?xml

version="1.0"

encoding="utf-8"?>

<.csdn.blog.myswipelayout.view.SwipeLayout

xmlns:android="/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>

</.csdn.blog.myswipelayout.view.SwipeLayout>/upload/information/20200623/125/126979.gif需要考虑2点:/**

*

侧拉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种状态

public

enum

Status

{

CLOSE,

OPEN,

DRAGING;

}

//默认关闭

private

Status

mStatus

=

Status.CLOSE;

//滑动的监听器

private

SwipeViewListener

mSwipeViewListener;

//设置监听器

public

void

setSwipeViewListener(SwipeViewListener

swipeViewListener)

{

mSwipeViewListener

=

swipeViewListener;

}/**

*

处理滑动,打开,关闭的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;

}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,"编辑");