fitsSystemWindows的理解與沉浸式狀態欄實現

參考

android中fitsSystemWindows的用處
我們為什么要用fitsSystemWindows?
全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”的實現
Android開發:Translucent System Bar 的最佳實踐
Android 沉浸式狀態欄攻略 讓你的狀態欄變色吧

背景

在實現沉浸式狀態欄時,我們會用到android:fitsSystemWindows="true"這個屬性,對于該屬性網上給出的解釋實在有些模糊,這里我先描述我對這個屬性的理解,理解后再來實現沉浸式狀態欄效果。

個人理解

在設置了透明狀態欄(StatusBar)或者導航欄(NavigationBar)之后,activity的內容會延伸至對應的區域,使得該區域出現重疊現象,這對內容包含交互控件的情況影響尤其巨大,為了解決這個情況,fitsSystemWindows屬性出現了,我們可以為任何view添加此屬性,設置了該屬性的view的所有padding屬性將失效,并且系統會根據情況給該view添加paddingTop和paddingBottom(當設置透明狀態欄時,系統會為該view添加一個值等于狀態欄高度的paddingTop,當設置了透明導航欄時,系統會為該view添加一個值等于導航欄高度的paddingBottom)。

在默認情況下,多個view設置該屬性時,只有最外層的view才會起作用;我們也可以通過覆寫自定義view的一些方法來決定自身的處理,及子view是否有機會截斷并對fitsSystemWindows做出自己的反應,如DrawerLayout、CoordinatorLayout和CollapsingToolbarLayout就使用了自定義fitsSystemWindow(難怪給drawerLayout設置該屬性時和我們理解的行為不一致)。

有了以上的理解,我們可以來動手實現沉浸式狀態欄了。

沉浸式狀態欄

我們要實現的效果有以下兩種:

  1. 背景圖片填滿了整個屏幕。
  2. 狀態欄和actionBar顏色一致。

第一種效果:

我們只需要把內容延伸至狀態欄和導航欄,然后給根布局設置圖片背景,若需要內容不出現在狀態欄和導航欄區域則再添加android:fitsSystemWindows="true"既可。

  1. 在values、values-v19、values-v21的style.xml都設置一個 Translucent System Bar 風格的Theme。

values/style.xml

<style name="AppTheme.Image" parent="AppTheme"/>

values-v19/style.xml和values-v21/style.xml

<style name="AppTheme.Image" parent="AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>
  1. 給activity設置theme。
<activity android:name=".ImageActivity"
    android:theme="@style/AppTheme.Image"/>
  1. 布局添加背景圖片和android:fitsSystemWindows="true"。
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@drawable/image"
    tools:context="com.example.myfitwindowsystems.ImageActivity">

</RelativeLayout>

5.0效果:


image.png

4.4效果:


image.png

若想要去掉5.0系統的半透明狀態欄,我們可以設置狀態欄顏色為透明,想要設置狀態欄,那么就不能隱藏掉狀態欄了,因此設置如下:

values-v21/style.xml

<style name="AppTheme.Image" parent="AppTheme">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

第二種效果

別管兼容4.4了~~ 現在都8.1了~~ 直接修改statusBar顏色不就美滋滋了~~

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
    getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimary));
}

或者修改values-v21/style.xml

<style name="AppTheme.Color" parent="AppTheme">
    <item name="android:statusBarColor">@color/colorPrimary</item>
</style>

算了,還是寫一下兼容寫法吧

  1. 添加theme

values-v19/style.xml

<style name="AppTheme.Color" parent="AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
</style>

values-v21/style.xml

<style name="AppTheme.Color" parent="AppTheme">
    <item name="android:statusBarColor">@color/colorPrimary</item>
</style>
  1. 設置theme
<activity android:name=".ColorActivity"
    android:theme="@style/AppTheme.Color">
  1. 修改布局文件
    在toolbar添加android:fitsSystemWindows="true",記得高度為wrap_content。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.myfitwindowsystems.ColorActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@color/colorPrimary">

    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello world!"/>

</LinearLayout>
  1. activity中設置toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        setSupportActionBar(toolbar);

5.0效果:

image.png

4.4效果:


image.png

代碼:https://github.com/aqianglala/SystemUiTraining

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容