Android这交互炸了:饿了么是怎么让Image变成详情页的
来源:互联网 发布:python unpack修饰符 编辑:程序博客网 时间:2024/05/07 15:04
转自: http://blog.csdn.net/wingichoy/article/details/53501179
欢迎Follow我的GitHub, 关注我的CSDN. 其余参考Android目录.
这交互炸了:饿了么是怎么让Image变成详情页的 --由吧主转载
推荐文章:
如果你喜欢上了一个程序员小伙,献给所有的程序员女友
晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了。
不过还是有槽点。我是无意中才发现可以左右滑动的。这。。。你不告诉我,我怎么知道左右可以滑。
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处理一下手势。。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
将header分为三种状态:
- 上移。则展开为详情页。
- 下移,则恢复为viewpager。
- 再下移,则finish Activity。
在上移的过程中,遇到了一点小挑战,这里分享下:
上移的过程中,图片需要放大。但是在做的过程中,不能使用LayoutParams实现。这里就关系到一些动画的小细节。
动画使用LayoutParams实现是一个禁忌。他会导致不停requestLayout,从而影响UI性能。
所以这里我的一个解法就是,我放大图片,不是真正的改变ImageView大小,而是去Scale图片。即使看起来变大了,他的View真正大小也不会变。
所以,有一句话叫做真亦是假、假亦是真 真真假假,你又何必当真呢?动画效果只要遵循这句话,基本上都是可以实现的。你所看到的效果都是假的。都是障眼法。View变大不是真正的变大。View悬浮不是真正的悬浮(有可能是显隐)。就像变魔术一样。。其实很简单。
接下来又遇到问题了。图片放大了,文字如何对齐? 文字的位置当然也不能真正改变。所以这里使用TranslationX实现。在图片放大的过程中,使用scale的系数,与两个端点值进行一个线性变化计算。主要文字对齐代码如下:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
第二个点。就是在图片放大过程中,底部文字和按钮左右padding不能变。这也是我没有封装成一个拿来就用的View的原因(其实还是水平不够)。因为这些空间需要全部按照上方的方法进行动态计算。。所以也是比较坑爹的。。
ViewPager
拿了网上一个画廊的效果。直接
- 1
- 1
这里注意,需要改变一下view的绘制顺序,保证当前view是最后绘制处于最上层
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
RecyclerView
RecyclerView最开始是完全透明的。并且跟随HeaderView上移而上移,在上移的过程中渐渐显示出来。 需要监听RecyclerView滚动,当RecyclerView滚动到顶部的时候。告知Header,该恢复最初原样了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
Behavior
让header和RecyclerView关联起来的就是Behavior了。Behavior之前写过几篇介绍过了,这里就不再啰嗦。
denpendcy为HeaderView。并且监听RecyclerView的滑动。
具体的细节还是看源码吧~
如果你觉得还不错,欢迎Star
本项目地址
推荐文章
1、Android面试经验大解密
2、Android的viewHolder模式解剖
3、Android中必须学习的七大开源项目(开发项目必看)
4、如何自学Android, 教大家玩爆Android(成为大神必看)
5、2016 Google hosts 持续更新【更新 于:2016-08-27】(免费翻墙必备)
6、Android面试经验总结(面试成功必备)
7、Android Studio 个性化设置(装逼必备)
8、Android Studio 2.2 正式起航(玩爆Android Studio 2.2必备)
Android Studio 2.2 新功能实例代码:
Android Studio 2.2新功能实例源码(玩爆Android Studio 2.2必备)
Android Studio 2.2新功能介绍:
What's new in Android development tools - Google I/O 2016(YouTube视频需要自备梯子)
【GitHub】https://github.com/xiaole0310
【csdn博客】http://blog.csdn.net/xiaole0313
【新浪微博】http://weibo.com/u/5439466748
【知乎】http://www.zhihu.com/people/yang-shou-le
【简书】http://www.jianshu.com/users/1a47e8afa34a
【技术群】279126311 [满]
【技术群】484572225 [未]
【Email】ysle0313@gmail.com
Android Studio 2.2 新功能实例代码:
Android Studio 2.2新功能实例源码(玩爆Android Studio 2.2必备)
如果你有好的文章想和大家分享,欢迎投稿,直接向我投递文章链接即可。
欢迎扫描关注我们的微信公众号(ysle_0313),不要错过每一篇干货~
一键关注我们微信公众号 ysle_0313
- Android这交互炸了:饿了么是怎么让Image变成详情页的
- 这交互炸了:饿了么是怎么让Image变成详情页的
- 这交互炸了:饿了么是怎么让Image变成详情页的
- 这交互炸了:饿了么是怎么让Image变成详情页的
- 这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的
- 飞鸽传书是怎么就变成飞秋了的?
- 这是怎么了
- 这是怎么了?
- 这是怎么了?
- 这是怎么了
- 这是怎么了
- 这是怎么了
- 这是怎么了?
- 这是怎么了
- 这是怎么了
- 我的积分怎么变成0了
- borland 这是怎么了????
- QQ这是怎么了
- 线程与异常
- POJ 1703 Find them, Catch them 笔记
- manacher算法
- pat甲1020. Tree Traversals(已知后序和中序求层次遍历)
- 高仿微信5.2.1主界面及消息提醒
- Android这交互炸了:饿了么是怎么让Image变成详情页的
- vue.js 开发环境搭建最简单攻略
- 【kuangbin带你飞】之搜索 poj3278
- golang中使用package json遇到的问题
- 2016.12.03【初中部 NOIP提高C组】模拟赛题解
- kernel rpm包的制作
- spring mvc传入json返回modelAndView
- 155. Min Stack
- Myeclipse移植其他人的Spring代码