热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要给大家介绍了关于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 里实现,但有没有区别呢&#63;首先明确一点的时,不管方法写在哪个回调里面都可以实现我们需求,但在此我写在了后者里面,因为在 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 却做不出来,你看人家多厉害”。

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

@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 (本地下载)

总结

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


推荐阅读
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 关于我们EMQ是一家全球领先的开源物联网基础设施软件供应商,服务新产业周期的IoT&5G、边缘计算与云计算市场,交付全球领先的开源物联网消息服务器和流处理数据 ... [详细]
  • 本文介绍了P1651题目的描述和要求,以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术,将问题转化为求解差值的问题,并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
author-avatar
书友53099678
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有