ParallaxViewPager：ViewPager的视差背景效果

Joazqhbc 9年前

来自： http://www.jcodecraeer.com//a/anzhuokaifa/androidkaifa/2014/1113/1972.html


所谓的视差效果在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()  //...

总结

这个课程还远没有达到完成的要求，尚有很多提升空间，所以不要犹豫和有所隐瞒，欢迎各种想法、反馈以及请求。你可以在http://jcodecraeer.com/a/opensource/2014/1113/1973.html找到这个项目。