×
广告

Android 6.0 以上实现状态栏白底黑字

96
醒着的码者
2017.06.14 20:22* 字数 1476

Android 6.0 以上实现状态栏白底黑字 「白色标题栏 App 享受 iOS 般的沉浸体验」


前言: 其实我挺不愿意起这个标题的,为什么 Android 非要做的跟 iOS 一样, 但是对于状态栏这个颜色这个需求我想还是有必要像 iOS 学习一下,毕竟 5.0 之前,状态栏万年黑色的样子的确和大部分 App 的主题样式有点不太融合, 但是最近受到产品的大哥在玩小密圈,看到他们的状态栏效果,所以让我也实现下也这样的效果 O(∩_∩)O~。

网上关于「沉浸式状态栏」「透明状态栏」的文章 Google 一搜一大把。文章的开头先给大家列举一下几个常见的实现方式吧:

  1. 如果你的 App 需要考虑 Android 4.4 版本的状态栏颜色改变,那么就请移步这个第三方库 SystemBarTint
  2. 如果你的 App 仅需要考虑 Android 5.0 版本以上的状态栏颜色适配,这里推荐一个简单实用的实现方式,薄荷TOOLBAR(ACTIONBAR)的适配方案

薄荷公司 statueBar 的适配方案

之前我们的 App 刚开始搭建的时候采用的是,薄荷公司的状态栏适配方式,主要思路是:

  1. 设置主题状态栏背景透明,在 values-v19 的文件夹下新建一个 style 文件,

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
    
  2. 设置并在该文件夹下添加 dimens 文件,设置 toolbar padding 为24dp

    <dimen name="toolbar_padding_top">24dp</dimen>
    
  3. 在 values 文件夹设置同名 dimens 的值为 0dp

    <dimen name="toolbar_padding_top">0dp</dimen>
    

    该属性需要在你的 Toolbar 中设置一下 paddingTop 并引用该 dimens 值,这样在不同版本的手机上,就会自动选择不同的值。

  4. 并在app中的 baseActivity 类中实现如下代码:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_base);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }
    }
    

    在代码中实现上述代码是因为国内有些 rom 如果单纯在 style 文件中设置 windowTranslucentStatus 可能导致设置无效。所以在 Activity 中再次设置一遍 。

  5. 最后不要忘了在 清单文件中应用你设置的主题。

上述为薄荷公司的实现方式如果有不明白的地方请看「stormzhang」的博客,薄荷TOOLBAR(ACTIONBAR)的适配方案


小米手机,魅族手机状态栏颜色适配

国内某些知名手机品牌,对原生 rom 进行深度优化然后改造了属于自己的 rom,但是这样对开发者来说可能就是一定程度上的灾难,比如 小米和魅族 rom 已经自己内置修改状态栏为白底透明的字体颜色为白色的,所以对于上述状态栏适配的话:如果 app 的标题栏是深色主题的还好,如果是浅色的如我们的 app 是白色的那么就会出现,进了我们 app 还想看时间,哈哈做梦吧。幸运的是小米和魅族都给了对应的解决方案,通过解决方案可以修改 app 内部的状态栏可以设置为黑色字体:

public static boolean MIUISetStatusBarLightMode(Window window, boolean dark) {
        boolean result = false;
        if (window != null) {
            Class clazz = window.getClass();
            try {
                int darkModeFlag = 0;
                Class layoutParams = Class.forName("android.view.MiuiWindowManager$LayoutParams");
                Field field = layoutParams.getField("EXTRA_FLAG_STATUS_BAR_DARK_MODE");
                darkModeFlag = field.getInt(layoutParams);
                Method extraFlagField = clazz.getMethod("setExtraFlags", int.class, int.class);
                if (dark) {
                    extraFlagField.invoke(window, darkModeFlag, darkModeFlag);//状态栏透明且黑色字体
                } else {
                    extraFlagField.invoke(window, 0, darkModeFlag);//清除黑色字体
                }
                result = true;
            } catch (Exception e) {

            }
        }
        return result;
    }

对应魅族的修改方法是:

 public static boolean FlymeSetStatusBarLightMode(Window window, boolean dark) {
        boolean result = false;
        if (window != null) {
            try {
                WindowManager.LayoutParams lp = window.getAttributes();
                Field darkFlag = WindowManager.LayoutParams.class
                        .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON");
                Field meizuFlags = WindowManager.LayoutParams.class
                        .getDeclaredField("meizuFlags");
                darkFlag.setAccessible(true);
                meizuFlags.setAccessible(true);
                int bit = darkFlag.getInt(null);
                int value = meizuFlags.getInt(lp);
                if (dark) {
                    value |= bit;
                } else {
                    value &= ~bit;
                }
                meizuFlags.setInt(lp, value);
                window.setAttributes(lp);
                result = true;
            } catch (Exception e) {

            }
        }
        return result;
    }

最后我们需要在我们的BaseActivity 中加入适配代码:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_base);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }
        
        MIUISetStatusBarLightMode(this.getWindow(), true);
        FlymeSetStatusBarLightMode(this.getWindow(), true);
    }

小米上实现效果:

看起来还不错,但是之后看到在华为手机 5.0 以上的效果是这样的:

这个可能就是各个rom优化完以后的效果,作为一个精益求精的开发者,我认为华为上这个效果实在是太丑了。那么有没有更好的实现方案呢?

期间试了网上各种5.0 以上的状态栏适配效果,在华为手机上都不太理想,大家都知道 Android 6.0 系统已经发布近两年时间了,国内各个应用厂商,也开始适配新的机型,所以我们考虑的是,为了达到不同手机上效果一致,所以就不采用任何第三方的方案了:『利用系统自带的api,实现 Android 6.0 以上的状态栏适配』


利用系统自带的api,实现 Android 6.0 以上的状态栏适配

因为之前采用了薄荷公司的适配方法,要修改的话就需要在最好的改动的情况下进行修改:

  1. 修改 dimens 文件夹的 <dimen name="toolbar_padding_top">0dp</dimen> 均为 0dp;

  2. 修改主题样式 将values-v19 修改为 values-v23 并且在styles 文件中就修改主题为:

        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:colorPrimaryDark">@color/title_color</item>
            <item name="android:colorPrimary">@color/white</item>
            <item name="android:colorAccent">@color/white</item>
            <item name="windowNoTitle">true</item>
        </style>
    
  3. 修改 BaseActivity 中的为:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 系统 6.0 以上 状态栏白底黑字的实现方法
        this.getWindow()
            .getDecorView()
            .setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        
        MIUISetStatusBarLightMode(this.getWindow(), true);
        FlymeSetStatusBarLightMode(this.getWindow(), true);
    }
    

运行一下看下在华为手机上的效果:

Perfect! 这个效果老板和UI都很满意,问题也圆满解决了,我怕其他机型会有意外于是跑遍了公司所有的测试机和同事手机效果都一致,所以还算可以吧。


总结

个人认为,谷歌官方不推荐做的如果你非要做,要么就需要踩很多坑,要么最终实现了效果也不是很理想,所以如果你的 app ,是像我们一样的白色状态栏的主题,那么就可以试一试我们这个方法。

android
Web note ad 1