ParallaxViewPager：ViewPager的视差背景效果

编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！

所谓的视差效果在Web设计和移动应用中都非常常见，我们在一些主要的平台都可以发现它的身影，从Windows Phone到iOS乃至Android。按照维基百科的说法，视差滚动是计算机图形学中的一种特殊的滚动技术，在此相机移动背景图像比前景图像慢，从而引起了视觉深度的假象。作为一个受欢迎的但是没有被过度使用的效果，视差效果可以和ViewPager很好地搭配使用，并且能够带来令人惊奇的用户体验。Android SDK没有提供内置的方式来实现视差效果，因此我自己实现了这个效果。

网络上已经有许多种实现视差效果的方案，但是没有一个可以完美地满足我的需求。GitHub用户ChrisJenx实现的Paralloid library算是一个很好的方案，可惜它不能和ViewPager一起用。大多数解决方案是基于定制化的PagerTransformer，然而我尝试了一个与众不同的方法，这个方法是通过扩展ViewPager以及定制化onDraw逻辑来实现的。

使用ParallaxViewPager

---

设置只需很少的额外工作，使用ParallaxViewPager就像使用标准的ViewPager一样，适配器也一样。当然，没有什么东西是万能的 – 开发者必须提供适合当前需求的背景（例如，适配器中项目数量以及ViewPager的尺寸）。

首先，在你的工程中包含Gradle的依赖：

dependencies {
        compile 'com.andraskindler.parallaxviewpager:parallaxviewpager:0.2.0'
}

在layout xml或者程序中创建了ParallaxViewPager之后，可以使用下面的方法来设置背景，或者也可以xml设置：

1. setBackgroundResource(int resid)
2. setBackground(Drawable background) or setBackgroundDrawable(Drawable background)
3. setBackground(Bitmap bitmap)

这就好了，你现在可以使用ParallaxViewPager的全部功能了。你可以修改背景的滚动效果来优化用户体验。你也可以使用setScaleType(final int scaleType)方法来配置视图的图像缩放方式。这个方法只能和FIT_HEIGHT搭配使用，从下面的参数中进行选择：

FIT_HEIGHT

表示缩放图像的高度以便适配视图的高度，同时缩放图像的宽度以便保持宽高比。bitmap的不可见部分被划分成相同的区域，每个区域插入到合适的位置。FIT_HEIGHT是默认值。

FIT_WIDTH

表示背景图像的宽度被划分成相同的块，每一块占满整个屏幕的宽度。这个模式不适用于视差效果，因为背景和视图的滚动速度一样。

你也可以使用setOverlapPercentage(final float percentage) 方法来设置重叠的程度。重叠程度值介于0到1之间，这个值越小背景就滚动地越慢，默认值是50%。

示例

---

在Activity的onCreate()方法中创建ParallaxViewPager实例：

//...
final ParallaxViewPager parallaxViewPager = new ParallaxViewPager(this);
parallaxViewPager.setAdapter(new MyPagerAdapter());
parallaxViewPager.setBackgroundResource(R.drawable.background);
setContentView(parallaxViewPager);
//...

在layout xml文件中创建ParallaxViewPager，然后修改重叠百分比以及设置适配器：

activity_main.xml

<com.andraskindler.parallaxviewpager.ParallaxViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/parallaxviewpager"
        android:layout_width="match_parent"
        android:background="@drawable/background"
        android:layout_height="match_parent" />

MainActivity.java

//....
setContentView(R.layout.activity_main);
final ParallaxViewPager parallaxViewPager = ((ParallaxViewPager) findViewById(R.id.parallaxviewpager));
parallaxViewPager
        .setOverlapPercentage(0.25f)
        .setAdapter(new PagerAdapter()
//...

总结