原文链接:https://lingyunzhu.github.io/2016/07/27/两步打造华丽丽的Android引导页(用到RxJava)/
上篇文章 :RxJava实践之打造酷炫启动页中,我们尝试了用RxJava实现酷炫的启动页,今天我们再此基础上加入首次使用APP时的引导页功能。效果如下图:
思路:思路其实很简单,就是在WelcomeActivity 中setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return;若不是,则直接setContentView(),然后启动动画再启动MainActivity。
一、WelcomeActivity中判断是否是第一次启动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @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,我们这里对他进行了一下简单封装,代码如下:
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.xml
1 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。
以上,我们华丽丽的引导页就完成了,需要完整代码的请戳 代码传送门