描述

原生创建一个界面的时候，AS会给出一个比较丑的样式。

image-20230527213933995

比如：

  1. 没有沉浸式状态栏
  2. 不好看的头部ActionBar

下面是一些解决方案：

  1. 通过改主题文件实现ActionBar
  2. 通过三方库实现美化状态栏

实现

一，去掉头部ActionBar

  • 首先把Theme文件中做一个 NoActionBar（继承已有的就好了）image-20230527214454802

    1
    2
    3
    4
    <resources xmlns:tools="http://schemas.android.com/tools">
    <!--    不带头部ActionBar的主题-->
        <style name="SuperUI.NoActionBar" parent="Theme.MaterialComponents.DayNight.NoActionBar"/>
    </resources>

  • 在AndroidManifest里面更换原来的主题文件：

    • 如果想整个APP都是 NoActionBar 就换在 Application上：image-20230527214637053
    • 如果只是想某个Activity 是无头部Action Bar就放在对应 Activity 的上：image-20230527214807410

这个时候 NoActionBar 就实现了。

image-20230527214926314

插一句，这里的实现原理其实很简单，两行代码：

1
2
3
4
5
</style>
<style name="Theme.MaterialComponents.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

二，状态栏设置

到现在这步，状态栏显得很突兀。

我们想实现界面沉浸到状态栏效果。

这里我们用腾讯的 QMUI。

这个库很厉害，建议深入了解

引入三方库,同步。

1
implementation 'com.qmuiteam:qmui:2.0.1'

image-20230527221336729

沉浸状态栏

1
2
//设置沉浸式状态栏
QMUIStatusBarHelper.translucent(this);

image-20230527221944870

看下效果图：

image-20230527222039709

现在沉浸状态栏实现了，但是这个状态栏的文字因为颜色和Activity背景混了。

不好，处理一下。

状态栏文字设置

思路：

如果此时为浅色模式（界面是白的），设置状态栏文字为黑的。

如果此时为深色模式（界面是黑的），设置状态栏为白的。

判断此时是不是黑色界面的方法：

1
2
3
public static boolean isDark(Context context) {
        return (context.getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES;
    }

然后就直接 if 判断：

1
2
3
4
5
6
7
if (isDark(this)) {
    //状态栏文字白色
    QMUIStatusBarHelper.setStatusBarDarkMode(this);
} else {
    //状态栏文字黑色
    QMUIStatusBarHelper.setStatusBarLightMode(this);
}

整体代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //设置沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);

        if (isDark(this)) {
            //状态栏文字白色
            QMUIStatusBarHelper.setStatusBarDarkMode(this);
        } else {
            //状态栏文字黑色
            QMUIStatusBarHelper.setStatusBarLightMode(this);
        }
    }
    public static boolean isDark(Context context) {
        return (context.getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES;
    }
}

结果：

image-20230527222930147

image-20230527222937349

终于顺眼了。

总结

我们如果很多地方都想要这种效果就可以封装一个工具类

SuperStatusBarUtil

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
package com.example.testandroid.superutils;

import android.app.Activity;
import android.content.Context;
import android.content.res.Configuration;

import com.qmuiteam.qmui.util.QMUIStatusBarHelper;

/**
 * 状态栏工具类
 * 依赖以下实现：
 * //Tencent`s UI框架
 * //https://qmuiteam.com/android/get-started
 * implementation 'com.qmuiteam:qmui:2.0.1'
 */
public class SuperStatusBarUtil {

    /**
     * 我想要的状态栏：1. 沉浸式 2. 字体自然变化
     *
     * @param activity 想沉浸式状态栏的Activity
     */
    public static void myStatusBar(Activity activity) {
        //沉浸式
        QMUIStatusBarHelper.translucent(activity);
        //字体设置
        if (isDark(activity)) {
            //状态栏文字白色
            QMUIStatusBarHelper.setStatusBarDarkMode(activity);
        } else {
            //状态栏文字黑色
            QMUIStatusBarHelper.setStatusBarLightMode(activity);
        }
    }

    /**
     * 判断当前是不是深色模式/当前界面是不是深色Activity
     *
     * @param context
     * @return
     */
    public static boolean isDark(Context context) {
        return (context.getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES;
    }
}

然后用到的Activity直接调用就可以了。

1
2
//状态栏设置
SuperStatusBarUtil.myStatusBar(this);

image-20230527225528494