Android的fitsSystemWindows屬性如何使用

這篇文章主要講解了“Android的fitsSystemWindows屬性如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Android的fitsSystemWindows屬性如何使用”吧！

Android手機頂部用于顯示各種通知和狀態信息的這個欄叫做狀態欄。

通常情況下，我們應用程序的內容都是顯示在狀態欄下方的。但有時為了實現更好的視覺效果，我們希望將應用程序的內容延伸到狀態欄的背后，這種就可以稱之為沉浸式狀態欄。

那么借助android:fitsSystemWindows屬性是如何實現沉浸式狀態欄效果的呢？這個屬性為什么又總是時靈時不靈呢？接下來我們就來一步步學習和揭秘。

我相信按照絕大多數人的美好設想，android:fitsSystemWindows屬性就應該像是一個開關一樣，設置成true就可以打開沉浸式狀態欄效果，設置成false就可以關閉沉浸式狀態欄效果。但現實并非如此。

下面我們通過代碼示例來演示一下。首先為了驗證沉浸式狀態欄的效果，需要將系統的狀態欄改成透明色，代碼如下所示：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        window.statusBarColor = Color.TRANSPARENT
    }
    
}

接下來，我們給activity_main.xml的根布局加上android:fitsSystemWindows屬性，并且給該布局設置了一個背景色用于觀察效果：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff66ff"
    android:fitsSystemWindows="true">

</FrameLayout>

運行一下代碼，效果如下圖所示：

通過布局的背景色我們可以看出，該布局的內容并沒有延伸到系統狀態欄的背后。也就是說，即使設置了android:fitsSystemWindows屬性，我們也沒有實現沉浸式狀態欄效果。

但是不要著急，接下我們只需要做出一點小修改，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff66ff"
    android:fitsSystemWindows="true">

</androidx.coordinatorlayout.widget.CoordinatorLayout>

可以看到，這里只是將根布局從FrameLayout修改成了CoordinatorLayout，其他都沒有任何變化。然后重新運行程序。效果如下圖所示：

這樣就可以成功實現沉浸式狀態欄效果了。

話說為什么android:fitsSystemWindows屬性，設置在CoordinatorLayout布局上就能生效，設置在FrameLayout布局上就沒有效果呢？

這是因為，xml中的配置畢竟只是一個標記，如果想要在應用程序當中產生具體的效果，那還是要看代碼中是如何處理這些標記的。

很明顯，FrameLayout對于android:fitsSystemWindows屬性是沒有進行處理的，所以不管設不設置都不會產生什么變化。

而CoordinatorLayout則不同，我們可以觀察它的源碼，如下所示：

private void setupForInsets() {
    if (Build.VERSION.SDK_INT < 21) {
        return;
    }

    if (ViewCompat.getFitsSystemWindows(this)) {
        if (mApplyWindowInsetsListener == null) {
            mApplyWindowInsetsListener =
                    new androidx.core.view.OnApplyWindowInsetsListener() {
                        @Override
                        public WindowInsetsCompat onApplyWindowInsets(View v,
                                WindowInsetsCompat insets) {
                            return setWindowInsets(insets);
                        }
                    };
        }
        // First apply the insets listener
        ViewCompat.setOnApplyWindowInsetsListener(this, mApplyWindowInsetsListener);

        // Now set the sys ui flags to enable us to lay out in the window insets
        setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    } else {
        ViewCompat.setOnApplyWindowInsetsListener(this, null);
    }
}

可以看到，這里當發現CoordinatorLayout設置了android:fitsSystemWindows屬性時，會對當前布局的insets做一些處理，并且調用了下面一行代碼：

setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

這行代碼是一切的關鍵所在。準確來講，就是因為執行了這行代碼，我們才能將布局的內容延伸到系統狀態欄區域。

是不是感覺解密了？但事實上CoordinatorLayout所做的事情還遠不止這些。

因為沉浸式狀態欄其實會帶來很多問題。讓布局的內容延伸到狀態欄的背后，如果一些可交互的控件被狀態欄遮擋了怎么辦？這樣這些控件可能就無法點擊和交互了。

CoordinatorLayout為了解決這個問題，會對所有內部的子View都進行一定程度的偏移，保證它們不會被狀態欄遮擋住。

比如我們在CoordinatorLayout當中再添加一個按鈕：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff66ff"
    android:fitsSystemWindows="true">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

運行一下程序，效果如下圖所示：

可以看到，雖然CoordinatorLayout延伸到了狀態欄區域，但是它所包含的按鈕是不會進入狀態欄區域的，這樣就避免了可交互控件被遮擋的情況出現。

但有的朋友會說，如果有些子控件我就是想要讓它也延伸到狀態欄區域內呢？比如我在CoordinatorLayout內放了一張圖片，按照這個規則，圖片也是不會顯示在狀態欄背后的，這樣就達不到想要的效果了。

我們可以來試一下這種場景。比如在CoordinatorLayout中再添加一個ImageView，代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff66ff"
    android:fitsSystemWindows="true">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/bg"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

現在運行一下程序，效果如下圖所示：

確實，圖片是不會進入狀態欄區域的，和我們之前所解釋的理論相符合。

但是很明顯，這并不是我們想要的效果，那么有什么辦法可以解決呢？

這里我們可以借助其他布局來實現。在Google提供的諸多布局當中，并不是只有CoordinatorLayout會處理android:fitsSystemWindows屬性，像CollapsingToolbarLayout、DrawerLayout也是會對這個屬性做處理的。

現在對activity_main.xml進行如下修改：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff66ff"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/bg"
            android:fitsSystemWindows="true"
            />

    </com.google.android.material.appbar.CollapsingToolbarLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

可以看到，這里我們在ImageView的外面又包裹了一層CollapsingToolbarLayout，并且給CollapsingToolbarLayout也設置了android:fitsSystemWindows屬性，這樣CollapsingToolbarLayout就可以將內容延申到狀態欄區域了。

接著我們給ImageView同樣設置了android:fitsSystemWindows屬性，如此一來，就可以讓圖片顯示在狀態欄的背后了。

重新運行一下程序，效果如下圖所示：

需要注意的是，CollapsingToolbarLayout一定要結合著CoordinatorLayout一起使用，而不能單獨使用。因為CollapsingToolbarLayout只會對內部控件的偏移距離做出調整，而不會像CoordinatorLayout那樣調用setSystemUiVisibility()函數來開啟沉浸式狀態欄。

看到這里，相信大家都已經知道應該如何去實現沉浸式狀態欄效果了。但是可能有的朋友會說，由于項目限制的原因，他們無法使用CoordinatorLayout或CollapsingToolbarLayout，而是只能使用像FrameLayout或LinearLayout這樣的傳統布局，這種情況怎么辦呢？

其實我們知道CoordinatorLayout實現沉浸式狀態欄的原理之后，自然也就知道如何自己手動實現了，因為本質就是調用setSystemUiVisibility()函數。

現在我們將activity_main.xml改成用傳統FrameLayout布局的寫法：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff66ff">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/bg"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</FrameLayout>

為了實現沉浸式狀態欄的效果，我們手動在MainActivity當中調用setSystemUiVisibility()函數，來將FrameLayout的內容延伸到狀態欄區域：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        window.statusBarColor = Color.TRANSPARENT
        val frameLayout = findViewById<FrameLayout>(R.id.root_layout)
        frameLayout.systemUiVisibility = (SYSTEM_UI_FLAG_LAYOUT_STABLE
                or SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
    }

}

這里提醒一點，setSystemUiVisibility()函數其實已經被廢棄了。從Android 11開始，Google提供了一個新的API WindowInsetsController來實現同樣的功能，不過本篇文章就不往這方面展開了。

現在重新運行一下程序，效果如下圖所示：

可以看到，現在我們仍然實現了沉浸式狀態欄的效果，但問題是FrameLayout中的按鈕也延伸到狀態欄區域了，這就是前面所說的可交互控件被狀態欄遮擋的問題。

出現這個問題的原因也很好理解，因為之前我們是使用的CoordinatorLayout嘛，它已經幫我們考慮好到這些事情，自動會將內部的控件進行偏移。而現在FrameLayout顯然是不會幫我們做這些事情的，所以我們得想辦法自己解決。

這里其實可以借助setOnApplyWindowInsetsListener()函數去監聽WindowInsets發生變化的事件，當有監聽到發生變化時，我們可以讀取頂部Insets的大小，然后對控件進行相應距離的偏移。

修改MainActivity中的代碼，如下所示：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        window.statusBarColor = Color.TRANSPARENT
        val frameLayout = findViewById<FrameLayout>(R.id.root_layout)
        frameLayout.systemUiVisibility = (SYSTEM_UI_FLAG_LAYOUT_STABLE
                or SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)

        val button = findViewById<Button>(R.id.button)
        ViewCompat.setOnApplyWindowInsetsListener(button) { view, insets ->
            val params = view.layoutParams as FrameLayout.LayoutParams
            params.topMargin = insets.systemWindowInsetTop
            insets
        }
    }

}

可以看到，當監聽到WindowInsets發生變化時，我們調用systemWindowInsetTop即可獲取到狀態欄的高度，然后對不需要延伸到狀態欄區域的控件進行相應的偏移即可。

重新運行程序，效果如下圖所示：

感謝各位的閱讀，以上就是“Android的fitsSystemWindows屬性如何使用”的內容了，經過本文的學習后，相信大家對Android的fitsSystemWindows屬性如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！