Android 將App內(nèi)容延伸至狀態(tài)欄與導(dǎo)航欄

來(lái)自我的CSDN博客分享：

大家都熟悉的Android桌面應(yīng)用，它們呈現(xiàn)出的樣式往往獨(dú)特而引人入勝。如何讓自己的應(yīng)用也能展現(xiàn)出這樣的效果呢？接下來(lái)，我將為大家介紹幾種常用的方法以及它們之間的微妙差異。

讓我們先一睹本次demo的布局和初始狀態(tài)：

初始狀態(tài)效果圖：

在開(kāi)始之前，我們需要理解幾個(gè)關(guān)鍵概念：窗口層級(jí)、窗口背景以及窗口透明度。

從API-19到API-21，Google對(duì)狀態(tài)欄和導(dǎo)航欄的窗口透明度和顏色控制進(jìn)行了更新。我們可以在主題設(shè)置中對(duì)這些進(jìn)行控制。

這里要特別注意的是，狀態(tài)欄和導(dǎo)航欄窗口屬于系統(tǒng)級(jí)窗口，而我們的Activity對(duì)應(yīng)的是應(yīng)用窗口，它們處于不同的窗口層級(jí)。雖然Activity占據(jù)了整個(gè)屏幕，但其顯示內(nèi)容的區(qū)域需要排除疊加在其上的不透明系統(tǒng)窗口。關(guān)于窗口的計(jì)算和繪制過(guò)程，推薦大家閱讀老羅的博文：“Android窗口管理服務(wù)WindowManagerService計(jì)算Activity窗口大小的過(guò)程分析”。

接下來(lái)，我們將通過(guò)主題設(shè)置來(lái)控制導(dǎo)航欄和狀態(tài)欄的透明度，并比較兩種設(shè)置透明方式的效果。

初始桌面與啟動(dòng)Activity效果圖：

從圖中我們可以看到，雖然導(dǎo)航欄和狀態(tài)欄變得透明，但應(yīng)用窗口顯示的內(nèi)容仍然僅限于系統(tǒng)窗口之外的區(qū)域，并未擴(kuò)展到狀態(tài)欄和導(dǎo)航欄之下。

當(dāng)我們進(jìn)一步調(diào)整設(shè)置后，應(yīng)用的內(nèi)容布局可以延伸到狀態(tài)欄和導(dǎo)航欄下方。這時(shí)，我們需要關(guān)注`android:windowTranslucentStatus`和`android:windowTranslucentNavigation`的官方說(shuō)明。設(shè)置這些標(biāo)志位相當(dāng)于讓View申請(qǐng)?zhí)囟ǖ牟季謱傩?。值得注意的是，即使布局延伸到狀態(tài)欄和導(dǎo)航欄區(qū)域，相應(yīng)的內(nèi)容也可能被這些系統(tǒng)欄所遮擋。為了解決這個(gè)問(wèn)題，我們可以在布局的根視圖上設(shè)置`fitsSystemWindows`為true，這樣系統(tǒng)會(huì)自動(dòng)為視圖添加一個(gè)與系統(tǒng)欄高度相等的padding。

效果展示：

我們還要了解`SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION`和`SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN`這兩個(gè)標(biāo)志位。根據(jù)官方說(shuō)明，它們主要用于動(dòng)態(tài)切換隱藏或顯示系統(tǒng)導(dǎo)航欄和狀態(tài)欄，常見(jiàn)于書籍閱讀應(yīng)用、視頻播放應(yīng)用等。而對(duì)于全屏游戲類應(yīng)用，推薦使用window flag來(lái)實(shí)現(xiàn)布局延伸。

通過(guò)上述方法，我們可以將應(yīng)用內(nèi)容巧妙地延伸到狀態(tài)欄和導(dǎo)航欄，提升用戶體驗(yàn)。關(guān)于透明導(dǎo)航欄/狀態(tài)欄API的使用及uniapp微信小程序自定義導(dǎo)航欄詳解

一、透明導(dǎo)航欄/狀態(tài)欄API的使用限制與解決方案

在移動(dòng)開(kāi)發(fā)領(lǐng)域，透明導(dǎo)航欄和狀態(tài)欄的API使用往往受限于特定的系統(tǒng)版本。通常，API-19及以上版本才能支持這些高級(jí)功能。對(duì)于API-1或更低版本，有一種方案可以實(shí)現(xiàn)布局內(nèi)容全屏。具體而言，通過(guò)設(shè)置FLAG_LAYOUT_NO_LIMITS標(biāo)志，可以在一定程度上模擬全屏效果。這一設(shè)置源于對(duì)Android原生Launcher和Keyguard源碼的參考，但其窗口設(shè)置的詳細(xì)原理尚待進(jìn)一步探索，期待有相關(guān)領(lǐng)域的大神指點(diǎn)。需要注意的是，在這種方法下，傳統(tǒng)的fitsSystemWindows屬性設(shè)置為“true”將無(wú)效，布局位置需自行精確控制。

二、uniapp微信小程序自定義導(dǎo)航欄的重要性與挑戰(zhàn)

在uniapp多端開(kāi)發(fā)環(huán)境下，默認(rèn)的導(dǎo)航欄往往難以滿足各種業(yè)務(wù)需求。為了提升用戶體驗(yàn)并適配不同平臺(tái)，自定義導(dǎo)航欄顯得尤為重要。以微信小程序?yàn)槔?，獲取狀態(tài)欄的高度相對(duì)簡(jiǎn)單，可以通過(guò)uni.getSystemInfoSync().statusBarHeight實(shí)現(xiàn)。標(biāo)題欄高度的獲取則稍顯復(fù)雜。我們可以通過(guò)計(jì)算膠囊位置來(lái)推算標(biāo)題欄高度，具體算法涉及膠囊上下邊界距離、狀態(tài)欄高度及膠囊自身的高度。在標(biāo)題欄中，我們可以通過(guò)設(shè)置一個(gè)文本區(qū)，調(diào)整其高度以匹配膠囊高度，并通過(guò)flex布局實(shí)現(xiàn)內(nèi)容的上下居中。

三、多端適配與條件編譯策略

在uniapp開(kāi)發(fā)中，狀態(tài)欄的處理方式在不同平臺(tái)（如h5、小程序、app原生平臺(tái)）間存在差異。對(duì)于h5網(wǎng)頁(yè)，我們主要依賴瀏覽器內(nèi)置的導(dǎo)航欄，樣式相對(duì)簡(jiǎn)單。而在app端，則需要結(jié)合狀態(tài)欄高度和自定義標(biāo)題欄樣式來(lái)實(shí)現(xiàn)理想效果。在封裝自定義導(dǎo)航欄時(shí)，我們需考慮多平臺(tái)條件編譯。在此，將微信小程序作為單獨(dú)處理的對(duì)象，其他平臺(tái)則視為統(tǒng)一狀態(tài)，以便于管理和維護(hù)。

四、微信小程序自定義導(dǎo)航欄的具體實(shí)現(xiàn)步驟

要實(shí)現(xiàn)微信小程序的自定義導(dǎo)航欄，可按照以下步驟進(jìn)行：

1. 獲取狀態(tài)欄高度；

2. 通過(guò)膠囊位置計(jì)算標(biāo)題欄高度；

3. 在標(biāo)題欄中添加文本區(qū)，設(shè)置合適的高度和布局；

4. 根據(jù)不同平臺(tái)特性進(jìn)行條件編譯；

5. 調(diào)試并優(yōu)化顯示效果。

五、未來(lái)展望與改進(jìn)方向

隨著移動(dòng)開(kāi)發(fā)技術(shù)的不斷進(jìn)步，透明導(dǎo)航欄和狀態(tài)欄的處理方式將更加豐富和多樣。未來(lái)，我們可以期待更多跨平臺(tái)的解決方案，以簡(jiǎn)化開(kāi)發(fā)者的工作流程。自定義導(dǎo)航欄的功能和樣式也將更加個(gè)性化，以滿足不同業(yè)務(wù)的需求。對(duì)于開(kāi)發(fā)者而言，深入研究不同平臺(tái)的特性，以及利用新技術(shù)優(yōu)化用戶體驗(yàn)將是關(guān)鍵。

第一章：封裝設(shè)備信息獲取代碼

為了項(xiàng)目中的組件和頁(yè)面能夠方便地獲取設(shè)備信息，我們將相關(guān)代碼封裝到一個(gè)統(tǒng)一的js文件中。這個(gè)文件定義了一個(gè)名為`systemInfo`的函數(shù)，用于獲取設(shè)備的系統(tǒng)信息。通過(guò)調(diào)用`uni.getSystemInfoSync()`方法，我們可以獲取設(shè)備的窗口寬度、高度、狀態(tài)欄高度等信息。根據(jù)設(shè)備的窗口寬度，我們還計(jì)算了一個(gè)縮放因子`scaleFactor`，以便在不同設(shè)備上進(jìn)行適配。對(duì)于微信小程序，我們還獲取了菜單按鈕的相關(guān)信息。我們將這些信息進(jìn)行整合并導(dǎo)出，供其他組件和頁(yè)面使用。

第二章：定義導(dǎo)航欄組件

為了支持不同平臺(tái)的自定義樣式，我們定義了導(dǎo)航欄組件。這個(gè)組件可以根據(jù)設(shè)備的信息進(jìn)行適配，呈現(xiàn)出不同的樣式。通過(guò)引入`HeadNav`組件，并在項(xiàng)目中注冊(cè)，我們可以方便地在頁(yè)面中使用導(dǎo)航欄。

第三章：跨平臺(tái)適配

在實(shí)現(xiàn)導(dǎo)航欄組件的過(guò)程中，我們充分考慮了不同平臺(tái)的適配問(wèn)題。通過(guò)封裝設(shè)備信息獲取代碼，我們可以根據(jù)不同設(shè)備的尺寸和信息來(lái)定制導(dǎo)航欄的樣式和功能。這樣，無(wú)論是在微信小程序還是在H5頁(yè)面，都能呈現(xiàn)出合適的導(dǎo)航欄效果。

第四章：條件編譯

在實(shí)際開(kāi)發(fā)中，我們可能需要根據(jù)不同的平臺(tái)或場(chǎng)景進(jìn)行條件編譯。例如，在某些H5頁(yè)面中，可能不需要顯示導(dǎo)航欄。為了實(shí)現(xiàn)這一點(diǎn)，我們可以在模板中加入條件編譯的邏輯。這樣，我們可以根據(jù)當(dāng)前頁(yè)面或平臺(tái)的特點(diǎn)，靈活地顯示或隱藏導(dǎo)航欄。

第五章：效果圖展示

我們提供了不同平臺(tái)下的效果圖展示。通過(guò)這些效果圖，我們可以直觀地看到導(dǎo)航欄在不同平臺(tái)上的表現(xiàn)效果。這有助于我們更好地理解并實(shí)現(xiàn)跨平臺(tái)的適配。

探索APP導(dǎo)航設(shè)計(jì)的奧秘：菜單與導(dǎo)航欄的重要性

一、引言

在移動(dòng)應(yīng)用的世界里，菜單設(shè)計(jì)和導(dǎo)航欄設(shè)計(jì)是構(gòu)建優(yōu)秀用戶體驗(yàn)的基石。它們?nèi)缤蛔鶚蛄海B接著用戶與應(yīng)用的各個(gè)功能。良好的設(shè)計(jì)能讓用戶輕松地在應(yīng)用中穿梭，明確自己的位置及如何到達(dá)目標(biāo)頁(yè)面。今天，我們一同探討APP導(dǎo)航設(shè)計(jì)的三大重要性。

二、結(jié)構(gòu)化產(chǎn)品內(nèi)容和功能

導(dǎo)航系統(tǒng)是APP的骨架，它支撐著內(nèi)容和功能組成的血肉。沒(méi)有導(dǎo)航，應(yīng)用中的內(nèi)容和功能將如同一盤散沙，無(wú)法形成完整體系。用戶在應(yīng)用中將迷失方向，不知所措。而優(yōu)秀的導(dǎo)航系統(tǒng)能將零散的內(nèi)容和功能組織成一個(gè)有結(jié)構(gòu)、有層次的系統(tǒng)，按照產(chǎn)品的信息架構(gòu)圖進(jìn)行連接，展現(xiàn)給用戶清晰的使用路徑。

三、突出核心功能

每個(gè)APP都有其核心功能，如微信的即時(shí)聊天、京東的購(gòu)物、易到的打車、貓眼的買電影票等。核心功能對(duì)目標(biāo)用戶來(lái)說(shuō)至關(guān)重要。在導(dǎo)航設(shè)計(jì)中，應(yīng)將核心功能置于用戶最易接觸到的位置，充分展現(xiàn)，吸引用戶的注意力。而其他功能和擴(kuò)展功能應(yīng)適度隱藏，甚至刪減，避免用戶在繁雜的選項(xiàng)中迷失。導(dǎo)航系統(tǒng)的巧妙設(shè)計(jì)能突出核心功能，引導(dǎo)用戶關(guān)注重點(diǎn)。

四、扁平化用戶任務(wù)路徑

沒(méi)有良好的導(dǎo)航，用戶為完成任務(wù)可能如同無(wú)頭蒼蠅般四處碰壁，即使付出巨大努力也難以達(dá)成目標(biāo)。通過(guò)對(duì)用戶行為的深入分析，建立合理的導(dǎo)航系統(tǒng)，設(shè)計(jì)順暢的任務(wù)路徑，能讓用戶明確方向，不再在各模塊間迷失。優(yōu)秀的導(dǎo)航設(shè)計(jì)能夠扁平化用戶的任務(wù)路徑，減少操作成本，提高操作效率，從而大幅提升用戶體驗(yàn)。

五、總結(jié)

APP的菜單設(shè)計(jì)和導(dǎo)航欄設(shè)計(jì)是提升用戶體驗(yàn)的關(guān)鍵環(huán)節(jié)。它們整合產(chǎn)品的各項(xiàng)功能，為用戶提供清晰的導(dǎo)航路徑。合適的導(dǎo)航設(shè)計(jì)直接關(guān)聯(lián)到產(chǎn)品的功能運(yùn)作和界面風(fēng)格。通過(guò)結(jié)構(gòu)化產(chǎn)品內(nèi)容和功能、突出核心功能、扁平化用戶任務(wù)路徑，我們可以構(gòu)建出高效、易用的導(dǎo)航系統(tǒng)，為用戶提供流暢、愉快的使用體驗(yàn)。希望本文的內(nèi)容能對(duì)大家的學(xué)習(xí)有所啟發(fā)和幫助。

以上就是我們今天探討的全部?jī)?nèi)容，感謝大家的閱讀！