Android UI设计与开发之使用ViewPager实现欢迎引导页面

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

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

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

一、实现的效果图

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

二、编码前的准备工作

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

三、项目结构图

四、具体的编码实现

1、  布局界面比较简单，加入VIEwPager组件，以及底部的引导小点，activity_main.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/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：

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

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：

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设计和开发，在后面的几篇章节中，博主也会以同样生动和富有激情的讲解，给大家带来更加的复杂的演示和代码，如仿微信、和人人网的引导界面的开发，加入了动画的效果，运行起来也会更炫一点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android UI设计与开发之使用ViewPager实现欢迎引导页面全部内容，希望文章能够帮你解决Android UI设计与开发之使用ViewPager实现欢迎引导页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。