Android 项目必备（二）--＞ 启动页 & 引导页_android 启动页面

启动页

一个很慢的启动页很容易让用户觉得受不了，进而“逃离” App 的，所以若想产品有更好的用户体验，做一些启动页的优化是一个不错的选择。这里我们简单介绍一下我在实践中对启动页是如何优化的。

1. 启动页网络请求优化

我们在启动页做了什么？

• 加载 App 中 h5 页面的 url 地址；
• 加载请求用户信息；
• 加载首页地图页面需要展示的图标；
• 延时三秒钟跳转首页面，这时候无论是否加载到前面的网络请求信息，都会跳转到首页面。

2. 启动页面网络请求优化的具体实践

timer = new Timer();
            timerTask = new TimerTask() {
                @Override
                public void run() {
                    if (isGoToComplete) {
                        L.i("等待2s完成，取消timer任务...");
                        cancelTimer();
                        return;
                    }
                    if (isLoadStartQueryComplete && isLoadUserInfoComplete) {
                        // 已经显示过引导图
                        L.i("StartActivity中网络请求完成，执行跳转逻辑.....");
                        handler.sendEmptyMessage(eventWhat);
                        L.i("StartActivity中网络请求完成，取消timer任务...");
                        cancelTimer();
                    }
                }
            };
            timer.schedule(timerTask, 0, 100);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 启动页面无黑屏

使用透明主题:

<item name="android:windowIsTranslucent">true</item>
1

Activity.onCreate() 之前 App 不做显示，这样用户误以为是手机慢了，这种瞒天过海的方案大家还是不要用了。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

</resources>
1
2
3
4
5
6
7
8
9
10
11
12

4.主题替换

我们在style中自定义一个样式Lancher，在其中放一张背景图片，或是广告图片之类的。

	<style name="AppTheme.Launcher" parent="AppTheme">
<!--<item name="android:windowBackground">@color/startingwindow_bgcolor</item>-->
        <item name="android:windowBackground">@drawable/bg</item>
    </style>
1
2
3
4

把这个样式设置给启动的 Activity

			<activity
            android:name=".activity.SplashActivity"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.Launcher"
            >
1
2
3
4
5

然后在 Activity 的 onCreate 方法，把 Activity 设置回原来的主题

@Override
    protected void onCreate(Bundle savedInstanceState) {
        //替换为原来的主题，在onCreate之前调用
        setTheme(R.style.AppTheme);
        super.onCreate(savedInstanceState);
    }
1
2
3
4
5
6

5. 启动页面屏蔽返回按键

一般的我们的 App 中都会在启动页面执行一些网络操作，初始化配置等，所以这时候我们是不希望用户通过按下返回按键退出 App ，因而我们需要在启动页中屏蔽返回按键，这里简单的介绍一下具体的实现：

/**
     * startActivity屏蔽物理返回按钮
     *
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

引导页

1、延时启动检测

用 sharedpreference 来检测：

		Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                boolean isFirst = PreferencesUtils.getBoolean(SplashActivity.this,"isFirst",false);
                if (!isFirst) {
                    readyGo(GuideActivity.class);
                    PreferencesUtils.putBoolean(SplashActivity.this, "isFirst",true);
                }else{
                    readyGo(MainActivity.class);
                }
            }
        },2000);
1
2
3
4
5
6
7
8
9
10
11
12
13

2、圆点的绘制

我们完全可以用 shade 属性和 selector 属性帮我们绘制完成。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <size android:height="10dp"
          android:width="10dp"/>
</shape>
1
2
3
4
5
6
7

用 selector 就可以改变不同的颜色:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/point_select" android:state_selected="true"/>
    <item android:drawable="@drawable/point_normal" android:state_selected="false"/>
</selector>
1
2
3
4
5

引导页界面布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2233"
    tools:context=".GuideActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/guide_start"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/btn_background"
        android:text="开始体验"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginBottom="20dp"
        android:visibility="gone"/>

    <LinearLayout
        android:id="@+id/point_ly"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:orientation="horizontal"/>

</RelativeLayout>
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

初始化圆点：

private void initPoint() {
        //获取layout
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //设置每一个view即圆点的对左的偏移量
        params.setMargins(15,0,0,0);
        //根据图片多少来确定个数
        for (int i = 0; i < imgRes.length; i++) {

            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.drawable.dot_select);
            imageView.setLayoutParams(params); //把上面的控件属性设置到LinearLayout中
            if (i == 0){ //默认第一张为红色圆点
                imageView.setSelected(true);
            }else{
                imageView.setSelected(false);
            }
            //把圆点这个子视图导入我们的LinearLayout里面
            mLayout.addView(imageView);
            mImageViews.add(imageView);//跟着viewpager变换颜色
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在页面滑动完成之后，改变圆点的颜色就可以了。

		//滑动时改变圆点的状态
        for (int i = 0; i < mImageViews.size(); i++) {
            if (i == position){
                mImageViews.get(i).setSelected(true);
            }else{
                mImageViews.get(i).setSelected(false);
            }
        }
        //当为最后一个时，显示button，并隐藏圆点
        if (position == mImageViews.size() -1){
            mLayout.setVisibility(View.GONE);
            mButton.setVisibility(View.VISIBLE);
            ObjectAnimator animator = ObjectAnimator.ofFloat(mButton,"alpha",0f,1f);
            animator.setDuration(1000);
            animator.start();
        }else{
            mLayout.setVisibility(View.VISIBLE);
            mButton.setVisibility(View.GONE);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

最后附上完整 Demo