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)于對(duì)該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)欄效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Flutter實(shí)現(xiàn)漸變色加描邊字體效果
這篇文章介紹了Flutter實(shí)現(xiàn)漸變色描邊字體效果的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了android自定義圓形倒計(jì)時(shí)顯示控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Android Force Close 出現(xiàn)的異常原因分析及解決方法
本文給大家講解Android Force Close 出現(xiàn)的異常原因分析及解決方法，forceclose意為強(qiáng)行關(guān)閉，當(dāng)前應(yīng)用程序發(fā)生了沖突。對(duì)android force close異常分析感興趣的朋友一起通過本文學(xué)習(xí)吧2016-08-08
下面小編就為大家分享一篇Android 不解壓直接讀取zip包的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
FlowLayout流式布局實(shí)現(xiàn)搜索清空歷史記錄
這篇文章主要為大家詳細(xì)介紹了FlowLayout流式布局實(shí)現(xiàn)搜索清空歷史記錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Android獲取驗(yàn)證碼倒計(jì)時(shí)顯示效果
這篇文章主要為大家詳細(xì)介紹了Android獲取驗(yàn)證碼顯示的兩種簡單實(shí)現(xiàn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Android開發(fā)自學(xué)路線圖,本文講解的路線圖分為JAVA、Android基礎(chǔ)、Web基礎(chǔ)、Android項(xiàng)目4部份,是一個(gè)入門級(jí)學(xué)習(xí)路線圖,需要的朋友可以參考下2015-04-04
Android項(xiàng)目中g(shù)radle的執(zhí)行流程
大家好，本篇文章主要講的是Android項(xiàng)目中g(shù)radle的執(zhí)行流程，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下2022-01-01
Android控件之RatingBar自定義星級(jí)評(píng)分樣式
RatingBar為評(píng)分條控件，默認(rèn)效果為若干個(gè)綠色的星星，如果想將其換成其他自定義圖片就要自定義它的style。接下來通過本文給大家介紹Android控件之RatingBar自定義星級(jí)評(píng)分樣式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
Flutter?StreamBuilder實(shí)現(xiàn)局部刷新實(shí)例詳解
這篇文章主要為大家介紹了Flutter?StreamBuilder實(shí)現(xiàn)局部刷新實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08