Android – 在 KitKat 以上版本的 Translucent 介紹

Android 從 4.4(KitKat) 開始提供了一個視覺上的提升,讓位在裝置最上方的狀態列 (Status Bar) 以及最下方的導航列 (Navigation Bar) 可以被透明化,並讓 APP 的內容可以往上下延伸,使整個畫面的可被利用度大幅提升。

KitKat_Transparent

 

從 3.0 (honeycomb) 開始,導航列被虛擬化,一直都會佔住裝置一塊不算小的空間,對很多人來說,整個畫面無法充份利用,是一件相當痛苦的事情。也因此,有些人就會刻意去挑選仍維持著實體鍵設計的裝置。

而 Google 似乎也意識到這個狀況,從 4.4 (KitKat)  提供了開發者一個新的作法,讓我們可以把導航列 (Navigation Bar)給透明化,並讓內容延伸到該處,甚至是狀態列 (Status Bar) 也可以被設定透明,這樣再搭配 Action Bar 的配色,可以像上圖一般,讓整個 APP 更顯得一致。

那接著,我們就先從程式碼來看,

的確,程式碼就是這麼短,一行設定狀態列 (Status Bar)、一行設定導航列 (Navigation Bar) 。
別忘了用個判斷式,確定裝置的版本是 4.4 (KitKat) 以上來進行容錯。

再來,有個部份要稍微留意一下,如果不希望 APP 的內容被上拉到狀態列 (Status bar) 的話,要記得在介面 (Layout) XML 檔中,最外面的那層,要再加上一個屬性 fitsSystemWindows 為 true,以這邊的例子來說,請見下方

在介面的根層加入 android:fitsSystemWindows=”true” 這個屬性,這樣就可以讓內容介面從 Action Bar 下方開始。

再來,若我們的 APP 可以從 4.4 (KitKat) 開始支援,那其實可以直接從 style 去進行設定,我們可以在官網上看到對透明化的說明裡,官方提供了兩種 no title 的主題風格可以讓我們使用,分別如下

  • Theme.Holo.Light.NoActionBar.TranslucentDecor
    KitKat_NoTitle_light_Translucent
  • Theme.Holo.NoActionBar.TranslucentDecor
    KitKat_NoTitle_Translucent

這樣我們就可以做出全螢幕的 APP。

若是我們有自己設定好的主題,或說希望可以維持原有 Action Bar 存在,那只要在主題設定中分別加入兩個屬性值即可

跟程式碼一樣,也是兩行完成,上面一行是設定狀態列 (Status Bar)、下面一行是設定導航列 (Navigation Bar) 。別忘了,如果不希望內容被 Action Bar 壓住,那先前提及的 Layout 屬性  android:fitsSystemWindows=”true” 要設定到。

 

其實以現在的狀況來說,透過程式碼去設定是最為安全的,畢竟目前絕大部份的裝置都還未被升級到 4.4 (KitKat)。

 

本部落格採用創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款授權,如欲轉載請記得註明「莫希爾(Mosil) 手札

Loading Facebook Comments ...

6 關於 “Android – 在 KitKat 以上版本的 Translucent 介紹” 的評論

  1. gn00742754  不曉得您所謂的「全螢幕」是指 DrawerLayout 所滑出的側邊,會佔滿整個畫面,還是其高佔滿整個畫面。
    若是前者,筆者這邊沒遇到;若是後者,您可以嘗試在 DrawerLayout 自身,以及其要滑出的 layout 都設定「android:fitsSystemWindows=”true”」這個屬性。

    以之前的 Navigation Drawer (http://blog.mosil.biz/2013/12/android-navigation-drawer/) 裡範例來說,就是在 id 為 @+id/drw_layout 的根介面,以及 id 為 @+id/llv_left_drawer 的滑出介面,皆給予上述設定值即可。
    給您參考試試 🙂

  2. Mosilgn00742754
    您好,
    我有設過囉!
    llv_left_drawer那邊顯示是正常的,
    可是drw_layout就會全螢幕

  3. gn00742754您的 drw_layout 有設定 background 嗎?
    可以試一下,設定個顏色,然後觀察看看,
    以該設定值來說,drw_layout 應該也會從 action bar 底下開始顯示才對。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *