android沉浸式佈局詳解

android沉浸式佈局詳解

1. 沉浸式佈局簡介

沉浸，何爲沉浸？我所理解的就是讓用戶身臨其境，儘量不被其他環境因素所幹擾。在用戶打開一個app的時候，能讓用戶感覺到界面乾淨簡潔，沒有和這個app無關的內容，就算是做到了這一點了。那麼什麼是和你的app關聯不大的呢，其實也沒有多少東西，無非就是一個頂部的狀態欄和一個下部的虛擬按鍵而已。這兩樣東西，第一，會佔據一些你能佈局的空間，其次他們的風格如果和你的app格格不入的話，也會影響app的美觀，所以，今天我們就來談談如何打造沉浸式交互體驗。

---

2. 沉浸式佈局的應用

我理解的沉浸式佈局可以分爲兩種,一種是真沉浸式,一種是僞沉浸式,下面先介紹下這兩種模式:

真沉浸式:

在這裏先貼上一張官方給的圖片:

如上圖中(按序號):

1. 非沉浸式佈局
這種非沉浸式佈局可以看到,頂部的狀態欄和底部的虛擬按鍵都是黑色的,與整體app的風格顯得很不搭.

2. 沉浸式佈局第一次出現時
在用戶第一次進入沉浸式的時候,會提示用戶如何從沉浸式佈局中呼出系統的導航欄和狀態欄.

3. 全沉浸式佈局
可以看到界面三中除了app的內容,頂部的狀態欄和底部的導航欄都被隱藏不可見了,不過用戶還是可以通過邊緣區域向內滑動來呼出狀態欄和虛擬按鍵,此種佈局適用於需要全屏顯示的時候,比如繪畫app,播放類app或者用在歡迎頁也是個不錯的選擇.

//全沉浸式佈局
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE
                |View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                |View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                |View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                |View.SYSTEM_UI_FLAG_FULLSCREEN
                |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

4. 半沉浸式佈局
這種佈局可能用到的會多一些,讓頂部狀態欄和底部虛擬按鍵半透明化,既不會影響用戶的操作,也可以達到相差無幾的效果.不過這種佈局可能會導致被狀態欄和虛擬按鍵所遮住的部分UI無法交互的問題,需要考慮到設計的問題.

//半沉浸式佈局
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE
                |View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                |View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

僞沉浸式:

這種沉浸式完全是個人的理解,官方並沒有相關概念,算是一種是針對第四種半沉浸式佈局侷限性的一種解決方案吧.在實際使用第四種介紹的沉浸式佈局的時候可能會遇到這種情況,你想讓頂部導航欄透明,但又不希望因爲透明讓後面的佈局被擋住,就像下面這種情況:

可以看到按鈕被擋住了,這顯然不是我們想要的效果,對於這種情況有兩種解決方案:

• 方案一: 獲取頂部狀態欄的高度,然後做一個空的佈局佔位,也可以直接設置按鈕的上邊距,不過做成空佈局簡單一些利於做適配一些,在不支持沉浸式的手機上時可以去掉這個空佈局就不會有留白的情況,一般狀態欄的高度是25dp,如果非要算出他的高度的話可以通過[獲取狀態欄高度]來獲取.

            //透明狀態欄
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
                //透明導航欄
                //getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
                //沉浸後用來佔位的視圖顯示
                headPadding.setVisibility(View.VISIBLE);
            }else {
            //這裏做的是不支持沉浸式的適配
                headPadding.setVisibility(View.GONE);
            }

• 方案二: 如果只是單純的需要讓狀態欄的顏色和主題的顏色相配的話,可以通過調節狀態欄的顏色來達到這種效果:

//改變狀態欄顏色
getWindow().setStatusBarColor(getColor(R.color.colorPrimary));
//改變底部虛擬按鍵顏色
getWindow().setNavigationBarColor(getColor(R.color.colorPrimary));

//注:顏色可以通過配合使用getWindow().getDecorView().setSystemUiVisibility(|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)+設置顏色的透明度達到一樣的效果

---

3. 沉浸式佈局的屬性詳解

getWindow().getDecorView().setSystemUiVisibility的具體可用屬性(可多個共用,屬性之間用 | 號隔開)

重要屬性	註釋
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION	去除底部虛擬按鍵的佔位
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION	保留底部虛擬按鍵的佔位但去除它的ui
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN	去除頂部狀態欄的佔位
View.SYSTEM_UI_FLAG_FULLSCREEN	保留頂部狀態欄的佔位但去除它的ui
View.SYSTEM_UI_FLAG_LAYOUT_STABLE	防止系統欄隱藏時內容區域大小發生變化
View.View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY	(如果有該屬性)在全沉浸時滑動後顯示狀態欄,但過幾秒會繼續全沉浸
View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR	將狀態欄的字體變成深色(有的需要白色狀態欄時可能需要,否則看不清字)

---

— 以上