受Duolingo启发的ViewPager卡片效果
2016-08-26 01:57 357 0
英文原文：https://rubensousa.github.io/2016/08/viewpagercards
如果你曾经使用过Duolingo，你很可能注意过这个部件：
看着很酷是吧？我对Duolingo团队是如何做到这个样子的很感兴趣，于是自己搭建了个项目来实现这种效果。
这与普通ViewPager的主要区别在于，你可以同时看到3个item，其中两个只能看到部分。
我做的第一件事就是创建拥有一个CardView的简单布局：
当adapter完成之后，在activity里设置好ViewPager：
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_gravity="bottom"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingBottom="30dp"
android:paddingEnd="@dimen/card_padding"
android:paddingLeft="@dimen/card_padding"
android:paddingRight="@dimen/card_padding"
android:paddingStart="@dimen/card_padding" />
</android.support.design.widget.CoordinatorLayout>
这里最重要的就是clipToPadding属性。当它为false时，ViewPager并不会剪掉我们想部分显示的View，而当前的item又能在中间。
通过改变card_padding，你能改变view的宽度。在这个例子中，我使用了60dp来得到类似Duolingo的效果。
当设置完这些之后，我们应该已经有了三个可见的item了，一个剧终，另外两个部分可见。现在我们只需要实现卡片的动画立体效果。
阴影动画
为此，我创建了一个实现了OnPageChangeListener 和 PageTransformer 的ShadowTransformer。当用户滑动到下一张卡片的时候，它应该变高，而前一张卡片则变低。
这是通过CardView的setCardElevation方法，根据scroll offset产生的恰当因素而实现的。在本例中，CardView的基准高度是默认的（2dp），而卡片可以上升到16dp。
最终效果：
