转载

这交互炸了(二)：爱范儿是如何让详情页缩小为横向列表的

写在前面：

写这篇文章的时候，已经是夜里3点了。别问我为什么这么拼，一切为了与你分享干货!!!! 不要太感动，擦擦眼泪继续往下看。

本开源库链接 https://github.com/githubwing/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

原文 http://androidwing.net/index.php/155

正文到此结束