開啟全螢幕體驗 | 手勢導航 (一)
- 2019 年 11 月 22 日
- 筆記
作者 / Chris Banes, Android 開發者關係團隊工程師
本文是手勢導航連載的第一篇文章，在接下來的時間裡，我們將會為大家帶來一系列手勢導航的話題，敬請關注！
我們在 Android 10 中添加了新的系統導航模式，用戶可以通過手勢交互執行後退、返回至主屏以及打開設備助手等操作。
△ Android 10 中新加入的手勢交互 通過使用手勢交互來執行系統導航，應用可以使用到更多的螢幕空間。這有助於您為用戶打造更加沉浸的體驗。
在大多數設備上，用戶都能選擇他們喜歡的導航模式。現有的三鍵導航模式 (包含後退、返回首頁以及切換最近使用的應用) 會被保留。搭載 Android 10 及以上版本系統的所有設備都要求保留這一導航模式。
您可以通過 Android 系統 UI 產品經理的文章《Android 10 手勢導航背後的故事》了解手勢導航的研究和決策過程。
這篇文章是本次連載的第一篇。本系列文章會著重為開發者們介紹如何讓應用支援手勢導航，涵蓋的主題如下:
- 開啟全螢幕體驗，讓應用的內容鋪滿整個螢幕
- 處理與系統 UI 的視覺衝突
- 處理與系統手勢之間的衝突
- 各種全螢幕體驗場景，以及如何適配它們
現在就讓我們開啟 "邊到邊" 的全螢幕體驗之旅。
全螢幕幕體驗
我使用 "邊到邊" (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 上，系統會負責在所有導航模式下確保系統欄的內容可見 (包括時間、圖標、拖拽條等)。這意味著這些事情不再需要我們操心。具體來說，系統會執行以下兩項操作之一:
- 動態顏色適配
系統欄里的內容會根據其後面的內容改變顏色。如果拖拽條位於淺色內容前方，它將變為深色，在深色內容前方時則變為淺色。
△ Android 10 上的動態顏色適配
- 半透明遮蓋
另外，系統也可以在系統欄後面放置一層半透明遮蓋。對此我們最想提醒您注意的是，僅當您的應用聲明 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. 處理視覺衝突
