Android仿美团拖拽效果实例代码

效果图

如上图，实现了拖拽事件的无缝过渡。效果很流畅很自然，之所以写*因为实在找不到好用的库，该库参考了https://github.com/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 却做不出来，你看人家多厉害”。

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

@override
protected 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;
 }
...(省略一些代码)
}

github:https://github.com/bmobsnail/slidenestedpanellayout （本地下载）

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。