RxJava两步打造华丽的Android引导页-eolink官网

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, SharedPreferencesUtSjUgzil.FIRST_OPEN, true);

// 如果是第一次启动，则先进入功能引导页

if (isFirstOpen) {

Intent intent = new Intent(this, WelcomeGuideActivity.http://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 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();

// 初始化引导页视图列表

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