这交互炸了:饿了么是怎么让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变成详情页的的更多相关文章
- 这交互炸了(四) :一分钟让你拥有微信拖拽透明返回PhotoView
本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发 <交互炸了>或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效,以及实现的思路.特效实现本身也许不会有太大的难度 ...
- 仿饿了么增加购物车旋转控件 - 自带闪转腾挪动画 的button
本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54235736 本文出 ...
- 掘金 Android 文章精选合集
掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...
- Scrapy 初体验
开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...
- Cube 技术解读 | Cube 小程序技术详解
本文为<Cube 技术解读>系列第三篇文章,之前上线的<支付宝新一代动态化技术架构与选型综述>与<Cube卡片技术栈解读>欢迎大家回顾. 魔方卡片(Cube)已在「 ...
- UI交互设计教程分享:提高界面交互体验的“葵花宝典”
本次分享的是在界面设计中最长实用也最容易被忽略的十个原则,就是尼尔森十大可用性设计原则,这是十分基础且重要的原则.原则是死的,如何正确的结合到实际运用中才是关键.接下来我会通过对每一个原则的理解和现 ...
- APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点)
APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点) 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近涉足APP端测试,常见检查点总结如下: 一.业务方面: 1. 注册( ...
- ios App与网页交互
随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值. ...
- Fragments之间的交互(实现参数传递)
Fragments之间的交互(实现参数传递) 日常开发中,通常Fragments之间可能需要交互,比如基于用户事件改变Fragment的内容.所有Fragment之间的交互需要通过他们关联的Activ ...
随机推荐
- 跟我从零基础学习Unity3D开发--资源打包篇(AssetBundle)
好久没更新了,一直在加班敢项目进度.这里和关注我的博客的童鞋表示一下歉意!这里有我录的Unity3D从零开始的视频教程大家可以关注一下:http://www.imooc.com/view/555 视 ...
- Android ORM 框架之 greenDAO 使用心得
前言 我相信,在平时的开发过程中,大家一定会或多或少地接触到 SQLite.然而在使用它时,我们往往需要做许多额外的工作,像编写 SQL 语句与解析查询结果等.所以,适用于 Android 的ORM ...
- 个人作业——关于K米的产品案例分析
Notice:本文所采用的K米版本为 Version:4.3.0 Release:20161014 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测试 1.下载并使用,描述最简单直观的个人 ...
- C# 在类中反射
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Wind ...
- 在php中验证复选框
PHP接收多个同名复选框信息不像ASP那样自动转换成为数组,这给使用带来了一定不便.但是还是有解决办法的,就是利用javascript做一下预处理.多个同名复选框在javascript中还是以数组的形 ...
- c#使用正则表达式抓取a标签的链接和innerhtml
//读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...
- 使用腾讯开发平台获取QQ用户数据资料
<今天是七夕:祝大家七夕嗨皮,前可么么哒,后可啪啪啪> Tips:本篇博客将教你如何使用腾讯开发平台获取QQ用户资料 ----------------------------------- ...
- Introduction to Neural Machine Translation - part 1
The Noise Channel Model \(p(e)\): the language Model \(p(f|e)\): the translation model where, \(e\): ...
- Linux 下EXT2文件系统 —— 如何将蚂蚁和大象优雅的装进冰箱里
这一阵子真是偷懒,无时无刻不和自己身体中的懒癌做斗争.最终我还是被打败了,星期天两天几乎都是荒废过去的,在空闲的时候实际上我内心也是有点焦虑的,不知道去怎么度过这时间.学习吧又不想学习,看电视娱乐吧也 ...
- 通过grep来进行日志分析,grep -C和配合awk实际对catalina.out使用案例
本文介绍通过grep来进行日志分析,主要介绍grep -C和配合awk实际对catalina.out使用案例 grep可以对日志文件进行筛选,统计,查询,快速定位bug. 首先,你的日志需要比较规范, ...