兩步打造華麗麗的Android引導頁（用到RxJava）

原文發佈於個人博客 Android猿

上篇文章 ：RxJava實踐之打造酷炫啓動頁中，咱們嘗試了用RxJava實現酷炫的啓動頁，今天咱們再此基礎上加入首次使用APP時的引導頁功能。效果以下圖：

思路：思路其實很簡單，就是在WelcomeActivity 中setContentView（）以前判斷是不是首次打開APP，如果，則去啓動引導頁（WelcomeGuideActivity）並return；若不是，則直接setContentView（），而後啓動動畫再啓動MainActivity。

1、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();
    }

}

2、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_view一、guide_view二、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。

以上，咱們華麗麗的引導頁就完成了，須要完整代碼的請戳 代碼傳送門