Android自定义垂直方向的ViewPager

由于项目需要，做了一个垂直滑动的ViewPager作为应用的引导页，下面就和大家分享一下具体实现方法，初步测试可以使用，有问题的话欢迎大家吐槽，先看效果图：

废话不多说，下面来看一看代码，由于代码中已经写了很多注释，我就不过多解释了，大概思路就是自定义一个类继承自ViewGroup，然后将视图集合放进去

下面是实现类VerticalViewPager.java

package com.example.verticalviewpager;

import java.util.List;

import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

/**
 * 自定义的可以垂直方向滑动的ViewPager
 * 
 * @author my
 *
 * @version 创建时间：2015年4月1日  上午10:29:24
 */
public class VerticalViewPager extends ViewGroup {
	
	// 用于滑动的类
	private Scroller scroller;
	// 用来跟踪触摸速度的类
	private VelocityTracker velocityTracker;
	// 当前的屏幕视图
	private int curScreen;
	// 默认的显示视图
	private int defaultScreen = 0;
	// 无事件的状态
	private static final int TOUCH_STATE_REST = 0;
	// 处于拖动的状态
	private static final int TOUCH_STATE_SCROLLING = 1;
	// 可以切换页面的最小滑动的速度
	private static final int SNAP_VELOCITY = 500;
	// 所处的状态
	private int touchState = TOUCH_STATE_REST;
	private float lastMotionY;

	private OnVerticalPageChangeListener verticalPageChangeListener;

	public VerticalViewPager(Context context) {
		this(context, null);
	}
	
	public VerticalViewPager(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	/**
	 * 在构造器中进行一些初始化
	 */
	public VerticalViewPager(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		scroller = new Scroller(context);
		curScreen = defaultScreen;
	}
	
	public interface OnVerticalPageChangeListener {
		public void onVerticalPageSelected(int position);
	}
	
	/**
	 * 提供一个页面改变的监听器
	 */
	public void setOnVerticalPageChangeListener(OnVerticalPageChangeListener onVerticalPageChangeListener) {
		this.verticalPageChangeListener = onVerticalPageChangeListener;
	}
	
	/**
	 * 为ViewPager设置页面视图
	 * @param viewList 页面视图集合
	 */
	public void setViewList(List<View> viewList) {
		if (getChildCount() > 0) {
			this.removeAllViews() ;
		}
		curScreen = defaultScreen;
		for (int i = 0; i < viewList.size(); i++) {
			this.addView(viewList.get(i));
		}
		scrollTo(0, 0);
	}

	/**
	 * 重写此方法为子View进行布局
	 */
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		int childheiht = 0;
		for (int i = 0; i < getChildCount(); i++) {
			View childView = getChildAt(i);
			if (childView.getVisibility() != View.GONE) {
				int childWidth = childView.getMeasuredWidth();
				childView.layout(0, childheiht, childWidth,
						childView.getMeasuredHeight() + childheiht);
				childheiht += childView.getMeasuredHeight();
			}
		}
	}
	
	/**
	 * 重写此方法用来计算高度和宽度
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// 其中包含setMeasuredDimension方法，它是一个很关键的函数，它对View的成员变量mMeasuredWidth和mMeasuredHeight变量赋值
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		// 得到多少页(子View)并设置他们的宽和高
		for (int i = 0; i < getChildCount(); i++) {
			getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
		}
	}

	/**
	 * 根据目前的位置滚动到下一个视图位置
	 */
	public void snapToDestination() {
		// 这个高度是View可见部分的高度
		int screenHeight = getHeight();
		// 根据View的高度以及滑动的值来判断是哪个View
		int destScreen = (getScrollY() + screenHeight/2) / screenHeight;
		snapToScreen(destScreen);
	}

	public void snapToScreen(int whichScreen) {
		whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));
		if (getScrollY() != (whichScreen * getHeight())) {

			final int delta = whichScreen * getHeight() - getScrollY();
			scroller.startScroll(0, getScrollY(), 0, delta,
					Math.abs(delta)/4);
			curScreen = whichScreen;
			invalidate(); // 重新布局
			if (verticalPageChangeListener != null)
				verticalPageChangeListener.onVerticalPageSelected(whichScreen);
		}
	}

	public void setToScreen(int whichScreen) {
		whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));
		curScreen = whichScreen;
		scrollTo(0, whichScreen * getHeight());
		if (verticalPageChangeListener != null)
			verticalPageChangeListener.onVerticalPageSelected(whichScreen);
	}

	/**
	 * 获取当前页面
	 * @return 当前页面值
	 */
	public int getCurScreen() {
		return curScreen;
	}

	/**
	 * 获取当前视图
	 * @return 当前视图
	 */
	public View getCurrentView() {
		return getChildAt(getCurScreen());
	}

	/**
	 * 根据位置获取指定页面的视图
	 * @param position 页面位置
	 * @return 指定页面的视图
	 */
	public View getView(int position) {
		return getChildAt(position);
	}

	// 在父容器重绘自己的孩子时，它会调用孩子的computScroll方法
	@Override
	public void computeScroll() {
		// startScroll()函数只是对它的一些成员变量做一些设置，这个设置的唯一效果就是导致scroller.computeScrollOffset()返回true
		if (scroller.computeScrollOffset()) {
			scrollTo(scroller.getCurrX(), scroller.getCurrY());
			postInvalidate();
		}
	}

	@SuppressLint("ClickableViewAccessibility")
	public boolean onTouchEvent(MotionEvent event) {
		if (velocityTracker == null) {
			// 使用obtain方法得到VelocityTracker的一个对象
			velocityTracker = VelocityTracker.obtain();
		}
		// 将当前的触摸事件传递给VelocityTracker对象
		velocityTracker.addMovement(event);
		// 得到触摸事件的类型
		final int action = event.getAction();
		final float y = event.getY();
		switch (action) {
		case MotionEvent.ACTION_DOWN:
			if (!scroller.isFinished()) {
				scroller.abortAnimation();
			}
			lastMotionY = y;
			System.out.println("onTouchEvent--->down");
			break;

		case MotionEvent.ACTION_MOVE:
			int deltay = (int) (lastMotionY - y);
			lastMotionY = y;
			if ((curScreen == getChildCount() - 1 && deltay > 0)
					|| (curScreen == 0 && deltay < 0)) {
				
			}else {
				scrollBy(0, deltay);
			}
			System.out.println("onTouchEvent--->move");
			break;

		case MotionEvent.ACTION_UP:
			final VelocityTracker velocityTracker = this.velocityTracker;
			// 计算当前的速度
			velocityTracker.computeCurrentVelocity(1000);
			// 获得Y轴方向当前的速度
			int velocityY = (int) velocityTracker.getYVelocity();

			if (velocityY > SNAP_VELOCITY && curScreen > 0) {
				snapToScreen(curScreen - 1);
			} else if (velocityY < -SNAP_VELOCITY && curScreen < getChildCount() - 1) {
				snapToScreen(curScreen + 1);
			} else {
				snapToDestination();
			}

			if (this.velocityTracker != null) {
				this.velocityTracker.recycle();
				this.velocityTracker = null;
			}
			touchState = TOUCH_STATE_REST;
			break;
		case MotionEvent.ACTION_CANCEL:
			touchState = TOUCH_STATE_REST;
			break;
		}
		return true;
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		final int action = ev.getAction();

		switch (action) {
		case MotionEvent.ACTION_MOVE:
			break;

		case MotionEvent.ACTION_DOWN:
			touchState = scroller.isFinished() ? TOUCH_STATE_REST
					: TOUCH_STATE_SCROLLING;
			break;

		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			touchState = TOUCH_STATE_REST;
			break;
		}
		return touchState != TOUCH_STATE_REST;
	}
	
}

其实这个并不难，都是一些基础的东西，但是要理解ViewGroup的onMeasure和onLayout方法，这样才能对自定义的这个控件中的子View进行位置排布，关于这方面的知识可以参见：http://blog.csdn.net/flymoon1201/article/details/44806021

还有一个知识点就是Scroller类的用法，详情可以参见：

http://blog.csdn.net/flymoon1201/article/details/44807771

下面就是这个自定义控件的用法了

首先是布局文件activity_main.xml:

<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">

    <com.example.verticalviewpager.VerticalViewPager 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/vertical_viewpager"/>

</RelativeLayout>

之后就是在代码中使用了，文件MainActivity.java：

package com.example.verticalviewpager;

import java.util.ArrayList;
import java.util.List;
import com.example.verticalviewpager.VerticalViewPager.OnVerticalPageChangeListener;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

	private VerticalViewPager verticalViewPager;
	private final int[] imgSource = { R.drawable.bg_android_v7_1,
			R.drawable.bg_android_v7_2, R.drawable.bg_android_v7_3,
			R.drawable.bg_android_v7_4, R.drawable.bg_android_v7_5,
			R.drawable.bg_android_v7_6};
	List<View> viewList = new ArrayList<View>();
	
	@SuppressLint("InflateParams")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		verticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
		
		for (int i = 0; i < imgSource.length; i++) {
			View view = getLayoutInflater().inflate(R.layout.pager, null);
			ImageView img = (ImageView) view.findViewById(R.id.pager);
			img.setImageResource(imgSource[i]);
			viewList.add(view);
		}
		verticalViewPager.setViewList(viewList);
		
		verticalViewPager.setOnVerticalPageChangeListener(new OnVerticalPageChangeListener() {
			
			@Override
			public void onVerticalPageSelected(int position) {
				System.out.println("pager=" + position);
			}
		});
		
	}

}

上面用到了一些图片，还有一个布局文件pager.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:id="@+id/pager"/>
    

</LinearLayout>

好了，到这里就介绍完了，具体demo我放在了这里http://download.csdn.net/detail/flymoon1201/8554741

欢迎大家指正批评哈！