RxJava两步打造华丽的Android引导页

前言

之前的一篇文章：基于rxjava实现酷炫启动页 中，我们尝试了用rxjava实现酷炫的启动页，今天我们在此基础上加入首次使用app时的引导页功能。

效果如下图：

思路：思路其实很简单，就是在welcomeactivity 中setcontentview（）之前判断是否是首次打开app，若是，则去启动引导页（welcomeguideactivity）并return；若不是，则直接setcontentview（），然后启动动画再启动mainactivity。

一、welcomeactivity中判断是否是第一次启动

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    // 判断是否是第一次开启应用
    boolean isfirstopen = sharedpreferencesutil.getboolean(this, sharedpreferencesutil.first_open, true);
    // 如果是第一次启动，则先进入功能引导页
    if (isfirstopen) {
      intent intent = new intent(this, welcomeguideactivity.class);
      startactivity(intent);
      finish();
      return;
    }

    // 如果不是第一次启动app，则正常显示启动屏
    setcontentview(r.layout.activity_welcome);
    butterknife.bind(this);
    startmainactivity();
  }

我们判断是否是第一次打开app是用了sharedpreferences，我们这里对他进行了一下简单封装，代码如下：

/**
 * created by xialo on 2016/7/25.
 */
public class sharedpreferencesutil {

  private static final string spfilename = "welcomepage";
  public static final string first_open = "first_open";

  public static boolean getboolean(context context, string strkey,
                   boolean strdefault) {//strdefault  boolean: value to return if this preference does not exist.
    sharedpreferences setpreferences = context.getsharedpreferences(
        spfilename, context.mode_private);
    boolean result = setpreferences.getboolean(strkey, strdefault);
    return result;
  }

  public static void putboolean(context context, string strkey,
                 boolean strdata) {
    sharedpreferences activitypreferences = context.getsharedpreferences(
        spfilename, context.mode_private);
    sharedpreferences.editor editor = activitypreferences.edit();
    editor.putboolean(strkey, strdata);
    editor.commit();
  }

}

二、welcomeguideactivity中，我们使用viewpager以加载多个引导页面使其可以左右滑动

不多说，请看welcomeguideactivity.java代码：

/**
 * created by xialo on 2016/7/25.
 */
public class welcomeguideactivity extends activity implements view.onclicklistener {
  private viewpager vp;
  private guideviewpageradapter adapter;
  private list<view> views;
  private button startbtn;

  // 引导页图片资源
  private static final int[] pics = { r.layout.guide_view1,
      r.layout.guide_view2, r.layout.guide_view3};

  // 底部小点图片
  private imageview[] dots;

  // 记录当前选中位置
  private int currentindex;

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

    views = new arraylist<view>();

    // 初始化引导页视图列表
    for (int i = 0; i < pics.length; i++) {
      view view = layoutinflater.from(this).inflate(pics[i], null);

      if (i == pics.length - 1) {
        startbtn = (button) view.findviewbyid(r.id.btn_enter);
        startbtn.settag("enter");
        startbtn.setonclicklistener(this);
      }

      views.add(view);

    }

    vp = (viewpager) findviewbyid(r.id.vp_guide);
    adapter = new guideviewpageradapter(views);
    vp.setadapter(adapter);
    vp.addonpagechangelistener(new pagechangelistener());

    initdots();

  }

  @override
  protected void onresume() {
    super.onresume();
  }

  @override
  protected void onpause() {
    super.onpause();
    // 如果切换到后台，就设置下次不进入功能引导页
    sharedpreferencesutil.putboolean(welcomeguideactivity.this, sharedpreferencesutil.first_open, false);
    finish();
  }

  @override
  protected void onstop() {
    super.onstop();
  }

  @override
  protected void ondestroy() {
    super.ondestroy();
  }

  private void initdots() {
    linearlayout ll = (linearlayout) findviewbyid(r.id.ll);
    dots = new imageview[pics.length];

    // 循环取得小点图片
    for (int i = 0; i < pics.length; i++) {
      // 得到一个linearlayout下面的每一个子元素
      dots[i] = (imageview) ll.getchildat(i);
      dots[i].setenabled(false);// 都设为灰色
      dots[i].setonclicklistener(this);
      dots[i].settag(i);// 设置位置tag，方便取出与当前位置对应
    }

    currentindex = 0;
    dots[currentindex].setenabled(true); // 设置为白色，即选中状态

  }

  /**
   * 设置当前view
   *
   * @param position
   */
  private void setcurview(int position) {
    if (position < 0 || position >= pics.length) {
      return;
    }
    vp.setcurrentitem(position);
  }

  /**
   * 设置当前指示点
   *
   * @param position
   */
  private void setcurdot(int position) {
    if (position < 0 || position > pics.length || currentindex == position) {
      return;
    }
    dots[position].setenabled(true);
    dots[currentindex].setenabled(false);
    currentindex = position;
  }

  @override
  public void onclick(view v) {
    if (v.gettag().equals("enter")) {
      entermainactivity();
      return;
    }

    int position = (integer) v.gettag();
    setcurview(position);
    setcurdot(position);
  }


  private void entermainactivity() {
    intent intent = new intent(welcomeguideactivity.this,
        welcomeactivity.class);
    startactivity(intent);
    sharedpreferencesutil.putboolean(welcomeguideactivity.this, sharedpreferencesutil.first_open, false);
    finish();
  }

  private class pagechangelistener implements viewpager.onpagechangelistener {
    @override
    public void onpagescrollstatechanged(int position) {

    }

    @override
    public void onpagescrolled(int position, float arg1, int arg2) {

    }

    @override
    public void onpageselected(int position) {
      // 设置底部小点选中状态
      setcurdot(position);
    }

  }
}

我们用了三个页面guide_view1、guide_view2、guide_view3作为引导页面，布局类似，只是guide_view3多了个点击进入的button。

以下是guide_view3.xml

<?xml version="1.0" encoding="utf-8"?>
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <imageview
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaletype="centercrop"
    android:src="@mipmap/guide_img3" />
  <button
    android:id="@+id/btn_enter"
    android:layout_width="100dp"
    android:layout_height="26dp"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginbottom="75dp"
    android:background="@drawable/button_shape"
    android:text="@string/entry"
    android:textcolor="@color/white"
    android:textsize="18sp"
    android:visibility="visible" />

</framelayout>

welcomeguideactivity中值得注意的是该button点击事件的处理，在点击button后我们并没有直接进入mainactivity，而是先把sharedpreferences中标记是否第一次进入的布尔值设为false，而后再次进入welcomeactivity，此时welcomeactivity会直接setcontentview（）然后启动动画，进入mainactivity。

以上，我们华丽丽的引导页就完成了。希望本文中能对你的引导页提供帮助，和在大家学习android开发中有所参考，谢谢大家对的支持。