Android ParallaxViewPager：ViewPager背景视差Parallax移动



Android ParallaxViewPager：ViewPager背景视差Parallax移动

附录的相关文章，实现了一种是当ViewPager左右滑动时候，背景伴随左右滑动，附录的那一篇文章中介绍的BackgroundViewPager从一定意义上讲是把ViewPager的背景图片n等均分，每一个ViewPager页面均分得到1/n宽度的背景图片内容。

而本文要介绍的Android ParallaxViewPager不同于BackgroundViewPager，Android ParallaxViewPager实现一种在Android ViewPager页面左右翻动时候特殊的视察移动的视觉效果，如下面的动态图所示：

测试的主MainActivity.java：

package zhangphil.viewpager;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class MainActivity extends FragmentActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ParallaxViewPager parallaxViewPager = ((ParallaxViewPager) findViewById(R.id.viewpager));parallaxViewPager.setOverlapPercentage(0.75f);parallaxViewPager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {@Overridepublic Fragment getItem(final int pos) {// 测试的FragmentFragment f = new Fragment() {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View v = inflater.inflate(android.R.layout.simple_list_item_1, null);TextView text = (TextView) v.findViewById(android.R.id.text1);text.setText("Zhang Phil " + pos);text.setGravity(Gravity.CENTER);text.setTextColor(Color.RED);text.setTextSize(50f);return v;}};return f;}// 假设有5个页面@Overridepublic int getCount() {return 5;}});}}

把ParallaxViewPager当作一个和Android标准的ViewPager一样使用、写进布局文件。
布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="zhangphil.viewpager.MainActivity" >    <zhangphil.viewpager.ParallaxViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/background" /></RelativeLayout>

注意要衬一张较宽的图片作为ParallaxViewPager的背景，因为通常ViewPager是加载多个页面的，这样左右翻动可以有充足的宽度跟随ViewPager左右滑动。

本例的背景图片background.jpg：

核心的ParallaxViewPager.java：

package zhangphil.viewpager;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.util.Log;@SuppressLint("NewApi")public class ParallaxViewPager extends ViewPager {public static final int FIT_WIDTH = 0;public static final int FIT_HEIGHT = 1;public static final float OVERLAP_FULL = 1f;public static final float OVERLAP_HALF = 0.5f;public static final float OVERLAP_QUARTER = 0.25f;private static final float CORRECTION_PERCENTAGE = 0.01f;public Bitmap bitmap;private Rect source, destination;private int scaleType;private int chunkWidth;private int projectedWidth;private float overlap;private OnPageChangeListener secondOnPageChangeListener;public ParallaxViewPager(Context context) {super(context);init();}public ParallaxViewPager(Context context, AttributeSet attrs) {super(context, attrs);init();}private void init() {source = new Rect();destination = new Rect();scaleType = FIT_HEIGHT;overlap = OVERLAP_HALF;setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {if (bitmap != null) {source.left = (int) Math.floor((position + positionOffset - CORRECTION_PERCENTAGE) * chunkWidth);source.right = (int) Math.ceil((position + positionOffset + CORRECTION_PERCENTAGE) * chunkWidth + projectedWidth);destination.left = (int) Math.floor((position + positionOffset - CORRECTION_PERCENTAGE) * getWidth());destination.right = (int) Math.ceil((position + positionOffset + 1 + CORRECTION_PERCENTAGE) * getWidth());invalidate();}if (secondOnPageChangeListener != null) {secondOnPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);}}@Overridepublic void onPageSelected(int position) {if (secondOnPageChangeListener != null) {secondOnPageChangeListener.onPageSelected(position);}}@Overridepublic void onPageScrollStateChanged(int state) {if (secondOnPageChangeListener != null) {secondOnPageChangeListener.onPageScrollStateChanged(state);}}});}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);destination.top = 0;destination.bottom = h;if (getAdapter() != null && bitmap != null)calculateParallaxParameters();}private void calculateParallaxParameters() {if (bitmap.getWidth() < getWidth() && bitmap.getWidth() < bitmap.getHeight() && scaleType == FIT_HEIGHT) {Log.w(ParallaxViewPager.class.getName(),"Invalid bitmap bounds for the current device, parallax effect will not work.");}final float ratio = (float) getHeight() / bitmap.getHeight();if (ratio != 1) {switch (scaleType) {case FIT_WIDTH:source.top = (int) ((bitmap.getHeight() - bitmap.getHeight() / ratio) / 2);source.bottom = bitmap.getHeight() - source.top;chunkWidth = (int) Math.ceil((float) bitmap.getWidth() / (float) getAdapter().getCount());projectedWidth = chunkWidth;break;case FIT_HEIGHT:default:source.top = 0;source.bottom = bitmap.getHeight();projectedWidth = (int) Math.ceil(getWidth() / ratio);chunkWidth = (int) Math.ceil((bitmap.getWidth() - projectedWidth) / (float) getAdapter().getCount() * overlap);break;}}}/** * Sets the background from a resource file. * * @param resid */@Overridepublic void setBackgroundResource(int resid) {bitmap = BitmapFactory.decodeResource(getResources(), resid);}/** * Sets the background from a Drawable. * * @param background */@Overridepublic void setBackground(Drawable background) {bitmap = ((BitmapDrawable) background).getBitmap();}/** * Deprecated. Sets the background from a Drawable. * * @param background */@Overridepublic void setBackgroundDrawable(Drawable background) {bitmap = ((BitmapDrawable) background).getBitmap();}/** * Sets the background from a bitmap. * * @param bitmap * @return The ParallaxViewPager object itself. */public ParallaxViewPager setBackground(Bitmap bitmap) {this.bitmap = bitmap;return this;}/** * Sets how the view should scale the background. The available choices are: * <ul> * <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> * <li>FIT_WIDTH - the width of the background image is divided into equal * chunks, each taking up the whole width of the screen.</li> * </ul> * * @param scaleType * @return */public ParallaxViewPager setScaleType(final int scaleType) {if (scaleType != FIT_WIDTH && scaleType != FIT_HEIGHT)throw new IllegalArgumentException("Illegal argument: scaleType must be FIT_WIDTH or FIT_HEIGHT");this.scaleType = scaleType;return this;}/** * 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. * * @param percentage * @return The ParallaxViewPager object itself. */public ParallaxViewPager setOverlapPercentage(final float percentage) {if (percentage <= 0 || percentage >= 1)throw new IllegalArgumentException("Illegal argument: percentage must be between 0 and 1");overlap = percentage;return this;}/** * Recalculates the parameters of the parallax effect, useful after changes * in runtime. * * @return The ParallaxViewPager object itself. */public ParallaxViewPager invalidateParallaxParameters() {calculateParallaxParameters();return this;}@Overrideprotected void onDraw(Canvas canvas) {if (bitmap != null)canvas.drawBitmap(bitmap, source, destination, null);}public void addOnPageChangeListener(OnPageChangeListener listener) {secondOnPageChangeListener = listener;}}

代码运行结果如上面的动态图所示。

Android ParallaxViewPager在github上的主页是：https://github.com/andraskindler/parallaxviewpager

附录相关文章：

《Android BackgroundViewPager：类似桌面背景壁纸随手指滑动》链接地址：http://blog.csdn.net/zhangphil/article/details/50347571