Android开发实战之漂亮的ViewPager引导页

目前很多软件安装时都会出现引导页面，用户体验很好。

下面就来diy下：

因为视频上传很麻烦，所以截图了。

首先看看效果图：

点击小点可*切换，滑动也可以*切换，最后一个导航页添加了点击跳转。

开始实现引导页：

一、采集需要的图片放入drawable文件里

二、初始化每个导航页的视图

import android.app.activity;
import android.content.intent;
import android.os.bundle;
import android.support.v4.view.viewpager;
import android.util.log;
import android.view.view;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.textview;

import com.yyp.myapp.adapter.viewpageradapter;
import com.yyp.myapp.r;

import java.util.arraylist;
import java.util.list;

public class viewpageractivity extends activity implements viewpager.onpagechangelistener,view.onclicklistener {

 private viewpager viewpager;
 private imageview[] pots;
 private list<view> views;

 private textview et_into_login;

 private viewpageradapter adapter;

 //图片资源
 private int[] guideimages = {r.drawable.guide1,r.drawable.guide2,r.drawable.guide3};
 private int index;
 private linearlayout layout;

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_view_pager);

  initview();
  initdata();
 }

 //初始化viewpager
 public void initview()
 {
  layout = (linearlayout) this.findviewbyid(r.id.ll_pots);
  viewpager = (viewpager) this.findviewbyid(r.id.viewpager);
  et_into_login = (textview) this.findviewbyid(r.id.et_into_login);
  views = new arraylist<view>();
  adapter = new viewpageradapter(views);
  pots = new imageview[guideimages.length];
  log.e("ll_viewpager", layout + "");
 }

 //初始化每一个图片数据
 public void initdata()
 {
  //设置图片的长宽类型
  android.view.viewgroup.layoutparams layoutparams = new android.view.viewgroup.layoutparams(android.view.viewgroup.layoutparams.match_parent,android.view.viewgroup.layoutparams.match_parent);
  for(int i:guideimages)
  {
   imageview imageview = new imageview(this);
   imageview.setimageresource(i); //将对应图片的id传进去，用于初始化图片
   imageview.setlayoutparams(layoutparams);
   views.add(imageview);
  }
  initpot();
  viewpager.setadapter(adapter);
  viewpager.setonpagechangelistener(this);
 }

 //初始化每个点颜色
 public void initpot()
 {
  //点的集合
  for(int i=0;i<layout.getchildcount();i++)
  {
   //全部设置为灰色
   pots[i] = (imageview) layout.getchildat(i);
   pots[i].setimageresource(r.drawable.pot5);
   //给每个点设置点击事件
   pots[i].setonclicklistener(this);

   pots[i].settag(i);
  }
  //第一个设置为橙色
  index = 0;
  pots[index].setimageresource(r.drawable.pot1);

 }

 @override
 public void onpagescrollstatechanged(int arg0) {
  // todo auto-generated method stub

 }

 @override
 public void onpagescrolled(int arg0, float arg1, int arg2) {
  // todo auto-generated method stub

 }

 @override
 public void onpageselected(int position) {
  // todo auto-generated method stub
  setindex(position);

  //最后一张导航页才进行跳转提示
  if(position==2){
   et_into_login.setvisibility(view.visible);
  }else{
   et_into_login.setvisibility(view.invisible);
  }
 }

 public void setindex(int position) {
  // todo auto-generated method stub
  for(int i=0;i<layout.getchildcount();i++)
  {
   //全部设置为灰色
   pots[i] = (imageview) layout.getchildat(i);
   pots[i].setimageresource(r.drawable.pot5);

  }
  //选中的设置为橙色
  pots[position].setimageresource(r.drawable.pot1);

 }

 @override
 public void onclick(view v) {
  // todo auto-generated method stub
  int i = (integer) v.gettag();
  //设置当前页为i所对应的图片
  viewpager.setcurrentitem(i);
  if(i==2){
   et_into_login.setvisibility(view.visible);
  }
 }

 //跳转到登录界面
 public void gologin(view v){
  intent gologin = new intent(this,loginactivity.class);
  startactivity(gologin);
  finish();
 }
}

三、初始化期间自定义viewpager适配器

import android.support.v4.view.pageradapter;
import android.view.view;
import android.view.viewgroup;

import java.util.list;

/**
 * created by yyp on 2015/10/25.
 */
public class viewpageradapter extends pageradapter {

 //获得导航页的图片集
 private list<view> views;

 public viewpageradapter(list<view> views)
 {
  this.views = views;
 }

 //获得界面个数
 @override
 public int getcount() {

  //返回图片页数
  return views.size();
 }

 //初始化position位置的界面
 @override
 public object instantiateitem(viewgroup container, int position) {

  ((viewgroup)container).addview(views.get(position));
  return views.get(position);
 }

 //判断是否由对象生成界面
 @override
 public boolean isviewfromobject(view arg0, object arg1) {
  // todo auto-generated method stub
  return arg0==arg1;
 }

 //对不在界面内的导航页进行删除
 @override
 public void destroyitem(viewgroup container, int position, object object) {
  container.removeview(views.get(position));
 }
}

在用户体验方面，我们能发掘的东西还有很多，说不定下次流行的视图，就是我们某个人做出来的。

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