ViewPager之引导界面---实现欢迎引导页面

最近在看ViewPager，于是乎弄个引导界面来玩玩.....

引导界面，采用现在比较主流的方式：左右滑动加载；小圆点提示；在最后一个页面，点击button，进入功能界面

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup +   GestureDetector

第三种： ViewPager  (Android3.0+)

第四种： ViewFlow (开源项目)

这里弄的是第三种，

一、先看的效果图

二、编码前准备

       ViewPager是Android3.0之后提供的新特性，所以要想让你的应用向下兼容就必须要android-support-v4.jar这个包的支持，这是一个来自google提供的一个附加包。

项目结构图:

1、  布局界面,加入ViewPager组件，以及底部的引导小点，guide_layout.xml:

guide_page1.xml  注guide_page2.xml，guide_page3.xml布局一样

guide_page4.xml

point.xml：控制小点的图片，用一个selector来控制颜色

三、主程序入口类， MainActivity.java：

public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {
	//定义ViewPager对象
	private ViewPager viewPager;
	
	//定义ViewPager适配器
	private ViewPagerAdapter vpAdapter;
	
	//定义一个ArrayList来存放View
	private ArrayList views;

	// 定义各个界面View对象
	private View view1, view2, view3, view4;
	 	
	//底部小点的图片
    private ImageView[] points;
    
    //记录当前选中位置
    private int currentIndex;
    
  
    
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
	    setContentView(R.layout.guide_layout);
		
		initView();
		initData();	
	}

	/**
	 * 初始化组件
	 */
	private void initView() {
		//实例化各个界面的布局对象 
		LayoutInflater mLi = LayoutInflater.from(this);
		view1 = mLi.inflate(R.layout.guide_page1, null);
		view2 = mLi.inflate(R.layout.guide_page2, null);
		view3 = mLi.inflate(R.layout.guide_page3, null);
		view4 = mLi.inflate(R.layout.guide_page4, null);
	
		// 实例化ViewPager
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		// 实例化ArrayList对象
		views = new ArrayList();
		// 实例化ViewPager适配器
		vpAdapter = new ViewPagerAdapter(views);
		//实例化开始按钮
		//startBt = (Button) view4.findViewById(R.id.startBtn);
	}
	/**
	 * 初始化数据
	 */
	private void initData() {
		// 设置监听
		viewPager.setOnPageChangeListener(this);
		// 设置适配器数据
		viewPager.setAdapter(vpAdapter);

		//将要分页显示的View装入数组中		
		views.add(view1);
		views.add(view2);
		views.add(view3);
		views.add(view4);		
	        
        //初始化底部小点
        initPoint(views.size());
	}
	/**
	 * 初始化底部小点
	 */
	private void initPoint(int views){
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.point);       
		
        points = new ImageView[views];

        //循环取得小点图片
        for (int i = 0; i < views; i++) {
        	//得到一个LinearLayout下面的每一个子元素
        	points[i] = (ImageView) linearLayout.getChildAt(i);
        	//默认都设为灰色
        	points[i].setEnabled(true);
        	//给每个小点设置监听
        	points[i].setOnClickListener(this);
        	//设置位置tag，方便取出与当前位置对应
        	points[i].setTag(i);
        }
        
        //设置当面默认的位置
        currentIndex = 0;
        //设置为白色，即选中状态
        points[currentIndex].setEnabled(false);
	}
	
	/**
	 * 当滑动状态改变时调用
	 */
	@Override
	public void onPageScrollStateChanged(int arg0) {

	}
	
	/**
	 * 当当前页面被滑动时调用
	 */

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}
	
	/**
	 * 当新的页面被选中时调用
	 */

	@Override
	public void onPageSelected(int position) {
		//设置底部小点选中状态
        setCurDot(position);
	}

	/**
	 * 通过点击事件来切换当前的页面
	 */
	@Override
	public void onClick(View v) {
		 int position = (Integer)v.getTag();
         setCurView(position);
         setCurDot(position);		
	}

	/**
	 * 设置当前页面的位置
	 */
	private void setCurView(int position){
         if (position < 0 || position >= 4) {
             return;
         }
         viewPager.setCurrentItem(position);
     }

     /**
     * 设置当前的小点的位置
     */
    private void setCurDot(int positon){
         if (positon < 0 || positon > 3 || currentIndex == positon) {
             return;
         }
         points[positon].setEnabled(false);
         points[currentIndex].setEnabled(true);

         currentIndex = positon;
     }
	

ViewPager适配器代码， ViewPagerAdapter.java：

public class ViewPagerAdapter extends PagerAdapter {
	
	//界面列表
    private ArrayList views;
    
    public ViewPagerAdapter (ArrayList views){
        this.views = views;
    }
       
	/**
	 * 获得当前界面数
	 */
	@Override
	public int getCount() {
		 if (views != null) {
             return views.size();
         }      
         return 0;
	}

	/**
	 * 初始化position位置的界面
	 */
    @Override
    public Object instantiateItem(View view, int position) {
       
        ((ViewPager) view).addView(views.get(position), 0);
       
        return views.get(position);
    }
    
    /**
	 * 判断是否由对象生成界面
	 */
	@Override
	public boolean isViewFromObject(View view, Object arg1) {
		return (view == arg1);
	}

	/**
	 * 销毁position位置的界面
	 */
    @Override
    public void destroyItem(View view, int position, Object arg2) {
        ((ViewPager) view).removeView(views.get(position));       
    }

参考：

http://www.apkbus.com/portal.php?mod=view&aid=4206

源码可以自己到我的资源库下载http://download.csdn.net/detail/h378588270/8291497