Android ViewPager向导页面制作方法

接着上一篇博客，上一篇博客跟大家分享了三种开始页面的定时跳转，根据项目需求接下来就说一下向导页面吧！几乎每一个app都有自己的向导页面，一般都是第一次安装的时或者第一次进入应用时才有向导页面的，就是只出现一次向导页面，向导页面顾名思义是指引客户大概了解app的功能，向客户介绍app的主要内容和使用方式，给客户一种期待已久的感觉，向导页面的实现方法有很多，现在我就以我之前做的项目为例给大家介绍用viewpager去实现向导页面吧！

现在就给你们先看看效果图，是很酷吧！

一、判断开始页面是否跳转到向导页面（如果是第一次进入app，则开始页面跳转到想到页面；如果不是第一次进入app了，则开始页面跳转到主页面。这就是向导页面只出现一次的逻辑构思）

// 判断是否进入向导界面还是主界面 
        if (sptools.getboolean(getapplicationcontext(), myconstants.issetup, false)){ 
          //true，设置过，直接进入主界面 
          // 
          intent main = new intent(splashactivity.this,mainactivity.class); 
          startactivity(main);//主界面 
        } else { 
          //false，没设置过，进入设置向导界面 
 
          intent intent = new intent(splashactivity.this,guideactivity.class); 
          startactivity(intent);//向导界面 
        } 

二、向导页面guideactivity.class的实现，用viewpager来实现。 （默认第一次进入app的，不然开始页面就不会跳转到向导页面了）如果有对viewpager不熟悉的，也可以查一下android api帮助文档，地址：http://android-doc.com/reference/android/support/v4/view/viewpager.html

import android.app.activity; 
import android.content.intent; 
import android.os.bundle; 
import android.support.v4.view.pageradapter; 
import android.support.v4.view.viewpager; 
import android.support.v4.view.viewpager.onpagechangelistener; 
import android.view.view; 
import android.view.view.onclicklistener; 
import android.view.viewgroup; 
import android.view.viewtreeobserver.ongloballayoutlistener; 
import android.view.window; 
import android.view.windowmanager; 
import android.widget.button; 
import android.widget.imageview; 
import android.widget.linearlayout; 
import android.widget.linearlayout.layoutparams; 
import android.widget.relativelayout; 
 
import com.zsml.fashiongou.sputils.densityutil; 
import com.zsml.fashiongou.sputils.myconstants; 
import com.zsml.fashiongou.sputils.sptools; 
 
import java.util.arraylist; 
import java.util.list; 
 
 
public class guideactivity extends activity 
{ 
  private viewpager vp_guids; 
  private linearlayout ll_points; 
  private view v_redpoint; 
  private button bt_startexp; 
  private list<imageview>  guids; 
  private myadapter adapter; 
  private int dispoints;// 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
 
    super.oncreate(savedinstancestate); 
    requestwindowfeature(window.feature_no_title);//去掉标题 
 
    // full screen 
    getwindow().setflags(windowmanager.layoutparams.flag_fullscreen, 
    windowmanager.layoutparams.flag_fullscreen); 
 
    initview();// 初始化界面 
 
    initdata();//初始化数据 
 
    initevent();//初始化组件事件 
  } 
 
  private void initevent() { 
    // 
    v_redpoint.getviewtreeobserver().addongloballayoutlistener(new ongloballayoutlistener() { 
 
 
 
      @override 
      public void ongloballayout() { 
        // 
        v_redpoint.getviewtreeobserver().removeglobalonlayoutlistener(this); 
        // 
        dispoints = (ll_points.getchildat(1).getleft() - ll_points.getchildat(0) 
            .getleft()); 
      } 
    }); 
 
    //给开始体验按钮添加点击事件 
    bt_startexp.setonclicklistener(new onclicklistener() { 
 
      @override 
      public void onclick(view v) { 
        //保存设置的状态 
        sptools.setboolean(getapplicationcontext(), myconstants.issetup, true);//保存设置完成的状态 
        //进入主界面 
        intent main = new intent(guideactivity.this,mainactivity.class); 
        startactivity(main);//启动主界面 
        //关闭自己 
        finish(); 
      } 
    }); 
 
    // 
    vp_guids.setonpagechangelistener(new onpagechangelistener() { 
 
 
      @override 
      public void onpageselected(int position) { 
        //当前viewpager显示的页码 
        //如果viewpager滑动到第三页码（最后一页），显示button 
        if (position == guids.size() - 1) { 
          bt_startexp.setvisibility(view.visible);//设置按钮的显示 
        } else { 
          //隐藏该按钮 
          bt_startexp.setvisibility(view.gone); 
        } 
      } 
 
 
      @override 
      public void onpagescrolled(int position, float positionoffset, 
                    int positionoffsetpixels) { 
 
        // 
        // 
        float leftmargin = dispoints * (position + positionoffset); 
 
        // 
        relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) v_redpoint.getlayoutparams(); 
        layoutparams.leftmargin = math.round(leftmargin);// 
 
        // 
        v_redpoint.setlayoutparams(layoutparams); 
      } 
 
      @override 
      public void onpagescrollstatechanged(int state) { 
 
      } 
    }); 
  } 
 
  private void initdata() { 
    // viewpaper adapter适配器  list容器 
    // 图片的数据（数组） 
    int[] pics = new int[] { r.mipmap.img_guide_1, r.mipmap.img_guide_2, 
        r.mipmap.img_guide_3}; 
 
    //定义viewpager使用的容器 
    guids = new arraylist<imageview>(); 
 
    //创建viewpager的适配器 
    for (int i = 0; i < pics.length; i++) { 
      imageview iv_temp = new imageview(getapplicationcontext()); 
      iv_temp.setbackgroundresource(pics[i]); 
 
      //添加界面的数据 
      guids.add(iv_temp); 
 
      // 
      view v_point = new view(getapplicationcontext()); 
//      v_point.setbackgroundresource(r.drawable.gray_point);//红点背景色 
      int dip = 10; 
      // 
      layoutparams params = new layoutparams(densityutil.dip2px(getapplicationcontext(), dip), densityutil.dip2px(getapplicationcontext(), dip));// dp 
 
      // 
      // 
      if (i != 0)// 
        params.leftmargin = 47;// 
      v_point.setlayoutparams(params);// 
 
      // 
      ll_points.addview(v_point); 
    } 
 
    // 
 
 
    // 创建viewpager的适配器 
    adapter = new myadapter(); 
 
    // 设置适配器 
    vp_guids.setadapter(adapter); 
 
  } 
 
  //viewpager的适配器 
  private class myadapter extends pageradapter 
  { 
 
    @override 
    public int getcount() { 
 
      return guids.size();// 返回数据的个数 
    } 
 
    @override 
    public boolean isviewfromobject(view arg0, object arg1) { 
      return arg0 == arg1;// 过滤和缓存的作用 
    } 
 
    @override 
    public void destroyitem(viewgroup container, int position, object object) { 
 
      container.removeview((view) object);//从viewpager中移除掉 
    } 
 
    @override 
    public object instantiateitem(viewgroup container, int position) { 
      // container viewpaper 
      //获取view 
      view child = guids.get(position); 
      // 添加view 
      container.addview(child); 
 
      return child; 
    } 
 
  } 
 
  private void initview() { 
    setcontentview(r.layout.activity_guide); 
 
    // viewpage组件 
    vp_guids = (viewpager) findviewbyid(r.id.vp_guide_pages); 
 
    // 动态加点容器 
    ll_points = (linearlayout) findviewbyid(r.id.ll_guide_points); 
 
    // 点 
    v_redpoint = findviewbyid(r.id.v_guide_redpoint); 
 
    //确定开始体验按钮 
    bt_startexp = (button) findviewbyid(r.id.bt_guide_startexp); 
  } 
} 

注、关于是否是第一次进入，实现方式比较简单，用过使用sharedpreferences保存使用状态，将他封装到工具类中便于使用！这里我就直接贴出sharedpreferences封装好的3个工具类了

（一）、

import android.content.context; 
 
/** 
 * created by administrator on 2016/11/1 0001. 
 */ 
 
public class densityutil { 
 
  public static int dip2px(context context, float dpvalue) { 
    final float scale = context.getresources().getdisplaymetrics().density; 
    return (int) (dpvalue * scale + 0.5f); 
  } 
 
  /** 
   * 
   */ 
  public static int px2dip(context context, float pxvalue) { 
    final float scale = context.getresources().getdisplaymetrics().density; 
    return (int) (pxvalue / scale + 0.5f); 
  } 
} 

（二）、

/** 
 * created by administrator on 2016/11/1 0001. 
 */ 
 
public interface myconstants 
{ 
  string configfile = "cachevalue";//sp的文件名 
  string issetup = "issetup";//是否设置向导界面设置过数据 
} 

（三）、

import android.content.context; 
import android.content.sharedpreferences; 
 
/** 
 * created by administrator on 2016/11/1 0001. 
 */ 
 
public class sptools { 
 
  public static void setboolean(context context, string key, boolean value){ 
    sharedpreferences sp = context.getsharedpreferences(myconstants.configfile, context.mode_private); 
    sp.edit().putboolean(key, value).commit();//提交保存键值对 
 
  } 
 
 
  public static boolean getboolean(context context,string key,boolean defvalue){ 
    sharedpreferences sp = context.getsharedpreferences(myconstants.configfile, context.mode_private); 
    return sp.getboolean(key, defvalue); 
  } 
} 

三、xml的布局实现

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.viewpager 
    android:id="@+id/vp_guide_pages" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 
  </android.support.v4.view.viewpager> 
 
  <relativelayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignparentbottom="true" 
    android:layout_centerhorizontal="true" 
    android:layout_marginbottom="30dip" > 
 
    <linearlayout 
      android:id="@+id/ll_guide_points" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" > 
    </linearlayout> 
 
    <view 
      android:id="@+id/v_guide_redpoint" 
      android:layout_width="10dip" 
      android:layout_height="10dip" 
      android:layout_marginbottom="0.7dp" 
      android:background="@drawable/red_point" /> 
  </relativelayout> 
 
  <button 
    android:id="@+id/bt_guide_startexp" 
    android:background="@drawable/btn_selector" 
    android:layout_alignparentbottom="true" 
    android:layout_centerhorizontal="true" 
    android:layout_marginbottom="45dip" 
    android:paddingtop="5dip" 
    android:paddingbottom="5dip" 
    android:paddingleft="10dip" 
    android:paddingright="10dip" 
    android:textcolor="@color/btn_colors" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="开始体验" 
    android:visibility="gone" 
    android:textsize="18sp" /> 
 
</relativelayout> 

注、关于圆点、button按钮的状态、等ui效果的设置

（一）、自己画圆点，定义颜色
外面的大圆big_point.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
  android:shape="oval"> 
 
  <corners android:radius="5dip"></corners> 
   
  <solid android:color="#ffffff"></solid> 
</shape> 

里面的圆点small_point.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  android:shape="oval"> 
 
  <corners android:radius="5dip"></corners> 
   
  <solid android:color="#fff"></solid> 
</shape> 

 （二）、button的颜色、以及状态选择
背景状态选择器btn_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
 
  <!-- 按钮按下的状态 --> 
  <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"></item> 
  <!-- 按钮松开的状态 --> 
  <item android:drawable="@drawable/button_red_normal" android:state_pressed="false"></item> 
 
</selector> 

文本颜色选择器btn_colors.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
   <!-- 按钮按下的状态 黑色 --> 
  <item android:color="#000000" android:state_pressed="true"></item> 
  <!-- 按钮松开的状态 白色 --> 
  <item android:color="#ffffff" ></item> 
   
</selector> 

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