Android Translucent System Bar/沉浸式體驗(yàn) 學(xué)習(xí)總結(jié)

個(gè)人對前輩們所講的知識總結(jié)

Android 4.4中

默認(rèn)樣式

去掉ActionBar之后的樣式

<style name="AppTheme" 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>
</style>
去掉ActionBar之后的樣式

狀態(tài)欄透明

在values-v19的主題屬性中添加一條即可,如下

<style name="AppTheme" 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="android:windowTranslucentStatus">true</item>
</style>

狀態(tài)欄透明

導(dǎo)航欄透明

在values-v19的主題屬性中添加一條即可,如下

<style name="AppTheme" 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="windowTranslucentNavigation">true</item>
</style>

導(dǎo)航欄透明

調(diào)節(jié)布局位置

我們發(fā)現(xiàn)宁仔,狀態(tài)欄透明和導(dǎo)航欄透明都會出現(xiàn)布局內(nèi)容向上偏移的情況,而導(dǎo)航欄還會出現(xiàn) 內(nèi)容進(jìn)入導(dǎo)航區(qū)域的 情況膝但,如圖馋袜。

布局內(nèi)容向上偏移
內(nèi)容進(jìn)入導(dǎo)航區(qū)域

那怎么解決這一的情況呢茅糜?
其實(shí)我們要設(shè)置一個(gè)屬性,那就是“fitsSystemWindows”,fitsSystemWindows 是在 android 4.4 中引入的。
想了解詳細(xì)的fitsSystemWindows相關(guān)知識請去Google查閱下資料铝阐。

在主題屬性中添加‘a(chǎn)ndroid:fitsSystemWindows’,如下

<style name="AppTheme" 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="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>

    <item name="android:fitsSystemWindows">true</item>
</style>
效果圖

圖中的矩形區(qū)域就是TextView的區(qū)域铐拐,并沒有占用導(dǎo)航欄和狀態(tài)欄

其他方式實(shí)現(xiàn)

總結(jié)下上面的內(nèi)容:

  1. 狀態(tài)欄透明 在主題屬性中添加‘windowTranslucentStatus’
  2. 導(dǎo)航欄透明 在主題屬性中添加‘windowTranslucentNavigation’
  3. 調(diào)節(jié)布局位置 在主題屬性中添加‘fitsSystemWindows’

這種方式是在xml中設(shè)置屬性徘键,那么是否可以在代碼中設(shè)置屬性呢?同樣可以的遍蟋!

public class MainActivity extends AppCompatActivity { 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //判斷SDK最小為19
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // windowTranslucentStatus
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            // windowTranslucentNavigation
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
    }
}

這樣的方式也是可以實(shí)現(xiàn)狀態(tài)欄和導(dǎo)航欄透明的吹害。但還是會出現(xiàn)布局偏移的情況,要怎么做呢虚青?
我們可以同樣像上面說的它呀,在主題屬性中進(jìn)行添加‘fitsSystemWindows’;我們還可以在相應(yīng)的布局文件中添加‘fitsSystemWindows’
如:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >
    <!--其他控件-->
 </RelativeLayout>

這樣設(shè)置也可以實(shí)現(xiàn)上面的效果棒厘。
需要注意的是纵穿,上面的代碼是在布局文件的根布局中添加的‘fitsSystemWindows’屬性,所以所以的子布局也會進(jìn)行相應(yīng)的偏移(其實(shí)偏移這個(gè)詞不夠準(zhǔn)確)奢人,也就是說 哪個(gè)控件添加了‘fitsSystemWindows’屬性谓媒,哪個(gè)控件就會進(jìn)行相應(yīng)的偏移,于是就會有這樣的效果

借用 D_clock愛吃蔥花 的圖

這個(gè)圖是5.0手機(jī)運(yùn)行的何乎,所以狀態(tài)欄沒有漸變


Android 5.0

由于要顯示整張圖片句惯,導(dǎo)致占的位置過大土辩,于是我將模擬器縮小了,導(dǎo)致圖片不清晰抢野,見諒哈拷淘。不影響我們看見效果

Android5.0狀態(tài)欄默認(rèn)顏色是獲取我們‘colorPrimaryDark’中的顏色,如果在主題中沒有添加‘colorPrimaryDark’屬性則會使用灰色做默認(rèn)顏色指孤。

灰色為默認(rèn)顏色

在5.0中設(shè)置透明的方式和上面一樣启涯,我們按照上面方式設(shè)置,默認(rèn)情況下狀態(tài)欄和導(dǎo)航欄是灰色半透明

灰色半透明

狀態(tài)欄全透明

方法如下

    <style name="AppTheme" 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="android:fitsSystemWindows">true</item>
        <!--windowTranslucentStatus 默認(rèn)就是false,寫出來是怕你不知道   貼心吧↖(^ω^)↗-->
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!--@android:color/transparent 是調(diào)用系統(tǒng)顏色:透明邓厕。-->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
全透明

手賤的發(fā)現(xiàn)

既然頂部的狀態(tài)欄都可以全透明逝嚎,那底部的導(dǎo)航欄可不可以全透明呢扁瓢?于是手賤的開始了測試详恼。

我們想,既然有‘statusBarColor’這個(gè)屬性了引几,那么肯定是有‘navigationBarColor’這個(gè)屬性的了昧互。

statusBar全透明是這樣設(shè)置的:

  windowTranslucentNavigation="true"
  statusBarColor="透明色"

那么navigationBar全透明可不可以這樣設(shè)置:

  windowTranslucentStatus="true"
  navigationBarColor="透明色"

結(jié)果令我很失望,并沒有達(dá)到我想要的效果伟桅,全部變成了灰色~如圖:


變灰色

那么是什么原因呢敞掘,我沒深入研究。

Android采用的是ARGB色彩模式楣铁,A代表Alpha玖雁,也就是透明度。而navigationBarColor和statusBarColor屬性設(shè)置值都是‘@android:color/transparent’盖腕,也就是 Color下的transparent~
等等赫冬!transparent是Color下的一個(gè)值!這也就是說我們可以設(shè)置自己的顏色嘍那么就試一下吧

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#F0F</item>
<item name="android:navigationBarColor">#F0F</item>

看下效果圖溃列,為什么沒有是#F0F(紫色)而是半透明了呢劲厌?

MDZZ

仔細(xì)一看~‘windowTranslucentStatus’和‘windowTranslucentNavigation’都設(shè)置為true了,所以就還是原來的半透明了听隐。

于是我們可以得到一個(gè)小結(jié)論:‘windowTranslucentStatus’和‘windowTranslucentNavigation’設(shè)置為true后就再設(shè)置‘statusBarColor’和‘navigationBarColor’就沒有效果了。

修改下看看

<item name="android:statusBarColor">#F0F</item>
<item name="android:navigationBarColor">#F0F</item>
效果圖

沒錯(cuò),我們修改成功了但是細(xì)心的朋友們發(fā)沒發(fā)現(xiàn)一個(gè)問題唇牧?沒發(fā)現(xiàn)的和上一個(gè)圖對比一下

是的肾档,我們并沒有設(shè)置‘fitsSystemWindows’!而紫色的那家伙自己下來了~仔細(xì)看開頭的那幾個(gè)‘11111’

這個(gè)時(shí)候你如果測試一下透明度你就會發(fā)現(xiàn)沪么,狀態(tài)欄和導(dǎo)航欄的底色其實(shí)是灰色

修改下看看

<item name="android:statusBarColor">#1F0F</item>
<item name="android:navigationBarColor">#1F0F</item>
#1F0F是很淺的紫色

我們看見乌企,幾乎就是灰色了。

具體什么原因成玫,我也沒有深入研究加酵。

但是呢拳喻,其實(shí)工作中很少會將導(dǎo)航欄調(diào)色的,一般都是半透明的猪腕。于是乎就會有下面的配置

<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#8F0F</item>
#1F0F顏色太淺冗澈,馬上全透明了,于是我調(diào)到了#8F0F

上面說的都是在xml中設(shè)置陋葡,那么在代碼中怎么設(shè)置呢亚亲?

  getWindow().setNavigationBarColor(int i);
  getWindow().setStatusBarColor(int i);

當(dāng)然了,在項(xiàng)目中使用還是要判斷下版本噠

結(jié)束

上面兩個(gè)問題我說我沒用深入研究腐缤,等有機(jī)會捌归、有時(shí)間在弄吧,暫時(shí)就總結(jié)這么多吧岭粤,這玩意我也是剛用到惜索,還有很多東西等我們探索呢。

GitHub有個(gè)項(xiàng)目不錯(cuò),有時(shí)間可以看看源碼
地址:https://github.com/laobie/StatusBarUtil

我也是參考文章學(xué)習(xí)的剃浇,推薦幾個(gè)不錯(cuò)的文章吧:
http://www.reibang.com/p/0acc12c29c1b
http://blog.csdn.net/lmj623565791/article/details/48649563
http://jaeger.itscoder.com/android/2016/02/15/status-bar-demo.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巾兆,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子虎囚,更是在濱河造成了極大的恐慌角塑,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件淘讥,死亡現(xiàn)場離奇詭異圃伶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蒲列,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進(jìn)店門窒朋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嫉嘀,你說我怎么就攤上這事炼邀。” “怎么了剪侮?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵拭宁,是天一觀的道長。 經(jīng)常有香客問我瓣俯,道長杰标,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任彩匕,我火速辦了婚禮腔剂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘驼仪。我一直安慰自己掸犬,他們只是感情好袜漩,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著湾碎,像睡著了一般宙攻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上介褥,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天座掘,我揣著相機(jī)與錄音,去河邊找鬼柔滔。 笑死溢陪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的睛廊。 我是一名探鬼主播形真,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼喉前!你這毒婦竟也來了没酣?” 一聲冷哼從身側(cè)響起王财,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤卵迂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后绒净,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體见咒,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年挂疆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了改览。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缤言,死狀恐怖宝当,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情胆萧,我是刑警寧澤庆揩,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站跌穗,受9級特大地震影響订晌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蚌吸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一锈拨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧羹唠,春花似錦奕枢、人聲如沸娄昆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稿黄。三九已至,卻和暖如春跌造,著一層夾襖步出監(jiān)牢的瞬間杆怕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工壳贪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留陵珍,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓违施,卻偏偏與公主長得像互纯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子磕蒲,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評論 2 353

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