这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的
来源:互联网 发布:php表单验证 编辑:程序博客网 时间:2024/06/08 04:04
本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发
写在前面:
写这段话的时候,已经是夜里3点了。别问我为什么这么拼,一切为了与你分享干货!!!! 不要太感动,擦擦眼泪继续往下看。
本开源库链接 ExpandableViewpager
一直想写《交互炸了》第二篇,但是好像没什么好的交互。就在昨晚11点,小马同学提出 爱范儿 里面的交互挺炸的。我一下,果然很赞。于是连夜写代码,封装成库,再撸文章。只为在周一早7:00能献给爱技术的你。。
《交互炸了》或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开,特效将很简单实现。先来看看今天要实现的效果:
乍一看,哇塞很炫酷。到底怎么实现的,根本没有思路。。 其实很简单,当然为了方便,我已经把他封装成一个库。链接如下:https://github.com/githubwing/ExpandableViewpager
先来看看库如何使用:
在gradle添加依赖,
allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { compile 'com.github.githubwing:ExpandableViewpager:1.0.0' }
其次将ExpandableViewpager添加到布局。
ExpandViewPager提供了Viewpager常用方法以外。还有几个额外的方法:
//设置背景布局 mViewpager.setBackgroundView(int resId);//设置展开关闭监听器mViewpager.setOnStateChangedListener(OnStateChangedListener listener);//展开以及缩小mViewpager.expand();mViewpager.collaps();
只需要在代码中进行这几样设置就可以实现如图效果了! 怎么样! 很方便吧~
如何实现
个人感觉特效跟变魔术差不多。反正都是障眼法,只要摸清了套路,想要实现或者改进也都不是什么难事了。这里把我自己摸索的套路告诉大家。
首先,在交互炸了第一篇,有朋友说共享元素可以实现,并且贴给我了几个项目。我在这里想说一下,共享元素是不可以的。因为共享元素不能全程触摸完成由状态一到状态二的转变。
再说说第二篇里的效果,其实跟第一篇很像,只不过是没了手势处理。那他是怎么实现的呢?嘿嘿,原理特别简单,我都不好意思写了。。 这就好比魔术,没揭穿前高深莫测,揭穿之后就好像智商被侮辱。。 其实只要摸清套路,这些都不难。废话不说了 直接看怎么实现的:
整体界面其实是一个background view + 一个Viewpager。 这个Viewpager 展开就是正常情况。如果变小,其实就是把Viewpager缩放了~~ 只要clipChildren一下,再Scale一下就可以了。。 就是这么简单。。我都不好意思写了。。。 核心的代码如下:
collapsVa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float percent = (Float) valueAnimator.getAnimatedValue(); mViewpager.setScaleX(percent); mViewpager.setScaleY(percent); mViewpager.setY((1 - percent) / 2 * mViewpager.getHeight()); } });
改变一下scale 然后改变一下Y的高度。。没了。。
如果你觉得还不错,请star一下,这是对我的最好鼓励~~
https://github.com/githubwing/ExpandableViewpager
欢迎加入我的Android讨论群:425983695
- 这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的
- 这交互炸了:饿了么是怎么让Image变成详情页的
- Android这交互炸了:饿了么是怎么让Image变成详情页的
- 这交互炸了:饿了么是怎么让Image变成详情页的
- 这交互炸了:饿了么是怎么让Image变成详情页的
- 如何让div横向排列
- 如何让div横向排列
- C#里如何让尺寸太大的图片自动缩小?
- Meteor 从一个列表页进入详情页如何快速显示详情
- Activity 切换动画(小米图库列表进入详情页,图片从固定位置放大进入,缩小退出)
- 仿淘宝上拉进入详情页交互的实现
- 仿淘宝上拉进入详情页交互的实现
- 仿淘宝上拉进入详情页交互的实现
- 如何让交互稿的体验更好
- ul列表项为横向排列
- 详情页返回列表页时保持原来的位置
- CSS 如何让li横向居中显示
- CSS 如何让li横向居中显示
- quick select
- 【47.95%】【codeforces 554C】Kyoya and Colored Balls
- Leetcode 10, 44 Regular Expression Marching, Wildcard Matching
- VPN显示已连接但是网络不能用
- MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误解决办法
- 这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的
- 多个虚拟机启动集群以及订阅发布消息
- 100道动态规划——18 UVA 1336 Fixing the Great Wall 指标函数的分解,刷表法
- Nexus私服使Maven更加强大
- 移植6- uboot之sd/mmc驱动移植
- 完全康复
- #早安,努力#12.12
- 抓包分析-User-agent-switcher
- HttpServletRequest和HttpServletResponse详解