Android仿美团拖拽效果采坑记

  • 时间:2019-03-26 00:44 作者:Android高级架构师 来源:Android高级架构师 阅读:60
  • 扫一扫,手机访问
摘要:image前言效果图.gif如上图,实现了拖拽事件的无缝过渡。效果很流畅很自然,之所以写轮子由于实在找不到好用的库,该库参考了下面的地址:https://github.com/woxingxiao/SlidingUpPanelLayout其实在大神的开源库里就有Issues提到内嵌 scrollVi
image

前言

效果图.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 < mAnchorPoint) {               isMyHandleTouch = false;               return this.onTouchEvent(ev);          }          if (!isMyHandleTouch && mDragHelper.isDragging()) {                mDragHelper.cancel();                ev.setAction(MotionEvent.ACTION_DOWN);          }          isMyHandleTouch = true;          return super.dispatchTouchEvent(ev);     }}
  • 这里消化了横向滑动事件,由于内部 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进阶实践技术

  • 全部评论(0)
最新发布的资讯信息
【网页前端|】从BAT大数据工程师那里总结的大数据学习方法(2019-05-23 11:46)
【系统环境|Linux】值得了解的十大数据发展趋势(2019-05-22 11:33)
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
手机二维码手机访问领取大礼包
返回顶部