Android仿美团拖拽效果采坑记

前言

效果图.gif

如上图，实现了拖拽事件的无缝过渡。效果很流畅很自然，之所以写轮子由于实在找不到好用的库，该库参考了下面的地址：

woxingxiao/SlidingUpPanelLayout

其实在大神的开源库里就有Issues提到内嵌 scrollView 时滑动冲突的问题。再加上最近项目里面的介绍页就有这样的拖拽效果需求，只好自己实现一遍。

正文

在实现的过程中，就遇到几个比较辣手的问题，也经过了一番挣扎才想出处理的方案。

困难

• 拖拽释放的时机，如下拉1/6就自动收缩否则回弹，上拉1/3回弹还是开展

• 释放后，在回弹过程中升级背后view的视觉差、渐变效果

• 解决好上面两个问题，即可以很流畅的实现拖拽开展和收缩效果，接下来过渡的传递问题

• 点击渐变区域收缩并把内部scrollView滚回顶部

• 什么时机该阻拦事件还是父view解决

• 状态的升级和回调

以上问题也不是一蹴而就就能罗列清楚，这都是每处理一个问题我就萌新另一种想法逐步完善而得到的结果。就比方在实现这个效果之前，我就想应该和 ViewDragHelper 有关，那么拖拽都有哪些需要重写的方法以及我自己需要实现哪些？关于重写 tryCaptureView、getViewVerticalDragRange、clampViewPositionVertical 必需的就不多说了，下面两方法在本项目中解决的逻辑简单说一下

• onViewPositionChanged：当拖拽view的位置发生改变时触发

• onViewReleased：简单可以了解为不再拖拽时触发，但还有其状态和方法会影响它触发的时机，我们没涉及到就不研究

回到开始我们想要的拖拽效果，超过多少就回弹、开展、收缩，在这里我们通过第一个方法可以知道，目前拖拽的view究竟是开展还是收缩，我用了一个局部的boolean来记录状态，毕竟此方法执行频繁减少消耗。再在释放时根据 slideUp 来判断，至于 onPanelDragged() 方法就用来跟新拖拽状态和升级视觉差。

@Override public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) { slideUp = dy > 0;//正为收缩，负为开展 onPanelDragged(top); } @Override public void onViewReleased(View releasedChild, float xvel, float yvel) { int target; if (!slideUp) { if (mSlideOffset >= mAnchorPoint / 6) { target = computePanelToPosition(mAnchorPoint); } else { target = computePanelToPosition(0f); } }else { if (mSlideOffset >= mAnchorPoint / 3) { target = computePanelToPosition(0f); } else { target = computePanelToPosition(mAnchorPoint); } } if (mDragHelper != null) { mDragHelper.settleCapturedViewAt(releasedChild.getLeft(), target); } }

/** * 拖拽状态升级以及位置的升级 * */ private void onPanelDragged(int newTop) { setPanelStateInternal(PanelState.DRAGGING); //重新计算距离顶部偏移 mSlideOffset = computeSlideOffset(newTop); //升级视觉差效果和分发事件 applyParallaxForCurrentSlideOffset(); //假如偏移是向上，覆盖则无效，需要添加main的高度 LayoutParams lp = mMainView.getLayoutParams(); int defaultHeight = getHeight() - getPaddingBottom() - getPaddingTop() - mPanelHeight; if (mSlideOffset <= 0 && !mOverlayFlag) { lp.height = (newTop - getPaddingBottom()); if (lp.height == defaultHeight) { lp.height = LayoutParams.MATCH_PARENT; } } else if (lp.height != LayoutParams.MATCH_PARENT && !mOverlayFlag) { lp.height = LayoutParams.MATCH_PARENT; } mMainView.requestLayout(); }

紧接着，我们点击开展后渐变层，收缩并将内嵌 scrollView 滚回顶部，点击一定就在 onTouchEvent 或者者 dispatchTouchEvent 里实现，但有没有区别呢?首先明确一点的时，不论方法写在哪个回调里面都可以实现我们需求，但在此我写在了后者里面，由于在 viewGroup 里面的点击事件传递，dispatchTouchEvent（分发） 会经过讯问 onInterceptTouchEvent（阻拦） 能否阻拦再到 onTouchEvent（响应），这也算是优化的一点吧。

所有很自然而然地，我在分发里面解决了事件过渡的逻辑，其实说白了就在 MotionEvent.ACTION_MOVE 里决定了究竟谁来消化这个事件。

case MotionEvent.ACTION_MOVE:{ float dx = x - mPrevMotionX; float dy = y - mPrevMotionY; mPrevMotiOnX= x; mPrevMotiOnY= y; //横向滑动就不分发了 if (Math.abs(dx) > Math.abs(dy)) { return true; } //滑动向上、向下 if (dy > 0) { //收缩 if (mScrollableViewHelper.getScrollableViewScrollPosition(mScrollView, true) > 0) { isMyHandleTouch = true; return super.dispatchTouchEvent(ev); } //之前子view解决了事件 //我们就需要重新组合一下让面板得到一个正当的点击事件 if (isMyHandleTouch) { MotionEvent up = MotionEvent.obtain(ev); up.setAction(MotionEvent.ACTION_CANCEL); super.dispatchTouchEvent(up); up.recycle(); ev.setAction(MotionEvent.ACTION_DOWN); } isMyHandleTouch = false; return this.onTouchEvent(ev); } else { //开展 //scrollY=0表示没滑动过，canScroll(1)表示可scroll up //逻辑或者的意义：拖拽到顶后，要不要禁用外部拖拽 if (isOnTopFlag== 1) { int offset = mDragView.getScrollY(); boolean scroll = mScrollableViewHelper.getScrollableViewScrollPosition(mScrollView, true) > 0; setEnabled(offset == 0 || scroll); mDragHelper.abort(); return super.dispatchTouchEvent(ev); } //面板能否一律开展 if (mSlideOffset

• 这里消化了横向滑动事件，由于内部 scrollView 可以通过横向滑动优先获取控制权，不信你注释那句代码，在一开始就先右滑不放再上滑，就会出现所谓的 bug

• getScrollableViewScrollPosition 方法是一个辅助类，用来判断view在竖直方向还有没有可滑动的距离

• 关键的 return，是要继续解决还是给 dragHelper 解决

• 收缩和开展其核心都围绕 event 该给谁解决，逻辑条件有点绕
（也由于在这里的解决逻辑，有很多操作的情况没完全覆盖，导致不可预知的滑动出现bug，如有发现请给我反馈，我去优化）

解决到这里，需求基本达到了。可以给设计师秀一波，把手机递给她而后静静地听她怼iOS了，“为什么 Android 都能做得到，你 iOS 却做不出来，你看人家多厉害”。

再优化一个小问题，状态的回调，为了避免装逼失败等下要求开展或者者收缩时又要做些什么效果，有点危机意识。我纵观了少量全局，实在没有合适的方法可做回调，实在没有方法在任何操作都触发啊。最后我打起渐变层的主意，这个实现可把我乐了一下，太聪明了哈哈哈哈哈而且状态都能正确回调。你要知道渐变层绘制可是需要不停的触发的，回调只能一次。

@Overrideprotected boolean drawChild(Canvas canvas, View child, long drawingTime) { ...(省略少量代码) //没有合适的回调方法，只能另辟蹊径了 //在这里判断dragView有没有到顶，而后把事件给内嵌view final int targetY = computePanelToPosition(mAnchorPoint); final int originalY = computePanelToPosition(0f); if (mDragView.getTop() == targetY) { //避免屡次回调 if (isOnTopFlag != 1 && stateCallback != null) { stateCallback.onExpandedState(); } isOnTopFlag= 1; }else if (mDragView.getTop() == originalY){ if (isOnTopFlag== -1 && stateCallback != null) { stateCallback.onCollapsedState(); } isOnTopFlag= 0; }else { isOnTopFlag= -1; }...(省略少量代码)}

项目地址如下所示：

BmobSnail/SlideNestedPanelLayout

【附】相关架构及资料

image

资料领取

关注+点赞+加群：185873940 免费获取！

点击链接加入群聊【Android IOC架构设计】：https://jq.qq.com/?_wv=1027&k=5tIZkaU

领取获取往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术