Android ParallaxViewPager：ViewPager背景视差Parallax移动

た入场券 2024-02-17 16:40 38阅读 0赞

**Android ParallaxViewPager：ViewPager背景视差Parallax移动**

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

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

![Center][]

测试的主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 {
    
    	@Override
    	protected 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()) {
    
    			@Override
    			public Fragment getItem(final int pos) {
    
    				// 测试的Fragment
    				Fragment f = new Fragment() {
    					@Override
    					public 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个页面
    			@Override
    			public int getCount() {
    				return 5;
    			}
    		});
    	}
    }

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

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

本例的背景图片background.jpg：

![Center 1][]

核心的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() {
    			@Override
    			public 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);
    				}
    			}
    
    			@Override
    			public void onPageSelected(int position) {
    				if (secondOnPageChangeListener != null) {
    					secondOnPageChangeListener.onPageSelected(position);
    				}
    			}
    
    			@Override
    			public void onPageScrollStateChanged(int state) {
    				if (secondOnPageChangeListener != null) {
    					secondOnPageChangeListener.onPageScrollStateChanged(state);
    				}
    			}
    		});
    	}
    
    	@Override
    	protected 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
    	 */
    	@Override
    	public void setBackgroundResource(int resid) {
    		bitmap = BitmapFactory.decodeResource(getResources(), resid);
    	}
    
    	/**
    	 * Sets the background from a Drawable.
    	 *
    	 * @param background
    	 */
    	@Override
    	public void setBackground(Drawable background) {
    		bitmap = ((BitmapDrawable) background).getBitmap();
    	}
    
    	/**
    	 * Deprecated. Sets the background from a Drawable.
    	 *
    	 * @param background
    	 */
    	@Override
    	public 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;
    	}
    
    	@Override
    	protected 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][https_github.com_andraskindler_parallaxviewpager]

附录相关文章：

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

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b46557c481ca4fb3a8ebb4bb5c22fc7f.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/6ed29fb4b6ce4b8cb97198bd475b3d0c.png
[https_github.com_andraskindler_parallaxviewpager]: https://github.com/andraskindler/parallaxviewpager
[http_blog.csdn.net_zhangphil_article_details_50347571]: http://blog.csdn.net/zhangphil/article/details/50347571