【移动应用开发技术】Android UI设计体验之全屏沉浸式透明状态栏效果

【移动应用开发技术】AndroidUI设计体验之全屏沉浸式透明状态栏效果。

前言：

Android4.4之后谷歌提供了沉浸式全屏体验，在沉浸式全屏模式下，状态栏、虚拟按键动态隐藏，应用可以使用完整的屏幕空间，按照Google的说法，给用户一种身临其境的体验。而Android5.0之后谷歌又提出了ColorPalette的概念，让开发者可以自己设定系统区域的颜色，使整个App的颜色风格和系统的颜色风格保持统一。今天学习总结一下如何实现Android4.4以上全屏沉浸式透明状态栏效果。先看下预期效果：

首先现分清楚哪部分是状态栏，哪部分是导航栏状态栏StatusBar如下导航栏NavigationBar如下如何实现？

第一种：继承主题特定主题

在AndroidAPI19以上可以使用****.TranslucentDecor***有关的主题，自带相应半透明效果，Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor两种主题为新增加的，所以要新建values-v19文件夹并创建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)

{//透明状态栏window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//透明导航栏window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

}Android5.0以上也可以使用下面的代码实现全屏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);

}全屏效果不难发现此时状态栏占有的位置消失，和app的布局叠在一起了，接下来解决这个问题第一种：主题添加如下设置<item

name="android:fitsSystemWindows">true</item>第二种：activitylayout根目录添加下面代码android:fitsSystemWindows="true"第三种：通过Java代码设置rootview.setFitsSystemWindows(true);fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统，这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效，如果上述设置了状态栏和导航栏为透明的话，相当于对该View自动添加一个值等于状态栏高度的paddingTop，和等于导航栏高度的paddingBottom，效果如下4.4以上的可以采用修改contentView的背景色，或者动态添加一个view到contentView上

if

(Build.VERSION.SDK_INT

>=

Build.VERSION_CODES.KITKAT)

{

//透明状态栏

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

//透明导航栏

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

//设置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);

}动态获取StatusBarHeight函数如下

/**

*

获取状态栏高度

*

*

@param

context

context

*

@return

状态栏高度

*/

private

static

int

getStatusBarHeight(Context

context)

{

//

获得状态栏高度

int

resourceId

=

context.getResources().getIdentifier("status_bar_height",

"dimen",

"android");

return

context.getResources().getDimensionPixelSize(resourceId);

}动态获取NavigationBarHeight函数如下

/**

*

获取导航栏高度

*

*

@param

context

context

*

@return

导航栏高度

*/

public

static

int

getNavigationBarHeight(Context

context)

{

int

resourceId

=

context.getResources().getIdentifier("navigation_bar_height",

"dimen",

"android");

return

context.getResources().getDimensionPixelSize(resourceId);

}然后Android5.0以上谷歌提供了新的api可以更新状态栏和导航栏的背景色

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);

//设置状态栏颜色

window.setStatusBarColor(color);

//设置导航栏颜色

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);

}这样总体效果就实现了

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);

//设置状态栏颜色

window.setStatusBarColor(color);

//设置导航栏颜色

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)

{

//透明状态栏

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

//透明导航栏

windo