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 (本地下载)
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)
-
Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)
-
React Native仿美团下拉菜单的实例代码
-
Android仿美团拖拽效果实例代码
-
Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)
-
React Native仿美团下拉菜单的实例代码
-
Android开发仿微信发朋友圈浏览图片效果实例代码
-
Android开发仿微信发朋友圈浏览图片效果实例代码
-
Android仿美团拖拽效果实例代码