上篇文章 ：RxJava实践之打造酷炫启动页中，我们尝试了用RxJava实现酷炫的启动页，今天我们再此基础上加入首次使用APP时的引导页功能。效果如下图：
思路：思路其实很简单，就是在WelcomeActivity 中setContentView（）之前判断是否是首次打开APP，若是，则去启动引导页（WelcomeGuideActivity）并return；若不是，则直接setContentView（），然后启动动画再启动MainActivity。
一、WelcomeActivity中判断是否是第一次启动
1 | @Override |
我们判断是否是第一次打开APP是用了SharedPreferences，我们这里对他进行了一下简单封装，代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26/**
* 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代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156/**
* 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.xml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<?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。
以上，我们华丽丽的引导页就完成了，需要完整代码的请戳 代码传送门