受Duolingo启发的ViewPager卡片效果

泡在网上的日子 / 文 发表于2016-08-26 01:57 次阅读 ViewPager

英文原文:https://rubensousa.github.io/2016/08/viewpagercards 

如果你曾经使用过Duolingo,你很可能注意过这个部件:

duolingo_viewpager.gif

看着很酷是吧?我对Duolingo团队是如何做到这个样子的很感兴趣,于是自己搭建了个项目来实现这种效果。

这与普通ViewPager的主要区别在于,你可以同时看到3个item,其中两个只能看到部分。

我做的第一件事就是创建拥有一个CardView的简单布局:

viewpager_adapter.png

当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。

最终效果:

viewpager_result.gif

Github地址: https://github.com/rubensousa/ViewPagerCards/


收藏 赞 (19) 踩 (1)
上一篇:[译] 如何创建高度模块化的 Android 应用
原文链接: https://github.com/xitu/gold-miner/blob/master/TODO/creating-highly-modular-android-apps.md 知道单一原则是啥吗?了解过修饰者模式吗?都不知道的话,那还是赶紧来来看看 EyeEm 是如何利用它们来创建高度模块化的 Android 应用的! —— 由
下一篇:2016年最值得学习的五大开源项目
1,Material Animations 演示View的平移、缩放动画,activity进入和退出动画,界面间元素共享。是学习动画很好的项目,项目代码量比较少,也很适合新手学习。 项目地址 GitHub: https://github.com/lgvalle/Material-Animations 2,Meizhi 每天推送一张妹子