Android 如何快速打造沉浸式ui

沉浸式ui因其更好的界面一致性创肥,在Android應(yīng)用,特別是google的原生app中得到了廣泛的應(yīng)用,隨著Android版本的迭代,在6.0版本后僅需要幾個簡單的設(shè)置就可以實(shí)現(xiàn)效果很好的沉浸式體驗(yàn)灾馒。

總述

Android app默認(rèn)界面包含如下幾部分:
微信圖片_20181025230140.png

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之后的版本上略有不同诈嘿,如下所示。
1362430-8f8461b9ff5fdf98.jpg

該屬性設(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的顯示效果如下:
微信截圖_20181025235900.png

圖中Toolbar布局部分被Statusbar遮蓋鹦牛,導(dǎo)致布局有些混亂,這時候需要在Toolbar的布局文件中加入

android:fitsSystemWindows="true"

布局會相應(yīng)轉(zhuǎn)變?yōu)?div id="ie6ouyt" class="image-package">
微信截圖_20181026000203.png

Toolbar和StatusBar之間顯示了正確的位置關(guān)系勇吊。該屬性在實(shí)際使用時需要注意曼追,該屬性的實(shí)際效果即在View布局的頂部加入一個padding,padding的尺寸根據(jù)statusbar自動計(jì)算汉规,如果該屬性作用于一個viewgroup礼殊,如各種形式的layout,需要對viewgroup中的view設(shè)置相應(yīng)的padding bottom鲫忍,并設(shè)置viewgroup的

android:layout_height="wrap_content"

否則加入的padding top會使所有的子view都往下便宜膏燕,擠壓布局空間。

實(shí)現(xiàn)沉浸式UI的過程中踩了不少坑悟民,更多更詳細(xì)的操作說明可跳轉(zhuǎn)至http://www.reibang.com/p/f02abf30fc82查看坝辫。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市射亏,隨后出現(xiàn)的幾起案子近忙,更是在濱河造成了極大的恐慌,老刑警劉巖智润,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件及舍,死亡現(xiàn)場離奇詭異,居然都是意外死亡窟绷,警方通過查閱死者的電腦和手機(jī)锯玛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人攘残,你說我怎么就攤上這事拙友。” “怎么了歼郭?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵遗契,是天一觀的道長。 經(jīng)常有香客問我病曾,道長牍蜂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任泰涂,我火速辦了婚禮鲫竞,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘逼蒙。我一直安慰自己贡茅,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布其做。 她就那樣靜靜地躺著,像睡著了一般赁还。 火紅的嫁衣襯著肌膚如雪妖泄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天艘策,我揣著相機(jī)與錄音蹈胡,去河邊找鬼。 笑死朋蔫,一個胖子當(dāng)著我的面吹牛罚渐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播驯妄,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼荷并,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了青扔?” 一聲冷哼從身側(cè)響起源织,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎微猖,沒想到半個月后谈息,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凛剥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年侠仇,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片犁珠。...
    茶點(diǎn)故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡逻炊,死狀恐怖互亮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嗅骄,我是刑警寧澤胳挎,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站溺森,受9級特大地震影響慕爬,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜屏积,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一医窿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧炊林,春花似錦姥卢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奕枝,卻和暖如春棺榔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背隘道。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工症歇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谭梗。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓忘晤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親激捏。 傳聞我的和親對象是個殘疾皇子设塔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,321評論 25 707
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料远舅? 從這篇文章中你...
    hw1212閱讀 12,753評論 2 59
  • 今天壹置,下第三節(jié)課,問熊那個《湖北省農(nóng)村義務(wù)教育學(xué)校骨干教師候選人申請表》怎么填表谊。 熊把他填的發(fā)給我了钞护。 然后,閑聊...
    哆啦__閱讀 195評論 0 0
  • 傾注了千千萬萬年 懸掛在空中的乳房 已呈現(xiàn)疲態(tài)爆办,消瘦 那時难咕,我站在礁巖 驚訝眼前的母乳 涓涓細(xì)流在大海 在巖石 ....
    東山島高永川閱讀 576評論 0 4