Android 沉浸式状态栏的多种样式

阿策小和尚

发布于 2019-08-12 16:08:12

1.4K0

发布于 2019-08-12 16:08:12

和尚我最近正在处理客户端顶部沉浸式展示图片，借此整理了一下和尚自己研究测试的沉浸式状态栏。沉浸式状态栏大家都很熟悉，即 APP 界面图片延伸到状态栏，应用本身沉浸于状态栏，即顶部不会默认展示系统的黑条。和尚我技术有限，理解不透彻，仅分享一下自己应用测试中可以呈现的几种样式。

公共的步骤：

布局文件中添加使用 Toolbar 控件(纯色 Toolbar 背景色为颜色，图片 Toolbar 样式设置背景色为图片或添加一个 ImageView 控件)，在文件根布局与 Toolbar 中添加 android:fitsSystemWindows="true"，这个很重要，可以使背景图片延伸至状态栏，当然在 Java 文件中设置一样的效果；

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:fitsSystemWindows="true">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

设置主题样式，一般是三个 style.xml 文件，分别是 values (默认)、 values-v19 (处理 Android4.4 版本) 和 values-v21 (处理 Android5.0以后的半透明)；

values style.xml
<style name="ToorbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowActionBar">false</item>
</style>

values-v19 style.xml
<style name="ToorbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">true</item>
</style>

values-v21 style.xml
<style name="ToorbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowActionBar">false</item>
</style>

Java 代码中处理导航栏变黑和透明的主题版本判断；

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val window = window
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.statusBarColor = resources.getColor(R.color.colorAccent)
    window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
}

纯色 Toolbar 样式

正常纯色 Toolbar 样式

纯色 Toolbar 在使用中一般会将顶部状态栏设置与 Toolbar 背景色一致；

val window = window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.statusBarColor = resources.getColor(R.color.colorAccent)

被遮挡操作栏 Toolbar

在测试过程中会出现底部虚拟操作按纽栏目被隐藏，如下图，此时应注意设置 systemUiVisibility 属性。

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

无状态栏 Toolbar 样式(一般不会应用)

无状态栏 Toolbar 样式一般不会在日常中使用，但是测试的过程中发现，分享给大家，其根本原因是主题中 <item name="android:windowFullscreen">true</item>，其他处理上面完全相同。

<style name="ToorbarNoBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

图片 Toolbar 样式

图片 Toolbar 样式，一般分两种：一种是设置 Toolbar 背景图 background；另一种是添加一个 ImageView 控件。和尚我用的是作为 Toolbar 背景图 background 方式处理，使用 ImageView 控件时还需要单独处理图片，并有部分拉伸的可能。

图片作为布局背景沉浸样式

图片作为布局背景样式

图片被拉伸

图片作为布局背景的方式比较简单，方式与公共的相同，只是不需要 Toolbar 而已。
测试发现，若将根布局的高设为 android:layout_height="wrap_content" 时图片正常展示，如果为 android:layout_height="match_parent" 则图片会被拉伸，当然和尚我认为根布局设置为 wrap_content 方式是不合理的。
和尚我的解决方法是使用 layer-list 的 drawable，类似于启动页初始加载时的样式。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary"></item>
    <item android:top="26dp">
        <bitmap
            android:gravity="top|center_horizontal"
            android:src="@mipmap/icon_bg" />
    </item>
</layer-list>

Tips1：还有一种样式与沉浸式展示效果一样，就是折叠布局 CollapsingToolbarLayout 折叠后的效果也是沉浸式状态，可以固定折叠后的状态，但是并不建议这样处理，只是偶然想到而已，各位有兴趣可以研究一下。 Tips2：使用 Toolbar 时，建议不要再多添加一层布局 Layout，需要的话可以用 CoordinatorLayout。

<!-- 不建议用： -->
<LinearLayout
    android:id="@+id/user_header_new_login_lay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:id="@+id/test_tb"
        android:fitsSystemWindows="true"
        android:layout_height="100dp">
    </android.support.v7.widget.Toolbar>
</LinearLayout>
<!-- 建议使用： -->
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:elevation="0dp">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:id="@+id/test_tb"
            android:fitsSystemWindows="true"
            android:layout_height="100dp">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

GitHub 实例