这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是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()
//...