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開發中有所參考，謝謝大家對本站的支持。