直男审美进化历程-1.沉浸状态栏

同步发表:surine.github.io

经常被女朋友调侃我的设计是直男审美。

但毕竟我不是专业设计师,我做的东西也是东抄抄西凑凑的UI,真的很难想象又会做UI,代码又写的好是何等神人也。

今天,我们来聊聊让人头疼的“沉浸”状态栏。

当然这里对于沉浸这个词纠纷也很大,具体探究可以看一看郭霖老师的文章。那么今天我们实现的效果如下。

《直男审美进化历程-1.沉浸状态栏》 1548851689585.png

我的系统是MIUI10,Android版本是Android 9,可以看到,我们的图片背景是叠在状态栏后面,然后状态栏文字是黑色字体。

这里我们实现的第一种效果就是这样,我们暂且叫做他沉浸状态栏。

  • Android 5.0 及以上
  • 上图的效果

上面是我们的Demo实现要求,如果不是你想要的,可以看下面另一种效果,这篇文章我们一共讲两个效果。

1.第一种效果

新建工程之后,我们导入了一张图片,然后在布局中加入了ImageView,预览如图中右图。

《直男审美进化历程-1.沉浸状态栏》 1548852182878.png

可以看到预览图,自上至下依次是状态栏,ActionBar,ImageView

要实现如需求图效果,先隐藏ActionBar

修改style.xml文件

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

Base application theme的parent改成noactionbar,这样我们就去掉了顶部栏。

《直男审美进化历程-1.沉浸状态栏》 1548852378427.png

这里其实可以用两种方式来配置,一种是xml方式,一种是java方式,但是某些国产系统这种方式无法实现,比如说我这个就没法实现,所以我们下面就用java方式实现。

我实现的透明方法状态栏如下

/**
     * 设置沉浸式状态栏
     * @param activity 页面
     * */
    public static void fullScreenStatusBar(Activity activity) {
        Window window = activity.getWindow();
        View decorView = window.getDecorView();
        int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
        decorView.setSystemUiVisibility(option);
        window.setStatusBarColor(Color.TRANSPARENT);//透明
    }

我们在activity里调用。

public class MainActivity extends AppCompatActivity {

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

注意,尽量放到setContentView前面,避免出现系列问题。

《直男审美进化历程-1.沉浸状态栏》 1548853162679.png

我们可以看到头部已经出现达成了效果。

但是会有一个问题,布局就会潜到状态栏后面,正常方法都是为控件设置

android:fitsSystemWindows="true"

属性,但是MIUI系统上,哇!臣妾做不到呀!

这个属性没!有!用!

设置上之后就是大白状态栏。

只能优化你的布局了,为你要显示的内容搞宽一点,按钮标题什么的,加一个margin属性,就可以满足你的需求了。

那么我们来写一个状态栏文字颜色的方法。

/**
     * 设置状态栏文字颜色
     * @param activity UI
     * @param dark 是否黑色               
     * */
public static void setStatusBarTextColor(Activity activity, boolean dark) {
        View decor = activity.getWindow().getDecorView();
        if (dark) {
            decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        } else {
            decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        }
    }

这里是Google原生系统的方法。

可以看到是极其简单的,设置setSystemUiVisibility方法的TAG就可以达到相应的效果。

我们调用一下。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SystemUI.fullScreenStatusBar(this);
        SystemUI.setStatusBarTextColor(this,true);
        setContentView(R.layout.activity_main);
    }
}

注意这里的顺序,必须先设置透明状态栏在设置文字颜色。

我们来看一下效果。

当然,如果每次都这么调用未免太过麻烦,你可以写一个封装。

/**
     * 对外接口(Google原生)
     * 配置沉浸状态栏
     * @param activity UI
     * @param dark 通知栏文字颜色是否为黑色,true为黑色
     * */
    public static void setStatusBarUI(Activity activity,boolean dark){
        SystemUI.fullScreenStatusBar(activity);
        SystemUI.setStatusBarTextColor(activity,dark);
    }

就可以一步实现我们想要的效果。

《直男审美进化历程-1.沉浸状态栏》 1548854388119.png

当然为了每个activity不同需求的不同效果,我们就不往基础Activity里写了。

2.第二种效果

《直男审美进化历程-1.沉浸状态栏》 1548854214814.png

这里我在酷安截的图(MIUI系统截图就这样,状态栏显示不好),这个效果实际上是半透明的状态栏。我们可以直接修改我们之前写过的方法来实现。

我们其实可以想到,这个状态栏其实就是透明色改成了半透明色,我这里把刚才的方法修改了一下


    public static void fullScreenStatusBar(Activity activity) {
        Window window = activity.getWindow();
        View decorView = window.getDecorView();
        int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
        decorView.setSystemUiVisibility(option);
        window.setStatusBarColor(activity.getResources().getColor(R.color.mycolor));
    }

取了一个颜色。

    <color name="mycolor">#75898989</color>

半透明的样子,

《直男审美进化历程-1.沉浸状态栏》 1548854737758.png

然后形成了一个半透明的遮罩。

当然我们可以传值啦。

新建一个方法吧。

public static void setStatusBarColor(Activity activity,int color) {
    Window window = activity.getWindow();
    View decorView = window.getDecorView();
    int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
    decorView.setSystemUiVisibility(option);
    window.setStatusBarColor(color);
}

用来设置状态栏颜色,这里我们就可以直接调用设置状态栏颜色啦!

3.总结

Android系统碎片化太严重,国产系统又如此之多,所以适配起来比较麻烦,这里还是希望国产手机快点跟进google官方的方法吧,这里如果你的系统和版本有所不同,所以如果遇到不生效的情况下,还需要多多探索。

    原文作者:做梦枯岛醒
    原文地址: https://www.jianshu.com/p/f2a75723ae3f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞