ViewDragHelper实现QQ侧滑效果

2023-09-25 16:03:06 63

前言

侧滑的实现方式有很多方式来实现，这次总结的ViewDragHelper就是其中一种方式，ViewDragHelper是2013年谷歌I/O大会发布的新的控件，为了解决界面控件拖拽问题。下面就是自己学习写的一个实现类似于QQ侧滑效果的实现。
activity_main.xml:

DragLayout.Java:

publicclassDragLayoutextendsFrameLayout{

privatestaticfinalStringTAG="TAG";
privateViewDragHelpermDragHelper;
privateViewGroupmLeftContent;
privateViewGroupmMainContent;
privateOnDragStatusChangeListenermListener;
privateStatusmStatus=Status.Close;

/**
*状态枚举
*/
publicstaticenumStatus{
Close,Open,Draging;
}
publicinterfaceOnDragStatusChangeListener{
voidonClose();
voidonOpen();
voidonDraging(floatpercent);
}

publicStatusgetStatus(){
returnmStatus;
}

publicvoidsetStatus(StatusmStatus){
this.mStatus=mStatus;
}

publicvoidsetDragStatusListener(OnDragStatusChangeListenermListener){
this.mListener=mListener;
}

publicDragLayout(Contextcontext){
this(context,null);
}

publicDragLayout(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}

publicDragLayout(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);

//a.初始化(通过静态方法)
mDragHelper=ViewDragHelper.create(this,mCallback);

}

ViewDragHelper.CallbackmCallback=newViewDragHelper.Callback(){
//c.重写事件

//1.根据返回结果决定当前child是否可以拖拽
//child当前被拖拽的View
//pointerId区分多点触摸的id
@Override
publicbooleantryCaptureView(Viewchild,intpointerId){
Log.d(TAG,"tryCaptureView:"+child);
returntrue;
};

@Override
publicvoidonViewCaptured(ViewcapturedChild,intactivePointerId){
Log.d(TAG,"onViewCaptured:"+capturedChild);
//当capturedChild被捕获时,调用.
super.onViewCaptured(capturedChild,activePointerId);
}

@Override
publicintgetViewHorizontalDragRange(Viewchild){
//返回拖拽的范围,不对拖拽进行真正的限制.仅仅决定了动画执行速度
returnmRange;
}

//2.根据建议值修正将要移动到的(横向)位置(重要)
//此时没有发生真正的移动
publicintclampViewPositionHorizontal(Viewchild,intleft,intdx){
//child:当前拖拽的View
//left新的位置的建议值,dx位置变化量
//left=oldLeft+dx;
Log.d(TAG,"clampViewPositionHorizontal:"
+"oldLeft:"+child.getLeft()+"dx:"+dx+"left:"+left);

if(child==mMainContent){
left=fixLeft(left);
}
returnleft;
}

//3.当View位置改变的时候,处理要做的事情(更新状态,伴随动画,重绘界面)
//此时,View已经发生了位置的改变
@Override
publicvoidonViewPositionChanged(ViewchangedView,intleft,inttop,
intdx,intdy){
//changedView改变位置的View
//left新的左边值
//dx水平方向变化量
super.onViewPositionChanged(changedView,left,top,dx,dy);
Log.d(TAG,"onViewPositionChanged:"+"left:"+left+"dx:"+dx);

intnewLeft=left;
if(changedView==mLeftContent){
//把当前变化量传递给mMainContent
newLeft=mMainContent.getLeft()+dx;
}

//进行修正
newLeft=fixLeft(newLeft);

if(changedView==mLeftContent){
//当左面板移动之后,再强制放回去.
mLeftContent.layout(0,0,0+mWidth,0+mHeight);
mMainContent.layout(newLeft,0,newLeft+mWidth,0+mHeight);
}
//更新状态,执行动画
dispatchDragEvent(newLeft);

//为了兼容低版本,每次修改值之后,进行重绘
invalidate();
}

//4.当View被释放的时候,处理的事情(执行动画)
@Override
publicvoidonViewReleased(ViewreleasedChild,floatxvel,floatyvel){
//ViewreleasedChild被释放的子View
//floatxvel水平方向的速度,向右为+
//floatyvel竖直方向的速度,向下为+
Log.d(TAG,"onViewReleased:"+"xvel:"+xvel+"yvel:"+yvel);
super.onViewReleased(releasedChild,xvel,yvel);

//判断执行关闭/开启
//先考虑所有开启的情况,剩下的就都是关闭的情况
if(xvel==0&&mMainContent.getLeft()>mRange/2.0f){
open();
}elseif(xvel>0){
open();
}else{
close();
}

}

@Override
publicvoidonViewDragStateChanged(intstate){
//TODOAuto-generatedmethodstub
super.onViewDragStateChanged(state);
}

};

/**
*根据范围修正左边值
*@paramleft
*@return
*/
privateintfixLeft(intleft){
if(left<0){
return0;
}elseif(left>mRange){
returnmRange;
}
returnleft;
}

protectedvoiddispatchDragEvent(intnewLeft){
floatpercent=newLeft*1.0f/mRange;
//0.0f->1.0f
Log.d(TAG,"percent:"+percent);

if(mListener!=null){
mListener.onDraging(percent);
}

//更新状态,执行回调
StatuspreStatus=mStatus;
mStatus=updateStatus(percent);
if(mStatus!=preStatus){
//状态发生变化
if(mStatus==Status.Close){
//当前变为关闭状态
if(mListener!=null){
mListener.onClose();
}
}elseif(mStatus==Status.Open){
if(mListener!=null){
mListener.onOpen();
}
}
}

//*伴随动画:
animViews(percent);

}

privateStatusupdateStatus(floatpercent){
if(percent==0f){
returnStatus.Close;
}elseif(percent==1.0f){
returnStatus.Open;
}
returnStatus.Draging;
}

privatevoidanimViews(floatpercent){
//>1.左面板:缩放动画,平移动画,透明度动画
//缩放动画0.0->1.0>>>0.5f->1.0f>>>0.5f*percent+0.5f
//mLeftContent.setScaleX(0.5f+0.5f*percent);
//mLeftContent.setScaleY(0.5f+0.5f*percent);
ViewHelper.setScaleX(mLeftContent,evaluate(percent,0.5f,1.0f));
ViewHelper.setScaleY(mLeftContent,0.5f+0.5f*percent);
//平移动画:-mWidth/2.0f->0.0f
ViewHelper.setTranslationX(mLeftContent,evaluate(percent,-mWidth/2.0f,0));
//透明度:0.5->1.0f
ViewHelper.setAlpha(mLeftContent,evaluate(percent,0.5f,1.0f));

//>2.主面板:缩放动画
//1.0f->0.8f
ViewHelper.setScaleX(mMainContent,evaluate(percent,1.0f,0.8f));
ViewHelper.setScaleY(mMainContent,evaluate(percent,1.0f,0.8f));

//>3.背景动画:亮度变化(颜色变化)
getBackground().setColorFilter((Integer)evaluateColor(percent,Color.BLACK,Color.TRANSPARENT),Mode.SRC_OVER);
}

/**
*估值器
*@paramfraction
*@paramstartValue
*@paramendValue
*@return
*/
publicFloatevaluate(floatfraction,NumberstartValue,NumberendValue){
floatstartFloat=startValue.floatValue();
returnstartFloat+fraction*(endValue.floatValue()-startFloat);
}
/**
*颜色变化过度
*@paramfraction
*@paramstartValue
*@paramendValue
*@return
*/
publicObjectevaluateColor(floatfraction,ObjectstartValue,ObjectendValue){
intstartInt=(Integer)startValue;
intstartA=(startInt>>24)&0xff;
intstartR=(startInt>>16)&0xff;
intstartG=(startInt>>8)&0xff;
intstartB=startInt&0xff;

intendInt=(Integer)endValue;
intendA=(endInt>>24)&0xff;
intendR=(endInt>>16)&0xff;
intendG=(endInt>>8)&0xff;
intendB=endInt&0xff;

return(int)((startA+(int)(fraction*(endA-startA)))<<24)|
(int)((startR+(int)(fraction*(endR-startR)))<<16)|
(int)((startG+(int)(fraction*(endG-startG)))<<8)|
(int)((startB+(int)(fraction*(endB-startB))));
}

@Override
publicvoidcomputeScroll(){
super.computeScroll();

//2.持续平滑动画(高频率调用)
if(mDragHelper.continueSettling(true)){
//如果返回true,动画还需要继续执行
ViewCompat.postInvalidateOnAnimation(this);
}
}

publicvoidclose(){
close(true);
}
/**
*关闭
*/
publicvoidclose(booleanisSmooth){
intfinalLeft=0;
if(isSmooth){
//1.触发一个平滑动画
if(mDragHelper.smoothSlideViewTo(mMainContent,finalLeft,0)){
//返回true代表还没有移动到指定位置,需要刷新界面.
//参数传this(child所在的ViewGroup)
ViewCompat.postInvalidateOnAnimation(this);
}
}else{
mMainContent.layout(finalLeft,0,finalLeft+mWidth,0+mHeight);
}
}

publicvoidopen(){
open(true);
}
/**
*开启
*/
publicvoidopen(booleanisSmooth){
intfinalLeft=mRange;
if(isSmooth){
//1.触发一个平滑动画
if(mDragHelper.smoothSlideViewTo(mMainContent,finalLeft,0)){
//返回true代表还没有移动到指定位置,需要刷新界面.
//参数传this(child所在的ViewGroup)
ViewCompat.postInvalidateOnAnimation(this);
}
}else{
mMainContent.layout(finalLeft,0,finalLeft+mWidth,0+mHeight);
}
}

privateintmHeight;
privateintmWidth;
privateintmRange;

//b.传递触摸事件
@Override
publicbooleanonInterceptTouchEvent(MotionEventev){
//传递给mDragHelper
returnmDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
publicbooleanonTouchEvent(MotionEventevent){
try{
mDragHelper.processTouchEvent(event);
}catch(Exceptione){
e.printStackTrace();
}
//返回true,持续接受事件
returntrue;
}

@Override
protectedvoidonFinishInflate(){
super.onFinishInflate();
//Github
//写注释
//容错性检查(至少有俩子View,子View必须是ViewGroup的子类)

if(getChildCount()<2){
thrownewIllegalStateException("布局至少有俩孩子.YourViewGroupmusthave2childrenatleast.");
}
if(!(getChildAt(0)instanceofViewGroup&&getChildAt(1)instanceofViewGroup)){
thrownewIllegalArgumentException("子View必须是ViewGroup的子类.YourchildrenmustbeaninstanceofViewGroup");
}

mLeftContent=(ViewGroup)getChildAt(0);
mMainContent=(ViewGroup)getChildAt(1);
}

@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
//当尺寸有变化的时候调用

mHeight=getMeasuredHeight();
mWidth=getMeasuredWidth();

//移动的范围
mRange=(int)(mWidth*0.6f);

}

}

MyLineatLayout.java:

publicclassMyLinearLayoutextendsLinearLayout{

privateDragLayoutmDragLayout;

publicMyLinearLayout(Contextcontext){
super(context);
}

publicMyLinearLayout(Contextcontext,AttributeSetattrs){
super(context,attrs);
}

publicvoidsetDraglayout(DragLayoutmDragLayout){
this.mDragLayout=mDragLayout;
}

@Override
publicbooleanonInterceptTouchEvent(MotionEventev){
//如果当前是关闭状态,按之前方法判断
if(mDragLayout.getStatus()==Status.Close){
returnsuper.onInterceptTouchEvent(ev);
}else{
returntrue;
}
}

@Override
publicbooleanonTouchEvent(MotionEventevent){
//如果当前是关闭状态,按之前方法处理
if(mDragLayout.getStatus()==Status.Close){
returnsuper.onTouchEvent(event);
}else{
//手指抬起,执行关闭操作
if(event.getAction()==MotionEvent.ACTION_UP){
mDragLayout.close();
}

returntrue;
}
}

}

MainActivity.java:

publicclassMainActivityextendsActivity{

privatestaticfinalStringTAG="TAG";

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

finalListViewmLeftList=(ListView)findViewById(R.id.lv_left);
finalListViewmMainList=(ListView)findViewById(R.id.lv_main);
finalImageViewmHeaderImage=(ImageView)findViewById(R.id.iv_header);
MyLinearLayoutmLinearLayout=(MyLinearLayout)findViewById(R.id.mll);

//查找Draglayout,设置监听
DragLayoutmDragLayout=(DragLayout)findViewById(R.id.dl);

//设置引用
mLinearLayout.setDraglayout(mDragLayout);

mDragLayout.setDragStatusListener(newOnDragStatusChangeListener(){

@Override
publicvoidonOpen(){
Utils.showToast(MainActivity.this,"onOpen");
//左面板ListView随机设置一个条目
Randomrandom=newRandom();

intnextInt=random.nextInt(50);
mLeftList.smoothScrollToPosition(nextInt);

}

@Override
publicvoidonDraging(floatpercent){
Log.d(TAG,"onDraging:"+percent);//0->1
//更新图标的透明度
//1.0->0.0
ViewHelper.setAlpha(mHeaderImage,1-percent);
}

@Override
publicvoidonClose(){
Utils.showToast(MainActivity.this,"onClose");
//让图标晃动
//mHeaderImage.setTranslationX(translationX)
ObjectAnimatormAnim=ObjectAnimator.ofFloat(mHeaderImage,"translationX",15.0f);
mAnim.setInterpolator(newCycleInterpolator(4));
mAnim.setDuration(500);
mAnim.start();
}
});

mLeftList.setAdapter(newArrayAdapter(this,android.R.layout.simple_list_item_1,Cheeses.sCheeseStrings){
@Override
publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
Viewview=super.getView(position,convertView,parent);
TextViewmText=((TextView)view);
mText.setTextColor(Color.WHITE);
returnview;
}
});

mMainList.setAdapter(newArrayAdapter(this,android.R.layout.simple_list_item_1,Cheeses.NAMES))
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

ViewDragHelper实现QQ侧滑效果

热门推荐

随机推荐