【Android UI设计与开发】第02期：引导界面（二）使用ViewPager实现欢迎引导页面

本系列文章都会以一个程序的实例开发为主线来进行讲解，以求达到一个循序渐进的学习效果，这样更能加深大家对于程序为什么要这样写的用意，理论加上实际的应用才能达到事半功倍的效果，不是吗？

最下方有源码的下载地址，几乎源码的每一行都有注释，写的通俗易懂，非常清晰，如有不懂的可以留言，本博主一定尽心尽力，为大家答题解惑，希望大家多多支持，好的，话不多说，让我们回归到今天的正题。

一、实现的效果图

也许是养成了这样一个习惯，每次看别人的代码前，必须要先看实现的效果图达到了一个什么样的效果，是不是跟自己想要实现的效果类似，有图才有真相嘛，呵呵。

二、编码前的准备工作

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

三、项目结构图

四、具体的编码实现

1、 布局界面比较简单，加入ViewPager组件，以及底部的引导小点，activity_main.xml:

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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

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

双击代码全选

1 2 3 4 5 6

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

3、 ViewPager适配器代码，ViewPagerAdapter.java：

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

package com.yangyu;          import java.util.ArrayList;          import android.support.v4.view.PagerAdapter;  import android.support.v4.view.ViewPager;  import android.view.View;          /**  * @author yangyu  *  功能描述：ViewPager适配器，用来绑定数据和view  */ public class ViewPagerAdapter extends PagerAdapter {                  //界面列表      private ArrayList<View> views;                  public ViewPagerAdapter (ArrayList<View> 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));             }  }

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

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173

package com.yangyu;          import java.util.ArrayList;          import android.app.Activity;  import android.os.Bundle;  import android.support.v4.view.ViewPager;  import android.support.v4.view.ViewPager.OnPageChangeListener;  import android.view.View;  import android.view.View.OnClickListener;  import android.widget.ImageView;  import android.widget.LinearLayout;          import com.example.myguideview01.R;          /**  * @author yangyu  *  功能描述：主程序入口类  */ public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {      //定义ViewPager对象      private ViewPager viewPager;                  //定义ViewPager适配器      private ViewPagerAdapter vpAdapter;                  //定义一个ArrayList来存放View      private ArrayList<View> views;              //引导图片资源          private static final int[] pics = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};                      //底部小点的图片          private ImageView[] points;                      //记录当前选中位置          private int currentIndex;                  @Override     protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);                          initView();                          initData();       }              /**      * 初始化组件      */     private void initView(){          //实例化ArrayList对象          views = new ArrayList<View>();                          //实例化ViewPager          viewPager = (ViewPager) findViewById(R.id.viewpager);                          //实例化ViewPager适配器          vpAdapter = new ViewPagerAdapter(views);      }                  /**      * 初始化数据      */     private void initData(){          //定义一个布局并设置参数          LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,                                                                            LinearLayout.LayoutParams.FILL_PARENT);                         //初始化引导图片列表          for(int i=0; i<pics.length; i++) {              ImageView iv = new ImageView(this);              iv.setLayoutParams(mParams);              iv.setImageResource(pics[i]);              views.add(iv);          }                           //设置数据          viewPager.setAdapter(vpAdapter);          //设置监听          viewPager.setOnPageChangeListener(this);                          //初始化底部小点          initPoint();      }                  /**      * 初始化底部小点      */     private void initPoint(){          LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);                                 points = new ImageView[pics.length];                  //循环取得小点图片          for (int i = 0; i < pics.length; 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 >= pics.length) {               return;           }           viewPager.setCurrentItem(position);       }               /**      * 设置当前的小点的位置      */     private void setCurDot(int positon){           if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {               return;           }           points[positon].setEnabled(false);           points[currentIndex].setEnabled(true);                   currentIndex = positon;       }    }

这篇主要是让大家能够实现一个简单的例子，让你的程序先动起来，才有信心和勇气挑战更复杂的UI设计和开发，在后面的几篇章节中，博主也会以同样生动和富有激情的讲解，给大家带来更加的复杂的演示和代码，如仿微信、和人人网的引导界面的开发，加入了动画的效果，运行起来也会更炫一点。

源码下载地址

来源： csdn   作者：yangyu20121224