沉浸式ui因其更好的界面一致性创肥,在Android應(yīng)用,特別是google的原生app中得到了廣泛的應(yīng)用,隨著Android版本的迭代,在6.0版本后僅需要幾個簡單的設(shè)置就可以實(shí)現(xiàn)效果很好的沉浸式體驗(yàn)灾馒。
總述
Android app默認(rèn)界面包含如下幾部分:1)頂部用于顯示時間等信息的StatusBar;
2)StatusBar下方通常有Toolbar(在較早的Android版本中為Actionbar);
3)對于無實(shí)體按鍵的機(jī)型,界面底部還有包含虛擬操作按鍵的NavigationBar遣总。
針對上述三個模塊的布局及銜接睬罗,即是打造沉浸式ui的關(guān)鍵:
1)隱藏NavigationBar;
2)app主界面(通常為Toolbar)布局向上延伸到屏幕頂端轨功;
3)StatusBar隱藏或者顯示為和app主界面(或者Toolbar)一致的風(fēng)格。
ui界面風(fēng)格的主要依賴app的theme style容达,以及對界面布局view的設(shè)置實(shí)現(xiàn)古涧。
theme style設(shè)置主要參數(shù)說明
在res/values/styles.xml下新建自定義的app主題,作為整個app的主題花盐,相關(guān)參數(shù)及說明如下蒿褂。
<style name="CurrentAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!--<item name="android:windowTranslucentStatus">true</item>-->
<!--<item name="android:windowTranslucentNavigation">true</item>-->
<item name="android:statusBarColor">@color/colorTrans</item>
<item name="android:navigationBarColor">@color/colorTrans</item>
1)這里采用的Theme繼承自Theme.AppCompat.Light.NoActionBar,該主題不包含默認(rèn)的頂部動作條(即Toolbar)卒暂。
這里需要注意,使用該Theme時
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
是必須要設(shè)置的兩個參數(shù)娄帖,否則運(yùn)行時即會觸發(fā)無法找到ActionBar的錯誤也祠。
2)注釋掉的部分
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
是Android 4.4(API 19)加入的新風(fēng)格屬性,其用途是將對應(yīng)的NavigationBar和StatusBar設(shè)置為透明色近速,實(shí)現(xiàn)的效果在Android4.4和Android5.5之后的版本上略有不同诈嘿,如下所示。該屬性設(shè)置雖然在當(dāng)時專為沉浸式ui服務(wù)削葱,statusbar有特殊的底色以區(qū)分周圍的布局奖亚;Navigationbar遮蔽了部分的布局,對界面的顯示和實(shí)際的操作都有影響析砸。
3)為避免上述問題昔字,Android5.0(API 21)后加入了如下兩個屬性
<item name="android:statusBarColor">@color/colorTrans</item>
<item name="android:navigationBarColor">@color/colorTrans</item>
將statusbar和navigationbar的風(fēng)格設(shè)置開放,開發(fā)者就可以自由的設(shè)置這兩個區(qū)域的顏色了首繁。如果希望實(shí)現(xiàn)和主布局統(tǒng)一的風(fēng)格作郭,僅需要將顏色設(shè)置為透明即可。
Activity動態(tài)設(shè)置實(shí)現(xiàn)全屏顯示的布局
在Activity的onCreate中可通過getWindow().getDecoView()獲取整個布局的視圖弦疮,進(jìn)而通過setSystemUiVisibility為布局視圖設(shè)置標(biāo)簽實(shí)現(xiàn)想要的顯示風(fēng)格夹攒。
int setup = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE
| View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
getWindow().getDecorView().setSystemUiVisibility(setup);
有更多參數(shù)可以方便實(shí)現(xiàn)不同需求的沉浸式風(fēng)格:
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
SYSTEM_UI_FLAG_FULLSCREEN
這兩個都是將當(dāng)前布局全屏顯示,不同的是胁塞,使用后者咏尝,則界面僅包含當(dāng)前布局,而不再顯示系統(tǒng)缺省的statusbar和navigationbar啸罢,這個的使用場景多為啟動界面或者宣傳界面编检;前者會將當(dāng)前布局全屏顯示,但是系統(tǒng)缺省的statusbar和navigationbar會以半透明色顯示在當(dāng)前布局上層伺糠。
SYSTEM_UI_FLAG_HIDE_NAVIGATION
隱藏navigationbar蒙谓。僅包含此項(xiàng)設(shè)置時,對于界面的任何操作都會自動將navigationbar重新調(diào)出训桶,且將hide的屬性重置為無效累驮。如果需要得到更穩(wěn)定的navigationbar隱藏效果酣倾,就需要加入如下兩個標(biāo)簽之一:
SYSTEM_UI_FLAG_IMMERSIVE
SYSTEM_UI_FLAG_IMMERSIVE_STICKY
這兩個標(biāo)簽會較長久的隱藏navigationbar,但并非永久隱藏谤专。其中使用前者時躁锡,在操作頂部或者底部系統(tǒng)菜單時,navigationbar也會被重新召回置侍。
SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
Android6.0(API23)時加入的新屬性映之,其作用是改變statusbar中信息的顯示顏色。在之前的版本中statusbar的顯示顏色是系統(tǒng)默認(rèn)的(白色)蜡坊,并不會根據(jù)當(dāng)前布局的顏色修改杠输,導(dǎo)致在淺色的頂部布局下,statusbar信息難以辨認(rèn)秕衙。加入該屬性后蠢甲,statusbar的信息顯示顏色會使用黑色。
布局view被StatusBar遮蔽的處理
單獨(dú)使用SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN時据忘,view和statusbar的顯示效果如下:圖中Toolbar布局部分被Statusbar遮蓋鹦牛,導(dǎo)致布局有些混亂,這時候需要在Toolbar的布局文件中加入
android:fitsSystemWindows="true"
布局會相應(yīng)轉(zhuǎn)變?yōu)?div id="ie6ouyt" class="image-package">