Android UI體驗(yàn)之全屏沉浸式透明狀態(tài)欄樣式
前言：
Android 4.4之后谷歌提供了沉浸式全屏體驗(yàn)， 在沉浸式全屏模式下， 狀態(tài)欄、 虛擬按鍵動(dòng)態(tài)隱藏， 應(yīng)用可以使用完整的屏幕空間， 按照 Google 的說法， 給用戶一種 身臨其境 的體驗(yàn)。而Android 5.0之后谷歌又提出了 ColorPalette 的概念，讓開發(fā)者可以自己設(shè)定系統(tǒng)區(qū)域的顏色，使整個(gè) App 的顏色風(fēng)格和系統(tǒng)的顏色風(fēng)格保持統(tǒng)一。今天學(xué)習(xí)總結(jié)一下如何實(shí)現(xiàn)Android 4.4以上全屏沉浸式透明狀態(tài)欄效果。先看下預(yù)期效果：
首先現(xiàn)分清楚哪部分是狀態(tài)欄，哪部分是導(dǎo)航欄
狀態(tài)欄StatusBar如下
導(dǎo)航欄NavigationBar如下
如何實(shí)現(xiàn)？
1.）首先實(shí)現(xiàn)全屏
第一種：繼承主題特定主題
在Android API 19以上可以使用****.TranslucentDecor***有關(guān)的主題，自帶相應(yīng)半透明效果，Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor兩種主題為新增加的，所以要新建values-v19文件夾并創(chuàng)建styles文件添加如下代碼
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor"> <!-- Customize your theme here. --> </style>
第二種：在activity中采用代碼的方式
Android 4.4以上可以添加如下代碼
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明狀態(tài)欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明導(dǎo)航欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
Android 5.0 以上也可以使用下面的代碼實(shí)現(xiàn)全屏
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
}
全屏效果
不難發(fā)現(xiàn)此時(shí)狀態(tài)欄占有的位置消失，和app的布局疊在一起了，接下來解決這個(gè)問題
2.）解決狀態(tài)欄占位問題
第一種：主題添加如下設(shè)置
<item name="android:fitsSystemWindows">true</item>
第二種：activity layout根目錄添加下面代碼
android:fitsSystemWindows="true"
第三種：通過Java代碼設(shè)置
rootview.setFitsSystemWindows(true);
fitsSystemWindows只作用在sdk>=19的系統(tǒng)上就是高于4.4的系統(tǒng)，這個(gè)屬性可以給任何view設(shè)置,只要設(shè)置了這個(gè)屬性此view的所有padding屬性失效.只有在設(shè)置了透明狀態(tài)欄(StatusBar)或者導(dǎo)航欄(NavigationBar)此屬性才會(huì)生效，
如果上述設(shè)置了狀態(tài)欄和導(dǎo)航欄為透明的話，相當(dāng)于對該View自動(dòng)添加一個(gè)值等于狀態(tài)欄高度的paddingTop，和等于導(dǎo)航欄高度的paddingBottom，效果如下
3.）狀態(tài)欄導(dǎo)航欄設(shè)置背景色
4.4以上的可以采用修改contentView的背景色，或者動(dòng)態(tài)添加一個(gè)view到contentView上
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明狀態(tài)欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明導(dǎo)航欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
//設(shè)置contentview為fitsSystemWindows
ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
View childAt = contentView.getChildAt(0);
if (childAt != null) {
childAt.setFitsSystemWindows(true);
}
//給statusbar著色
View view = new View(this);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
view.setBackgroundColor(color);
contentView.addView(view);
}
動(dòng)態(tài)獲取StatusBarHeight函數(shù)如下
/**
* 獲取狀態(tài)欄高度
*
* @param context context
* @return 狀態(tài)欄高度
*/
private static int getStatusBarHeight(Context context) {
// 獲得狀態(tài)欄高度
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
return context.getResources().getDimensionPixelSize(resourceId);
}
動(dòng)態(tài)獲取NavigationBarHeight函數(shù)如下
/**
* 獲取導(dǎo)航欄高度
*
* @param context context
* @return 導(dǎo)航欄高度
*/
public static int getNavigationBarHeight(Context context) {
int resourceId = context.getResources().getIdentifier("navigation_bar_height", "dimen", "android");
return context.getResources().getDimensionPixelSize(resourceId);
}
然后Android5.0以上谷歌提供了新的api可以更新狀態(tài)欄和導(dǎo)航欄的背景色
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
//設(shè)置狀態(tài)欄顏色
window.setStatusBarColor(color);
//設(shè)置導(dǎo)航欄顏色
window.setNavigationBarColor(color);
ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
View childAt = contentView.getChildAt(0);
if (childAt != null) {
childAt.setFitsSystemWindows(true);
}
// contentView.setPadding(0, getStatusBarHeight(this), 0, 0);
}
這樣總體效果就實(shí)現(xiàn)了
4.）貼出整體java代碼實(shí)現(xiàn)方式
private void initWindows() {
Window window = getWindow();
int color = getResources().getColor(android.R.color.holo_blue_light);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
//設(shè)置狀態(tài)欄顏色
window.setStatusBarColor(color);
//設(shè)置導(dǎo)航欄顏色
window.setNavigationBarColor(color);
ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
View childAt = contentView.getChildAt(0);
if (childAt != null) {
childAt.setFitsSystemWindows(true);
}
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明狀態(tài)欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明導(dǎo)航欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
//設(shè)置contentview為fitsSystemWindows
ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
View childAt = contentView.getChildAt(0);
if (childAt != null) {
childAt.setFitsSystemWindows(true);
}
//給statusbar著色
View view = new View(this);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
view.setBackgroundColor(color);
contentView.addView(view);
}
}
總結(jié)：
我這里為了更加明顯的顯示效果所以狀態(tài)欄背景色和標(biāo)題欄顏色不一致，在實(shí)際的開發(fā)中一般情況下我們都會(huì)設(shè)置成統(tǒng)一的顏色，在視覺上感覺整個(gè)頁面更加統(tǒng)一，讓用戶真正沉浸在app中。
以上所述是小編給大家介紹的Android UI體驗(yàn)之全屏沉浸式透明狀態(tài)欄效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Kotlin1.6.20新功能Context?Receivers使用技巧揭秘
這篇文章主要為大家介紹了Kotlin1.6.20功能Context?Receivers使用揭秘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Android Studio使用ButterKnife和Zelezny的方法
這篇文章主要為大家詳細(xì)介紹了Android Studio使用ButterKnife和Zelezny的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
安卓（Android）動(dòng)態(tài)創(chuàng)建多個(gè)按鈕并添加監(jiān)聽事件
本文主要介紹Android動(dòng)態(tài)創(chuàng)建多個(gè)按鈕并給每個(gè)按鍵添加監(jiān)聽事件，在做Android項(xiàng)目會(huì)經(jīng)常遇到的，希望對需要用到的同學(xué)有所幫助2016-07-07
Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例
本篇文章主要介紹了Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
Android Zxing 轉(zhuǎn)換豎屏掃描且提高識(shí)別率的方法
本篇文章主要介紹了Android Zxing 轉(zhuǎn)換豎屏掃描且提高識(shí)別率的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要一圖文結(jié)合的方式為大家詳細(xì)介紹了Android觸摸事件傳遞，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android控件PullRefreshViewGroup實(shí)現(xiàn)下拉刷新和上拉加載
這篇文章主要為大家詳細(xì)介紹了Android控件PullRefreshViewGroup實(shí)現(xiàn)下拉刷新和上拉加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android開發(fā)實(shí)現(xiàn)根據(jù)包名判斷App運(yùn)行狀態(tài)的方法
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)根據(jù)包名判斷App運(yùn)行狀態(tài)的方法,結(jié)合實(shí)例形式分析了Android結(jié)合包名判斷app運(yùn)行狀態(tài)的方法,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)從相冊選擇照片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Android開發(fā)中Toast顯示消息的方法小結(jié)
這篇文章主要介紹了Android開發(fā)中Toast顯示消息的方法,結(jié)合實(shí)例形式總結(jié)分析了Toast的功能、創(chuàng)建Toast對象及調(diào)用相關(guān)函數(shù)顯示消息提示框的操作技巧,需要的朋友可以參考下2016-10-10