相信看了我上一片文章或者对ViewPager有所了解的同学都知道,ViewPager显示页面切换除了要设置适配器之外,还要实现OnPageChangeListener接口

如果不做改变则是默认系统配置,在这里面,我们可以制作属于自己的页面切换动画效果

    我这里给大家演示的是深入浅出的效果

    首先,我们先来了解一下OnPageChangeListener接口的三个函数

@Override
	public void onPageScrollStateChanged(int position) {
		// TODO Auto-generated method stub
		
	}    //状态改变时调用,0表示什么都没有改变,1表示正在改变,2表示改变结束

	@Override
	public void onPageScrolled(int position, float offsetPercent, int offsetPixels) {
		// TODO Auto-generated method stub
		
	}    //无论向右还是向左滑动position都是是指左边页面,如果没有该页面则指自身
             //offsetPosition指页面偏移的百分比,向左滑动数值增加,从0增加到1,向右滑动数值减少,从1减少到0
             //offsetPixels指页面偏移的像素值,和offsetPosition差不多,只不过是像素值表示

        @Override
	public void onPageSelected(int position) {
		// TODO Auto-generated method stub
		
	}
        //该函数在页面切换完成时调用

    我这里使用的是三个页面做切换,直接上代码:

@SuppressLint("NewApi")
	public class PageChange implements OnPageChangeListener{
		
		ArrayList<View> pageView = null;    //传进来的ViewPager的列表
		ViewPager view = null;           //ViewPager
		
		int downX = 0;          
		int offset = 0;    //X轴偏移
		
		//再构造函数里调用setOnTouchListener,取得X轴上的偏移,判断页面切换的方向
		public PageChange(ArrayList<View> pageView, ViewPager view) {
			super();
			this.pageView = pageView;
			this.view = view;
			
			view.setOnTouchListener(new OnTouchListener() {
				
				@Override
				public boolean onTouch(View v, MotionEvent event) {
					
					switch (event.getAction()) {
					case MotionEvent.ACTION_DOWN:
						downX = (int) event.getX();
						break;
					case MotionEvent.ACTION_MOVE:
						offset = (int) (event.getX() - downX);
						break;
					case MotionEvent.ACTION_UP:
						downX = 0;
						offset = 0;
						break;
					default:
						break;
					}
					return false;
				}
			});
		}
		
		//页面切换状态的alpha值
		@Override
		public void onPageScrollStateChanged(int position) {
			if (position == ViewPager.SCROLL_STATE_IDLE || position == ViewPager.SCROLL_STATE_SETTLING) {
				pageView.get(position).setAlpha(1);
			}
		}
		
		@Override
		public void onPageScrolled(int position, float offsetPercent, int offsetPixels) {
			//最左边的页面
			if (position == 0) {
				//左边数起第二个页面
				if (offset > 0) {
					if (offsetPercent > 0) {
						pageView.get(position).setAlpha(offsetPercent);
						pageView.get(position).setAlpha(1 - offsetPercent);
					}else{
						pageView.get(position).setAlpha(1);
					}
				}else {	
					pageView.get(position).setAlpha(1 - offsetPercent);
					pageView.get(position + 1).setAlpha(offsetPercent);
				}
			//最右边的页面
			}else if(position == pageView.size() - 1){
				if (offset > 0) {
					pageView.get(position).setAlpha(1 - offsetPercent);
					pageView.get(position + 1).setAlpha(offsetPercent);
				}else {
					pageView.get(position).setAlpha(1);
				}
			//中间页面
			}else{
				if (offset > 0) {
					pageView.get(position).setAlpha(1 - offsetPercent);
					pageView.get(position + 1).setAlpha(offsetPercent);
					Toast.makeText(DialogTestActivity.this, "offset:" + offset, Toast.LENGTH_SHORT).show();
				}else {
					if (offset == 0) {
						pageView.get(position).setAlpha(1);
					}else{
						pageView.get(position).setAlpha(1 - offsetPercent);
						pageView.get(position + 1).setAlpha(offsetPercent);
					}
				}
			}
			
		}

		//切换完成后设置的alpha值
		@Override
		public void onPageSelected(int position) {
			pageView.get(position).setAlpha(1);
			for (int i = 0; i < pageView.size(); i++) {
				pageView.get(position).setAlpha(1);
			}
			
		}
		
	}



    同学们是不是觉得上面实现切换的动画太复杂了,没关系,Google还提供了我们一个简便的方法PageTransformer来实现切换的动画

   这里先介绍PageTransformer的相关参数

   transformPage(View view, float position)

    view指的是滑动的那个view,position表示的是当前滑动的一个状态

    如果有5个切换页面

    A B C D E

    当前页面是B,没有滑动的状态B为0,C为1   A[-Infinity,-1)  D[1, Infinity)

    向左滑动时B的值变化0->-1,C的值变化1->0

    向右滑动时B的值变化0->1,A的值变化-1->0 

   下面用PageTransformer来实现上面同一种效果

viewPager.setPageTransformer(true, new PageTransformer() {
			
			@SuppressLint("NewApi")
			@Override
			public void transformPage(View viewPager, float position) {
				if (position < -1) {        // [-Infinity,-1)
					viewPager.setAlpha(1);  // This page is way off-screen to the left
					                       //屏幕左边页面
				}else if (position <= 0) {         // [-1,0]
					viewPager.setAlpha(1 - Math.abs(position));   // Use the default slide transition when
					                             // moving to the left page
					               //正在滑动时的左边页面
				}else if (position <= 1) {    // (0,1]
					viewPager.setAlpha(1 - position);  // Fade the page out.
					              //正在滑动时的右边页面
				}else {           // (1,+Infinity]
					              // This page is way off-screen to the right.
					viewPager.setAlpha(1);   //屏幕右边页面
				}
			}
		});

    是不是感觉简单了多了呢...同学么可以自己去定义自己的动画效果了