這交互炸了(二)：愛範兒是如何讓詳情頁縮小爲橫向列表的

本文已受權微信公衆號：鴻洋（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