【移動應(yīng)用開發(fā)技術(shù)】Android UI設(shè)計(jì)體驗(yàn)之全屏沉浸式透明狀態(tài)欄效果

【移動應(yīng)用開發(fā)技術(shù)】AndroidUI設(shè)計(jì)體驗(yàn)之全屏沉浸式透明狀態(tài)欄效果。

前言：

Android4.4之后谷歌提供了沉浸式全屏體驗(yàn)，在沉浸式全屏模式下，狀態(tài)欄、虛擬按鍵動態(tài)隱藏，應(yīng)用可以使用完整的屏幕空間，按照Google的說法，給用戶一種身臨其境的體驗(yàn)。而Android5.0之后谷歌又提出了ColorPalette的概念，讓開發(fā)者可以自己設(shè)定系統(tǒng)區(qū)域的顏色，使整個App的顏色風(fēng)格和系統(tǒng)的顏色風(fēng)格保持統(tǒng)一。今天學(xué)習(xí)總結(jié)一下如何實(shí)現(xiàn)Android4.4以上全屏沉浸式透明狀態(tài)欄效果。先看下預(yù)期效果：

首先現(xiàn)分清楚哪部分是狀態(tài)欄，哪部分是導(dǎo)航欄狀態(tài)欄StatusBar如下導(dǎo)航欄NavigationBar如下如何實(shí)現(xiàn)？

第一種：繼承主題特定主題

在AndroidAPI19以上可以使用****.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中采用代碼的方式Android4.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);

}Android5.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)此時狀態(tài)欄占有的位置消失，和app的布局疊在一起了，接下來解決這個問題第一種：主題添加如下設(shè)置<item

name="android:fitsSystemWindows">true</item>第二種：activitylayout根目錄添加下面代碼android:fitsSystemWindows="true"第三種：通過Java代碼設(shè)置rootview.setFitsSystemWindows(true);fitsSystemWindows只作用在sdk>=19的系統(tǒng)上就是高于4.4的系統(tǒng)，這個屬性可以給任何view設(shè)置,只要設(shè)置了這個屬性此view的所有padding屬性失效.只有在設(shè)置了透明狀態(tài)欄(StatusBar)或者導(dǎo)航欄(NavigationBar)此屬性才會生效，如果上述設(shè)置了狀態(tài)欄和導(dǎo)航欄為透明的話，相當(dāng)于對該View自動添加一個值等于狀態(tài)欄高度的paddingTop，和等于導(dǎo)航欄高度的paddingBottom，效果如下4.4以上的可以采用修改contentView的背景色，或者動態(tài)添加一個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);

}動態(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);

}動態(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)了

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)航欄

windo