1. 程式人生 > 其它 >Android QMUI實戰:沉浸式/適配狀態列

Android QMUI實戰:沉浸式/適配狀態列

僅通過幾行程式碼,即可完美實現頁面沉浸式效果,並輕鬆匹配換膚的色彩

近期研究QMUI換膚的實現,順便分析了下QMUI的沉浸式。
網上已有很多關於QMUI實現頁面沉浸式的文章,簡而言之:複雜了。

本期,我們僅通過幾行程式碼,即可完美實現頁面沉浸式效果,並輕鬆匹配換膚的色彩。

1、工程

為了節省時間,我們就不再單獨新建工程了。直接基於上期QMUI換膚的工程程式碼,進行開發。
demo原始碼下載在該文章中:《Android QMUI實戰:實現APP換膚功能,並自動適配手機深色模式》
https://www.cnblogs.com/qixingchao/p/15417834.html

注意事項:在工程的gradle中有依賴QMUI,如果想以自己的工程進行沉浸式開發實驗,請先在gradle中配置QMUI依賴:

implementation 'com.qmuiteam:qmui:2.0.0-alpha10'

2、實現頁面沉浸式的程式碼

僅1行即可:QMUIStatusBarHelper.translucent(this);

分析原始碼,不難看出,QMUI已對不同版本的裝置進行了適配,沉浸式配置管理主要包括:
1、FLAG_TRANSLUCENT_STATUS:狀態列透明,並且變為全屏模式
2、FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS:Window負責系統bar的background 繪製,繪製透明背景的系統bar(狀態列和導航欄),然後用getStatusBarColor()和getNavigationBarColor()的顏色填充相應的區域
3、setStatusBarColor(Color.TRANSPARENT):設定狀態列顏色透明(直接透視,並可見到父容器的顏色)

設定後的效果圖:

3、預留出狀態列的空間:

上圖中,狀態列與頁面的Topbar重合了,我們需要為頁面預留出狀態列的空間。
實現方式很簡單,也是一行程式碼:android:fitsSystemWindows="true"

設定後的效果圖:

3、設定狀態列與頁面Topbar一樣的顏色:

上圖中,狀態列的空間雖然預留出來了,但是狀態列顏色與頁面Topbar不一致,不美觀。
我們可以調整下佈局檔案,將父容器背景色調整為與Topbar一樣的色彩即可。

這樣調整後,父容器顏色變成深色了,但是常規設計中,頁面背景色都是淺色,那麼我們可以再為頁面內容套一層,並設定淺色,如自定義的:?attr/colorPrimary

設定後的效果圖:

4、匹配換膚的色彩

我們只需要在佈局檔案中設定顏色時,使用QMUI的Skin屬性即可,例如:app:qmui_skin_background。

5、總結

至此,QMUI實現頁面沉浸式效果演示結束。
我們不需要關心各種Android版本、各種機型的適配,只需要簡單的呼叫即可,程式碼也簡潔易維護。

瞭解了QMUI的沉浸式過程,我們也可實現更復雜的沉浸式效果,例如容器背景是圖片、是漸變色等等,
因為佈局檔案完全由我們自主管控,想怎麼寫就怎麼寫,吼吼!!!

demo原始碼:
連結: https://pan.baidu.com/s/1NAuVowHuXMBeQNWX82mZkQ
提取碼: b5x3