Android 從 4.4(KitKat) 開始提供了一個視覺上的提升,讓位在裝置最上方的狀態列 (Status Bar) 以及最下方的導航列 (Navigation Bar) 可以被透明化,並讓 APP 的內容可以往上下延伸,使整個畫面的可被利用度大幅提升。
從 3.0 (honeycomb) 開始,導航列被虛擬化,一直都會佔住裝置一塊不算小的空間,對很多人來說,整個畫面無法充份利用,是一件相當痛苦的事情。也因此,有些人就會刻意去挑選仍維持著實體鍵設計的裝置。
而 Google 似乎也意識到這個狀況,從 4.4 (KitKat) 提供了開發者一個新的作法,讓我們可以把導航列 (Navigation Bar)給透明化,並讓內容延伸到該處,甚至是狀態列 (Status Bar) 也可以被設定透明,這樣再搭配 Action Bar 的配色,可以像上圖一般,讓整個 APP 更顯得一致。
那接著,我們就先從程式碼來看,
1 2 3 4 5 6 7 8 9 10 11 |
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { Window window = getWindow(); // Translucent status bar window.setFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); // Translucent navigation bar window.setFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); } |
的確,程式碼就是這麼短,一行設定狀態列 (Status Bar)、一行設定導航列 (Navigation Bar) 。
別忘了用個判斷式,確定裝置的版本是 4.4 (KitKat) 以上來進行容錯。
再來,有個部份要稍微留意一下,如果不希望 APP 的內容被上拉到狀態列 (Status bar) 的話,要記得在介面 (Layout) XML 檔中,最外面的那層,要再加上一個屬性 fitsSystemWindows 為 true,以這邊的例子來說,請見下方
1 2 3 4 5 6 7 8 9 10 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity" > <!-- Content --> </RelativeLayout> |
在介面的根層加入 android:fitsSystemWindows=”true” 這個屬性,這樣就可以讓內容介面從 Action Bar 下方開始。
再來,若我們的 APP 可以從 4.4 (KitKat) 開始支援,那其實可以直接從 style 去進行設定,我們可以在官網上看到對透明化的說明裡,官方提供了兩種 no title 的主題風格可以讓我們使用,分別如下
這樣我們就可以做出全螢幕的 APP。
若是我們有自己設定好的主題,或說希望可以維持原有 Action Bar 存在,那只要在主題設定中分別加入兩個屬性值即可
1 2 3 4 5 6 7 |
<style name="AppTheme" parent="AppBaseTheme"> <!-- Status Bar --> <item name="android:windowTranslucentStatus">true</item> <!-- Navigation Bar --> <item name="android:windowTranslucentNavigation">true</item> </style> |
跟程式碼一樣,也是兩行完成,上面一行是設定狀態列 (Status Bar)、下面一行是設定導航列 (Navigation Bar) 。別忘了,如果不希望內容被 Action Bar 壓住,那先前提及的 Layout 屬性 android:fitsSystemWindows=”true” 要設定到。
其實以現在的狀況來說,透過程式碼去設定是最為安全的,畢竟目前絕大部份的裝置都還未被升級到 4.4 (KitKat)。
本部落格採用創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款授權,如欲轉載請記得註明「莫希爾(Mosil) 手札」
用DrawerLayout會怪怪的,
不知道有沒有解
gn00742754 不知道您所謂的怪怪的是如何的怪法呢?
Mosilgn00742754
DrawerLayout的側邊欄會變成全螢幕,
就像這篇說的,
http://www.eoeandroid.com/thread-318664-1-1.html
可是我看不懂這篇的解法。
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 的滑出介面,皆給予上述設定值即可。
給您參考試試 🙂
Mosilgn00742754
您好,
我有設過囉!
llv_left_drawer那邊顯示是正常的,
可是drw_layout就會全螢幕
gn00742754您的 drw_layout 有設定 background 嗎?
可以試一下,設定個顏色,然後觀察看看,
以該設定值來說,drw_layout 應該也會從 action bar 底下開始顯示才對。