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