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

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

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

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup +   GestureDetector

第三种： ViewPager  (Android3.0+)

第四种： ViewFlow (开源项目)

这里弄的是第三种，

一、先看的效果图

二、编码前准备

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

项目结构图:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:orientation="horizontal"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
    LinearLayout>
RelativeLayout>

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

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/guide1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/view_guide1"
    android:orientation="vertical" >

LinearLayout>

guide_page4.xml

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/guide4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" android:background="@drawable/view_guide4">

    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" android:gravity="center_vertical">

        <Button
            android:id="@+id/ok"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:layout_gravity="center_vertical|center_horizontal"
            android:text="马上体验"
            android:background="@drawable/start_btn" />

    LinearLayout>

RelativeLayout>

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

xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/point_normal" />
    <item android:state_enabled="false" android:drawable="@drawable/point_select" />
selector>

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

public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {
    //定义ViewPager对象
    private ViewPager viewPager;

    //定义ViewPager适配器
    private ViewPagerAdapter vpAdapter;

    //定义一个ArrayList来存放View
    private ArrayList<View> 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<View>();
        // 实例化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