这交互炸了:饿了么是怎么让Image变成详情页的

晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了。

本文同步自wing的地方酒馆

不过还是有槽点。我是无意中才发现可以左右滑动的。这。。。你不告诉我,我怎么知道左右可以滑。

https://github.com/githubwing/ZoomHeader

直接上图啊:

挺有意思的,对吧? 所以我就想模仿一下。下面是我做出来的效果:

额。。不过图片不是长条的哈。大概意思一样就行了。接下来将和大家分享这个效果是如何实现的。讲思路以及遇到的问题。但是不会讨论细节,具体的细节请看源码。

他是一个Activity还是两个?

相信你肯定有这样的疑问,答案是一个。你看到的中间imageview是viewpager。在Viewpager上面是一个透明的View。当然,这个Activity的背景也是透明的。

实现思路

我使用CoordinatorLayout+Behavior实现的。说实话,Behavior真心强大。。

viewpager+头部

整个实现的思路是这样的。整体布局从上到下依次是:

  • 透明View
  • viewpager
  • RecyclerView

其中透明View和Viewpager 合并成一个自定义的Header。当这个Header上移的时候,图片放大,并且RecyclerView联动上衣,从透明转向并且不透明。

所以首先要定制一个透明的可移动的HeaderView。

在onTouchEvent处理一下手势。。

 @Override public boolean onTouchEvent(MotionEvent ev) {
     switch (ev.getAction()) {
       case MotionEvent.ACTION_DOWN:
         return true;
       case MotionEvent.ACTION_MOVE:
          if(上下移动到阀值){
              展开为详情()
          }else if(上下滑动到阀值,恢复viewpager){
          }else if(下滑,则关闭Activity)

将header分为三种状态:

  • 上移。则展开为详情页。
  • 下移,则恢复为viewpager。
  • 再下移,则finish Activity。

在上移的过程中,遇到了一点小挑战,这里分享下:

上移的过程中,图片需要放大。但是在做的过程中,不能使用LayoutParams实现。这里就关系到一些动画的小细节。

动画使用LayoutParams实现是一个禁忌。他会导致不停requestLayout,从而影响UI性能。

所以这里我的一个解法就是,我放大图片,不是真正的改变ImageView大小,而是去Scale图片。即使看起来变大了,他的View真正大小也不会变。

所以,有一句话叫做真亦是假、假亦是真 真真假假,你又何必当真呢?动画效果只要遵循这句话,基本上都是可以实现的。你所看到的效果都是假的。都是障眼法。View变大不是真正的变大。View悬浮不是真正的悬浮(有可能是显隐)。就像变魔术一样。。其实很简单。

接下来又遇到问题了。图片放大了,文字如何对齐? 文字的位置当然也不能真正改变。所以这里使用TranslationX实现。在图片放大的过程中,使用scale的系数,与两个端点值进行一个线性变化计算。主要文字对齐代码如下:

       bottom.offsetLeftAndRight(
             (int) (target.getWidth() / 2 - target.getWidth() * (1 + progress) / 2
                 + MarginConfig.MARGIN_LEFT_RIGHT - bottom.getX()));

第二个点。就是在图片放大过程中,底部文字和按钮左右padding不能变。这也是我没有封装成一个拿来就用的View的原因(其实还是水平不够)。因为这些空间需要全部按照上方的方法进行动态计算。。所以也是比较坑爹的。。

ViewPager

拿了网上一个画廊的效果。直接

     setPageTransformer(true, new ZoomOutPageTransformer());

这里注意,需要改变一下view的绘制顺序,保证当前view是最后绘制处于最上层

 /改变系统绘制顺序
   @Override protected int getChildDrawingOrder(int childCount, int i) {

     int position = getCurrentItem();
     if(position<0){
       return i;
     }else{
       if(i == childCount - 1){//这是最后一个需要刷新的item
         if(position>i){
           position=i;
         }
         return position;
       }
       if(i == position){//这是原本要在最后一个刷新的item
         return childCount - 1;
       }
     }
     return i;
   }
 }

RecyclerView

RecyclerView最开始是完全透明的。并且跟随HeaderView上移而上移,在上移的过程中渐渐显示出来。 需要监听RecyclerView滚动,当RecyclerView滚动到顶部的时候。告知Header,该恢复最初原样了。

 @Override
   public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target,
       float velocityX, float velocityY, boolean consumed) {

     //向下Fling并且到顶部
     if (velocityY < 0 && ((RecyclerView) target).getChildAt(0).getY() == 0) {
       mDependency.restore(mDependency.getY());
     }
     return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
   }

   @Override
   public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target,
       int dx, int dy, int[] consumed) {

     //如果在顶部
     if (((RecyclerView) target).getChildAt(0).getY() == 0) {
       //向下滑动
       if (dy < 0) {
         mDependency.setY(mDependency.getY() - dy);
         //小于阀值
         if (mDependency.getY() < 500) {
           mDependency.restore(mDependency.getY());
         }
       }
     }
     super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
   }
 }

Behavior

让header和RecyclerView关联起来的就是Behavior了。Behavior之前写过几篇介绍过了,这里就不再啰嗦。

denpendcy为HeaderView。并且监听RecyclerView的滑动。

具体的细节还是看源码吧~
本项目地址

这交互炸了:饿了么是怎么让Image变成详情页的的更多相关文章

  1. 这交互炸了(四) :一分钟让你拥有微信拖拽透明返回PhotoView

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发 <交互炸了>或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效,以及实现的思路.特效实现本身也许不会有太大的难度 ...

  2. 仿饿了么增加购物车旋转控件 - 自带闪转腾挪动画 的button

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54235736 本文出 ...

  3. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  4. Scrapy 初体验

    开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...

  5. UI交互设计教程分享:提高界面交互体验的“葵花宝典”

    ​本次分享的是在界面设计中最长实用也最容易被忽略的十个原则,就是尼尔森十大可用性设计原则,这是十分基础且重要的原则.原则是死的,如何正确的结合到实际运用中才是关键.接下来我会通过对每一个原则的理解和现 ...

  6. APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点)

    APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点) 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近涉足APP端测试,常见检查点总结如下:   一.业务方面: 1.  注册( ...

  7. ios App与网页交互

    随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值. ...

  8. Fragments之间的交互(实现参数传递)

    Fragments之间的交互(实现参数传递) 日常开发中,通常Fragments之间可能需要交互,比如基于用户事件改变Fragment的内容.所有Fragment之间的交互需要通过他们关联的Activ ...

  9. WebAPP与原生APP的交互设计区别

    WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5 )的移植,故总结一下期间遇到的问题及不同点总结. 从使用场景上,WebAPP用户 ...

随机推荐

  1. CASS 2008的野外操作码

    表D-1  线面状地物符号代码表 坎类(曲):   K(U) + 数(0-陡坎,1-加固陡坎,2-斜坡,3-加固斜坡,4-垄,5-陡崖,6-干沟) 线类(曲):   X(Q) + 数(0-实线,1-内 ...

  2. stl(set+stack) LA 3634 The SetStack Computer

    题目传送门 题意:给一些对集合的操作,询问每一次操作后栈顶的集合元素个数 分析:首先{}是空的,每一次add时候,{} -> { {} }变成了有一个元素的集合,利用set和stack,map容 ...

  3. bzoj1443

    首先要思考的问题肯定是,什么点可以是ans, 不难想到对图黑白染色,假如一个棋子不管怎么走,都只能走到和它同色的点上时,这就是一个ans 再考虑,每次棋子的移动都是黑白相间的 再考虑,黑白染色是可以构 ...

  4. CentOS安装+配置+远程

    这篇博客我之前写在了csdn,转了过来,这篇是自己认为写的比较有技术含量的文章^_^ 最近和CentOS打了交到,其中遇到了很多问题,于是看了一些博客,解决了一些问题,但是都不是特别全面,所以想来一篇 ...

  5. 从零开始学习jQuery

    转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...

  6. Mybatis设置自增主键

    useGeneratedKeys="true" keyProperty="id" 方法1: <insert id="insert" p ...

  7. Oracle组函数、多表查询、集合运算、数据库对象(序列、视图、约束、索引、同义词)等

    count组函数:(过滤掉空的字段) select count(address),count(*) from b_user max() avg() min(),sum() select sum(age ...

  8. #ifndef 和 #endif

    文件中的#ifndef 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都include了同一个头文件.而编译时,这两个C文件要一同编译成一个可运行文件,于是问题来了, ...

  9. 关于TCP连接状态的解释

    TCP各个状态主要存在于三次握手和四次挥手的过程 1.TCP建立连接时的三次握手: 服务端应用监听端口处于LISTEN状态,等待建立连接. 第一次握手:客户端发送SYN=一个随机数,然后进入SYN_S ...

  10. 将web应用部署到Tomcat的三种方式

    Tomcat作为Servlet/JSP容器(服务器)挺不错的,开源免费,需要知道的是Tomcat是一个Web服务器,其符合Servlet/JSP规范,但是却没有实现所有JavaEE规范,所以我们还是应 ...