Android 沉浸式状态栏

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android 沉浸式状态栏相关的知识，希望对你有一定的参考价值。

参考技术A 沉浸式状态栏是一种比较常见的UI风格，接下来就去看看怎么实现它。

在styles.xml里增加TranslucentTheme，我们这里minSdkVersion 是以21为准，低于安卓5.0以下的手机很少了，就不适配了。

对于这种没有标题栏，图片沉浸到状态栏的效果，我们已经实现了。如果是有标题栏呢？比如加个Toolbar会变成下面这样：

对于有标题的页面，我们希望状态栏颜色跟标题栏一样就行了，不希望标题栏上移跟状态栏重叠，我们可以在布局文件根视图设置如下属性，这个相当于设置了个padding让状态栏下移，当然，为了让状态栏颜色跟标题栏一样，你还需要给根视图设置一样的背景色（因为状态栏实际是透明的）。

运行看看,已经实现了我们的要求。

透明状态栏和沉浸式状态栏

从Android4.4开始提供的沉浸式状态栏，让APP设计得更优美，很多APP都采用了。对于沉浸式状态栏的理解,很多人都表达不太一样，在这里根据自己的理解分为透明状态栏和沉浸式状态栏，分别对4.4和5.0进行适配。

布局

1
2
3
4
5
6
7
8
9
10
<RelativeLayout 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:src="@mipmap/bg"
        android:scaleType="fitXY"/>
</RelativeLayout>

透明状态栏

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)支持4.4及以上版本，透明(4.4以上)，半透明(5.0以上))，所以5.0以上全透明单独适配。

1
2
3
4
5
6
7
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
}else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

技术图片

透明状态栏和导航栏

代码设置:

1
2
3
4
5
6
7
8
9
10
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    getWindow().setNavigationBarColor(Color.TRANSPARENT);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

技术图片

真正的沉浸式状态栏

状态栏和导航栏在4.4以上半透明，在5.0以上不透明。

1
2
3
4
5
6
7
8
9
10
11
12
public void (大专栏  透明状态栏和沉浸式状态栏"keyword">boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
        }
    }

技术图片

ToolBar和状态栏颜色一致

主要有两种情况：纯色和渐变色。

纯色

最简单的方式就是colorPrimary和colorPrimaryDark设为同一个颜色:

1
2
3
4
5
6
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorAccent</item>
</style

在代码中设置的话，SDK21及以上可以使用getWindow().setStatusBarColor()方法设置颜色，在SDK19及以上需要找到状态栏View,然后设置背景颜色

1
getWindow().setStatusBarColor(Color.TRANSPARENT);

还可将状态栏的颜色设为透明，然后将ToolBar的内容扩展到状态栏上，具体方法看下面渐变色的介绍

渐变色

要实现渐变色，ToolBar和状态栏的颜色不好单独设置，可以给ToolBar设置颜色后扩展到状态栏上。
渐变色可以使用shape创建，也可以用图片。使用gradient设置渐变色：

1
2
3
4
5
6
7
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="#7f99a8"
        android:endColor="#8ea8b7"
        android:type="linear"/>
</shape>

toolbar.setFitsSystemWindows(true)将ToolBar的内容扩展到状态栏，让ToolBar的内容不与状态栏重叠。在代码中实现：

1
2
3
4
5
6
7
8
9
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    toolbar.setFitsSystemWindows(true);
}else if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    toolbar.setFitsSystemWindows(true);
}

技术图片

以上是关于Android 沉浸式状态栏的主要内容，如果未能解决你的问题，请参考以下文章

Android 实现沉浸式状态栏

ionic3 沉浸式状态栏

Android状态栏着色(非沉浸式状态栏)

android -------- 沉浸式状态栏和沉浸式导航栏（ImmersionBar）

Android---沉浸式状态栏

Android沉浸式模式状态栏