ParallaxViewPager：ViewPager的视差背景效果

源码：

Java代码  

1. import android.annotation.SuppressLint;  
2. import android.content.Context;  
3. import android.graphics.Bitmap;  
4. import android.graphics.BitmapFactory;  
5. import android.graphics.Canvas;  
6. import android.graphics.Rect;  
7. import android.graphics.drawable.BitmapDrawable;  
8. import android.graphics.drawable.Drawable;  
9. import android.support.v4.view.ViewPager;  
10. import android.util.AttributeSet;  
11. import android.util.Log;  
12.   
13. @SuppressLint("NewApi")  
14. public class ParallaxViewPager extends ViewPager {  
15.   
16.     public static final int FIT_WIDTH = 0;  
17.     public static final int FIT_HEIGHT = 1;  
18.     public static final float OVERLAP_FULL = 1f;  
19.     public static final float OVERLAP_HALF = 0.5f;  
20.     public static final float OVERLAP_QUARTER = 0.25f;  
21.     private static final float CORRECTION_PERCENTAGE = 0.01f;  
22.     public Bitmap bitmap;  
23.     private Rect source, destination;  
24.     private int scaleType;  
25.     private int chunkWidth;  
26.     private int projectedWidth;  
27.     private float overlap;  
28.     private OnPageChangeListener secondOnPageChangeListener;  
29.   
30.     public ParallaxViewPager(Context context) {  
31.         super(context);  
32.         init();  
33.     }  
34.   
35.     public ParallaxViewPager(Context context, AttributeSet attrs) {  
36.         super(context, attrs);  
37.         init();  
38.     }  
39.   
40.     private void init() {  
41.         source = new Rect();  
42.         destination = new Rect();  
43.         scaleType = FIT_HEIGHT;  
44.         overlap = OVERLAP_HALF;  
45.   
46.         setOnPageChangeListener(new OnPageChangeListener() {  
47.             @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
48.                 if (bitmap != null) {  
49.                     source.left = (int) Math.floor((position + positionOffset - CORRECTION_PERCENTAGE) * chunkWidth);  
50.                     source.right = (int) Math.ceil((position + positionOffset + CORRECTION_PERCENTAGE) * chunkWidth + projectedWidth);  
51.                     destination.left = (int) Math.floor((position + positionOffset - CORRECTION_PERCENTAGE) * getWidth());  
52.                     destination.right = (int) Math.ceil((position + positionOffset + 1 + CORRECTION_PERCENTAGE) * getWidth());  
53.                     invalidate();  
54.                 }  
55.   
56.                 if (secondOnPageChangeListener != null) {  
57.                     secondOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);  
58.                 }  
59.             }  
60.   
61.             @Override public void onPageSelected(int position) {  
62.                 if (secondOnPageChangeListener != null) {  
63.                     secondOnPageChangeListener.onPageSelected(position);  
64.                 }  
65.             }  
66.   
67.             @Override public void onPageScrollStateChanged(int state) {  
68.                 if (secondOnPageChangeListener != null) {  
69.                     secondOnPageChangeListener.onPageScrollStateChanged(state);  
70.                 }  
71.             }  
72.         });  
73.     }  
74.   
75.     @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
76.         super.onSizeChanged(w, h, oldw, oldh);  
77.         destination.top = 0;  
78.         destination.bottom = h;  
79.         if (getAdapter() != null && bitmap != null)  
80.             calculateParallaxParameters();  
81.     }  
82.   
83.     private void calculateParallaxParameters() {  
84.         if (bitmap.getWidth() < getWidth() && bitmap.getWidth() < bitmap.getHeight() && scaleType == FIT_HEIGHT) {  
85.             Log.w(ParallaxViewPager.class.getName(), "Invalid bitmap bounds for the current device, parallax effect will not work.");  
86.         }  
87.   
88.         final float ratio = (float) getHeight() / bitmap.getHeight();  
89.         if (ratio != 1) {  
90.             switch (scaleType) {  
91.                 case FIT_WIDTH:  
92.                     source.top = (int) ((bitmap.getHeight() - bitmap.getHeight() / ratio) / 2);  
93.                     source.bottom = bitmap.getHeight() - source.top;  
94.                     chunkWidth = (int) Math.ceil((float) bitmap.getWidth() / (float) getAdapter().getCount());  
95.                     projectedWidth = chunkWidth;  
96.                     break;  
97.                 case FIT_HEIGHT:  
98.                 default:  
99.                     source.top = 0;  
100.                     source.bottom = bitmap.getHeight();  
101.                     projectedWidth = (int) Math.ceil(getWidth() / ratio);  
102.                     chunkWidth = (int) Math.ceil((bitmap.getWidth() - projectedWidth) / (float) getAdapter().getCount() * overlap);  
103.                     break;  
104.             }  
105.         }  
106.     }  
107.   
108.     /** 
109.      * Sets the background from a resource file. 
110.      * 
111.      * @param resid 
112.      */  
113.     @Override public void setBackgroundResource(int resid) {  
114.         bitmap = BitmapFactory.decodeResource(getResources(), resid);  
115.     }  
116.   
117.     /** 
118.      * Sets the background from a Drawable. 
119.      * 
120.      * @param background 
121.      */  
122.     @Override public void setBackground(Drawable background) {  
123.         bitmap = ((BitmapDrawable) background).getBitmap();  
124.     }  
125.   
126.     /** 
127.      * Deprecated. 
128.      * Sets the background from a Drawable. 
129.      * 
130.      * @param background 
131.      */  
132.     @Override public void setBackgroundDrawable(Drawable background) {  
133.         bitmap = ((BitmapDrawable) background).getBitmap();  
134.     }  
135.   
136.     /** 
137.      * Sets the background from a bitmap. 
138.      * 
139.      * @param bitmap 
140.      * @return The ParallaxViewPager object itself. 
141.      */  
142.     public ParallaxViewPager setBackground(Bitmap bitmap) {  
143.         this.bitmap = bitmap;  
144.         return this;  
145.     }  
146.   
147.     /** 
148.      * Sets how the view should scale the background. The available choices are: 
149.      * <ul> 
150.      * <li>FIT_HEIGHT - the height of the image is resized to matched the height of the View, also stretching the width to keep the aspect ratio. The non-visible part of the bitmap is divided into equal parts, each of them sliding in at the proper position.</li> 
151.      * <li>FIT_WIDTH - the width of the background image is divided into equal chunks, each taking up the whole width of the screen.</li> 
152.      * </ul> 
153.      * 
154.      * @param scaleType 
155.      * @return 
156.      */  
157.     public ParallaxViewPager setScaleType(final int scaleType) {  
158.         if (scaleType != FIT_WIDTH && scaleType != FIT_HEIGHT)  
159.             throw new IllegalArgumentException("Illegal argument: scaleType must be FIT_WIDTH or FIT_HEIGHT");  
160.         this.scaleType = scaleType;  
161.         return this;  
162.     }  
163.   
164.     /** 
165.      * Sets the amount of overlapping with the setOverlapPercentage(final float percentage) method. This is a number between 0 and 1, the smaller it is, the slower is the background scrolling. 
166.      * 
167.      * @param percentage 
168.      * @return The ParallaxViewPager object itself. 
169.      */  
170.     public ParallaxViewPager setOverlapPercentage(final float percentage) {  
171.         if (percentage <= 0 || percentage >= 1)  
172.             throw new IllegalArgumentException("Illegal argument: percentage must be between 0 and 1");  
173.         overlap = percentage;  
174.         return this;  
175.     }  
176.   
177.     /** 
178.      * Recalculates the parameters of the parallax effect, useful after changes in runtime. 
179.      * 
180.      * @return The ParallaxViewPager object itself. 
181.      */  
182.     public ParallaxViewPager invalidateParallaxParameters() {  
183.         calculateParallaxParameters();  
184.         return this;  
185.     }  
186.   
187.     @Override protected void onDraw(Canvas canvas) {  
188.         if (bitmap != null)  
189.             canvas.drawBitmap(bitmap, source, destination, null);  
190.     }  
191.   
192.     public void addOnPageChangeListener(OnPageChangeListener listener) {  
193.         secondOnPageChangeListener = listener;  
194.     }  
195. }  

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

Java代码  

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

Java代码  

1. setContentView(R.layout.activity_main);  
2. final ParallaxViewPager parallaxViewPager = ((ParallaxViewPager) findViewById(R.id.parallaxviewpager));  
3. parallaxViewPager  
4.         .setOverlapPercentage(0.25f)  
5.         .setAdapter(new PagerAdapter()  
6. //...  

Xml代码  

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

https://github.com/andraskindler/parallaxviewpager

滑动Viewpager时背景颜色动态过渡变化效果
http://www.itlanbao.com/code/20150816/10000/100462.html

• 查看图片附件