Android 仿新版微信的小程序下拉栏

上周微信更新到了 6.6.1 版本，加入了微信小游戏。朋友圈都在玩跳一跳。而且现在微信把最近用过的小程序放到了首页顶部，轻轻下拉就可以快速访问了。可以看下效果，如果还没升级的朋友可要抓紧了。

自己作为一个安卓程序员，虽然不会写小程序，但也要紧跟热潮(蹭热点)啊。于是乎就干脆仿写下这个下拉控件吧。第七宇宙惯例，先上效果图：

上图的主界面是我上一篇文章《撸一款全手势操作浏览器》写的 demo。写完这个控件，发现正好可以作为它的下拉菜单栏，就直接用上了。好了，废话不多说，开始介绍下实现流程。

流程分析

整个下拉过程分为四个阶段：阶段一：出现一个原点，半径随下拉距离变大而变大。位置始终在中间

阶段二：原点两边出现两个原点，半径较小。距离随下拉距离变大而变大，中间原点半径不断变小。位置始终在中间

阶段三：从顶部出现内容列表，位置随手指下拉快速往下移动，同时三个原点位置不断下移并逐渐消失

阶段四：只剩下内容列表，手指可以继续往下滑动，但阻尼变大。内容列表始终在中间。

上滑分两种情况：如果开始上滑的时候内容列表已展开，则平移上滑(原点不会出现)

反之，就是下拉的逆过程了(原点会出现)。

具体实现

熟悉下拉刷新控件的同学可以看出来，上述滑动的流程和下拉刷新很相似，所以为了避免重复造轮子(偷懒)，我将下拉刷新控件作了改动，所以主要的实现还是在头部那块。

初始布局位置

将头部放到屏幕外层的方法有很多。我采用了设置负数 padding 的方法。外层布局继承了 LinearLayout，方向竖直。然后为其设置 padding：headerHeight=(null!=mHeaderLayout)?mHeaderLayout.getMeasuredHeight():0;

intpLeft=getPaddingLeft();

intpTop=-headerHeight;

intpRight=getPaddingRight();

intpBottom=-footerHeight;

setPadding(pLeft,pTop,pRight,pBottom);

paddingTop 的值等于负的 HeaderLayout 的高度，这样正好将头部布局顶到屏幕外面。

处理触摸事件

这块主要内容就是复写booleanonInterceptTouchEvent(MotionEventevent)和booleanonTouchEvent(MotionEventev)@Override

public

final

boolean

onInterceptTouchEvent

(MotionEventevent)

{

finalintaction=event.getAction();

//不拦截

if(action==MotionEvent.ACTION_CANCEL||action==MotionEvent.ACTION_UP){

mIsHandledTouchEvent=false;

returnfalse;

}

//如果不是重新开始触摸且已经判断需要拦截，就一直拦截整套触摸事件

if(action!=MotionEvent.ACTION_DOWN&&mIsHandledTouchEvent){

returntrue;

}

switch(action){

caseMotionEvent.ACTION_DOWN:

mLastMotionY=event.getY();

mIsHandledTouchEvent=false;

break;

caseMotionEvent.ACTION_MOVE:

finalfloatdeltaY=event.getY()-mLastMotionY;

finalfloatabsDiff=Math.abs(deltaY);

// 位移差大于mTouchSlop，这是为了防止快速拖动引发刷新

if((absDiff>mTouchSlop)){

mLastMotionY=event.getY();

// 第一个显示出来，Header已经显示或拉下

if(isPullRefreshEnabled()&&isReadyForPullDown()){

// 1，Math.abs(getScrollY()) > 0：表示当前滑动的偏移量的绝对值大于0，表示当前HeaderView滑出来了或完全

// 不可见，存在这样一种case，当正在刷新时并且RefreshableView已经滑到顶部，向上滑动，那么我们期望的结果是

// 依然能向上滑动，直到HeaderView完全不可见

// 2，deltaY > 0.5f：表示下拉的值大于0.5f

mIsHandledTouchEvent=(Math.abs(getScrollYValue())>0||deltaY>0.5f);

}

}

break;

default:

break;

}

returnmIsHandledTouchEvent;//true：拦截，false不拦截

}

如果拦截了，我们处理滑动. 其中 offsetRadio 是滑动阻尼值。@OverridepublicfinalbooleanonTouchEvent(MotionEventev){

booleanhandled=false;

switch(ev.getAction()){

caseMotionEvent.ACTION_DOWN:

mLastMotionY=ev.getY();

mIsHandledTouchEvent=false;

break;

caseMotionEvent.ACTION_MOVE:

finalfloatdeltaY=ev.getY()-mLastMotionY;

mLastMotionY=ev.getY();

if(isPullRefreshEnabled()&&isReadyForPullDown()){

pullHeaderLayout(deltaY/offsetRadio);

handled=true;

}else{

mIsHandledTouchEvent=false;

}

break;

caseMotionEvent.ACTION_CANCEL:

caseMotionEvent.ACTION_UP:

if(mIsHandledTouchEvent){

mIsHandledTouchEvent=false;

// 当第一个显示出来时

if(isReadyForPullDown()){

// 调用刷新

if(mPullRefreshEnabled&&(mPullDownState==State.RELEASE_TO_REFRESH)){

startRefreshing();

handled=true;

}

resetHeaderLayout();

}

}

break;

default:

break;

}

returnhandled;

}

最终我们会通过 pullHeaderLayout 调用 View 的 scrollBy(x, y) 方法将布局整体滚动。

遇到的一个问题

我在上面这样写好之后，跑了一遍，发现onInterceptTouchEvent只执行了 ACTION_DOWN，ACTION_MOVE 事件不会执行，也就无法拦截和进行滑动了。百度下原来有这么一个规则：

onInterceptTouchEvent返回 false 表示将 down 事件交由子 View 来处理；若某一层子 View 的 onTouchEvent 返回了 true，后续的 move、up 等事件都将先传递到 ViewGroup 的onInterceptTouchEvent的方法，并继续层层传递下去，交由子 View 处理；若子 View 的 onTouchEvent 都返回了 false，则 down 事件将交由该 ViewGroup 的 onTouchEvent 来处理；如果 ViewGroup 的 onTouchEvent 返回 true，后续事件不再经过该 ViewGroup 的onInterceptTouchEvent方法，直接传递给 onTouchEvent 方法处理。

因为目前的子 View 是 RelativeLayout，它的 onTouchEvent 默认返回了 false(ListView 等其他可滑动的控件不会有这个问题)。解决办法是设置android:clickable="true"。

头部的实现

上面我说过滑动有四个阶段，只要将滑动距离传递给自定义头部，根据距离判断状态，实时改变内容列表的 TranslationY，原点的 TranslationY 和 Alpha 就可以了。实现起来也是比较简单的。详细的代码就不贴了，大家感兴趣的可以去看源码。至于原点动画，也是一个自定义 View，外层只要根据滑动距离换算下动画的百分比传进去，在里面画出需要的图形就行了，百分比是 0.5 的时候出现三个圆 :public

class

ExpendPoint

extends

View

{

floatpercent;

floatmaxRadius=15;

floatmaxDist=60;

PaintmPaint;

publicExpendPoint(Contextcontext,@NullableAttributeSetattrs){

super(context,attrs);

mPaint=newPaint();

mPaint.setAntiAlias(true);

mPaint.setColor(Color.GRAY);

}

public

void

setPercent

(floatpercent)

{

this.percent=percent;

invalidate();

}

@Override

protected

void

onDraw

(Canvascanvas)

{

super.onDraw(canvas);

floatcenterX=getWidth()/2;

floatcenterY=getHeight()/2;

if(percent<=0.5f){只画一个圆

mPaint.setAlpha(255);

floatradius=percent*2*maxRadius;

canvas.drawCircle(centerX,centerY,radius,mPaint);

}else{//画三个个圆

floatafterPercent=(percent-0.5f)/0.5f;

floatradius=maxRadius-maxRadius/2*afterPercent;

canvas.drawCircle(centerX,centerY,radius,mPaint);

canvas.drawCircle(centerX-afterPercent*maxDist,centerY,maxRadius/2,mPaint);

canvas.drawCircle(centerX+afterPercent*maxDist,centerY,maxRadius/2,mPaint);

}

}

}

来源: https://juejin.im/post/5a4c90c15188257c4d1b8d0c