開啓全面屏體驗 | 手勢導航 (一)

做者 / Chris Banes, Android 開發者關係團隊工程師

本文是手勢導航連載的第一篇文章，在接下來的時間裏，咱們將會爲你們帶來一系列手勢導航的話題，敬請關注！

咱們在 Android 10 中添加了新的系統導航模式，用戶能夠經過手勢交互執行後退、返回至主屏以及打開設備助手等操做。

△ Android 10 中新加入的手勢交互

經過使用手勢交互來執行系統導航，應用可使用到更多的屏幕空間。這有助於您爲用戶打造更加沉浸的體驗。

在大多數設備上，用戶都能選擇他們喜歡的導航模式。現有的三鍵導航模式 (包含後退、返回首頁以及切換最近使用的應用) 會被保留。搭載 Android 10 及以上版本系統的全部設備都要求保留這一導航模式。

您能夠經過 Android 系統 UI 產品經理的文章《Android 10 手勢導航背後的故事》瞭解手勢導航的研究和決策過程。

這篇文章是本次連載的第一篇。本系列文章會着重爲開發者們介紹如何讓應用支持手勢導航，涵蓋的主題以下:

1. 開啓全面屏體驗，讓應用的內容鋪滿整個屏幕
2. 處理與系統 UI 的視覺衝突
3. 處理與系統手勢之間的衝突
4. 各類全面屏體驗場景，以及如何適配它們

如今就讓咱們開啓 "邊到邊" 的全面屏體驗之旅。

全面屏幕體驗

我使用 "邊到邊" (edge-to-edge) 一詞來描述那種將內容鋪滿整個屏幕，以實現更沉浸視覺體驗的應用。默認狀況下，應用內容的繪製範圍從頂部狀態欄下方開始，延伸至底部導航欄上方。(狀態欄和導航欄統稱爲系統欄)

實現從邊到邊的全面屏體驗後，系統欄會覆蓋在應用內容前方。應用也得以經過更大幅面的內容爲用戶帶來更具備衝擊力的體驗。

具體來講，這意味着應用須要作兩件事:

在導航欄後面繪製內容

想要支持手勢導航，應用須要考慮的第一個因素是在導航欄後面繪製內容。因爲導航欄自身的大小和突出程度已經相比之前縮小了，所以咱們如今強烈建議，當應用在 Android 10 及以上設備中運行時，將內容拓展至導航欄後方，以提供更具吸引力的現代化 UX。

在搭載 Android 9 及如下的設備上運行時，導航欄後繪製內容是可選的，方便應用根據狀況酌情選擇。作到這些事情所需的 API 也都向前兼容至 API 21 (或 AndroidX 的對應版本)，所以支持 Android 10 如下設備所需的額外工做量很小。使用 Android 10 如下設備的用戶一樣能得到更加沉浸的體驗。咱們將它設置爲可選，僅僅是爲了最大程度地減小開發者的工做量和測試量。

在狀態欄後面繪製內容

接下來，咱們來看看屏幕頂部的狀態欄。只要您的內容和佈局容許，咱們建議儘可能把內容也拓展到狀態欄的後方。舉個具體的例子，好比像下圖那樣把一張背景圖鋪在狀態欄後面，具體的技術實現能夠參考相似 AppBarLayout 等佈局，並將其放在屏幕頂部。

但若是應用的 UI 包含一個列表，並且列表頂端還固定放着一個 Toolbar 的話，那把內容繪製在狀態欄後面就可能不合適了。一樣，有些時候把內容繪製在導航欄下面也不合適。再強調一次: 是否擴展應用內容的繪製區域徹底取決於開發者，是可選的。

如何實現

想實現 "邊到邊" 全面屏體驗分三步:

1. 請求進行全屏佈局

第一步是讓系統將咱們應用佈局擴展至系統欄後方。須要使用的 API 是視圖上的 setSystemUiVisibility()，它接受一些值，這裏咱們主要關注這麼幾個值:

view.systemUiVisibility = 
    // Tells the system that the window wishes the content to
    // be laid out at the most extreme scenario. See the docs for
    // more information on the specifics
    View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
    // Tells the system that the window wishes the content to
    // be laid out as if the navigation bar was hidden
    View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
複製代碼

設置完畢後能夠看到應用的內容出如今導航欄的後面:

△ 應用內容在全屏範圍內渲染，並且在導航欄後面

2. 更改系統欄顏色

咱們的應用佈局如今已經拓展至全屏範圍，所以須要同步更改一下系統欄的顏色，以便看清其後面的應用內容。

Android 10

在 Android 10 上，咱們只須要將系統欄顏色設爲徹底透明便可:

<!-- values-v29/themes.xml -->
<style name="Theme.MyApp">
    <item name="android:navigationBarColor">
        @android:color/transparent
    </item>

    <!-- Optional, if drawing behind the status bar too -->
    <item name="android:statusBarColor">
        @android:color/transparent
    </item>
</style>
複製代碼

在 Android 10 上，系統會負責在全部導航模式下確保系統欄的內容可見 (包括時間、圖標、拖拽條等)。這意味着這些事情再也不須要咱們操心。具體來講，系統會執行如下兩項操做之一:

1. 動態顏色適配

系統欄裏的內容會根據其後面的內容改變顏色。若是拖拽條位於淺色內容前方，它將變爲深色，在深色內容前方時則變爲淺色。

△ Android 10 上的動態顏色適配

2. 半透明遮蓋

另外，系統也能夠在系統欄後面放置一層半透明遮蓋。對此咱們最想提醒您注意的是，僅當您的應用聲明 targetSdkVersion 爲 29 時，纔會發生這種狀況。若是您的應用針對的是 SDK 28 或更低版本，則系統不會顯示遮蓋，而是提供透明的導航欄。

△ 在 Android 10 上選擇按鍵導航模式時，系統會在按鈕後方提供半透明遮蓋

這兩種操做都是爲了確保用戶始終能夠看到系統欄的內容。系統選擇採用哪一種作法取決於多個因素。若是知足如下條件，系統將使用遮蓋:

• 啓用了兩鍵或三鍵導航模式。
• 設備製造商在手勢導航模式下禁用了動態顏色適配。製造商這麼作的緣由多是設備的性能不足以支持動態色彩適配。

△ 使用手勢導航模式時系統提供的半透明遮蓋

不然，系統將使用動態色彩適應。上文中列出的條件是目前系統用來判斷的依據，在未來可能會更改。

在 Android 10 上禁用系統欄視覺保護

若是您不想讓系統執行任何自動內容視覺保護，則能夠經過在主題中將 android:enforceNavigationBarContrast 和/或 android:enforceStatusBarContrast 的值設置爲 false。

Android 9 及更早版本

若是您決定在 Android 10 如下的設備上實現全面屏應用，則應將系統欄顏色設置爲半透明，從而確保其內容可見。好比針對深色主題的系統欄，能夠先試試使用 70％ 不透明度的黑色進行遮蓋:

<!-- values/themes.xml -->
<style name="Theme.MyApp">
    <item name="android:navigationBarColor">
        #B3FFFFFF
    </item>
</style>

<!-- values-night/themes.xml -->
<style name="Theme.MyApp">
    <item name="android:navigationBarColor">
        #B3000000
    </item>
</style>
複製代碼

您可能須要根據系統欄後面顯示的內容來調整遮蓋的不透明度。對於淺色主題，能夠試試使用半透明淺色遮蓋 (如 #B3FFFFFF)。

△ 深淺兩種主題的遮蓋示例

3. 處理視覺衝突

按照本文的說明將應用設置爲全面屏後，您可能會發現應用裏有一些視圖/控件被系統欄遮住了。接下來咱們就須要處理視覺衝突，請關注咱們的微信公衆帳號，接下來將爲您推送本系列更多的文章。

本文鳴謝: Nick Butcher

點擊這裏進一步瞭解 Android 手勢導航