Android UI体验之全屏沉浸式透明状态栏样式

前言:

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

首先现分清楚哪部分是状态栏,哪部分是导航栏

状态栏StatusBar如下

导航栏NavigationBar如下

如何实现?

1.)首先实现全屏

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

在Android API 19以上可以使用****.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中采用代码的方式

Android 4.4以上可以添加如下代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { //透明状态栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //透明导航栏 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); }

Android 5.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的布局叠在一起了,接下来解决这个问题

2.)解决状态栏占位问题

第一种:主题添加如下设置

<item name="android:fitsSystemWindows">true</item>

第二种:activity layout根目录添加下面代码

android:fitsSystemWindows="true"

第三种:通过Java代码设置

rootview.setFitsSystemWindows(true);

fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统,这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效,

如果上述设置了状态栏和导航栏为透明的话,相当于对该View自动添加一个值等于状态栏高度的paddingTop,和等于导航栏高度的paddingBottom,效果如下

3.)状态栏导航栏设置背景色

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

这样总体效果就实现了

4.)贴出整体java代码实现方式

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); //透明导航栏 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); } }

总结:

我这里为了更加明显的显示效果所以状态栏背景色和标题栏颜色不一致,在实际的开发中一般情况下我们都会设置成统一的颜色,在视觉上感觉整个页面更加统一,让用户真正沉浸在app中。

以上所述是小编给大家介绍的Android UI体验之全屏沉浸式透明状态栏效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-26 14:45:14

Android UI体验之全屏沉浸式透明状态栏样式的相关文章

Android中3种全屏方法及3种去掉标题栏的方法

这篇文章主要介绍了Android中3种全屏方法及3种去掉标题栏的方法,二个问题各给出了3种解决方法,并给出实例代码,需要的朋友可以参考下     一.去掉标题栏的方法 第一种:入门的时候经常使用的一种方法 代码如下: requestWindowFeature(Window.FEATURE_NO_TITLE); //去掉标题栏注意这句一定要写在setContentView()方法的前面,不然会报错的 第二种:在AndroidManifest.xml文件中定义 代码如下: <application

导航-android 4.0实现全屏

问题描述 android 4.0实现全屏 用View.SYSTEM_UI_FLAG_HIDE_NAVIGATION theme是@android:style/Theme.NoTitleBar.Fullscreen 但是点击屏幕的时候导航栏还是会显示 怎么让它不响应完全不显示? 解决方案 把 activity 中自动生成的代码 删掉 解决方案二: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstan

屏幕-Android 分辨率 不能达到全屏

问题描述 Android 分辨率 不能达到全屏 最近一直在搞屏幕大小的事,项目开发适配屏幕大小 800*480 *强制横屏之后,设置全屏,设置控件位置.大小,但是发现实际上使用的屏幕高度老是没有达到480px,设置控件全屏显示,实际的屏幕大小为 800*432 *我想请问下,如何剩下的48px去哪了?难道是状态栏?可我已经设置全屏了,有没有办法让我把这48px也用上? 解决方案 我不知道你用的具体是哪一个版本的安卓,按我的分析的话你的屏幕上应该是有软键盘的,就是home键和返回键以及多任务键都在

Android实现无标题栏全屏的方法_Android

Android中实现全屏.无标题栏的两种办法,另附Android系统自带样式的解释 实现全屏无标题栏: 1.在xml文件中进行配置 AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: android:theme="@android:style/Theme.NoTitleBar.Fullscreen"   实现无标题栏(但有系统自带的任务栏): android:theme="@andr

Android编程实现WebView全屏播放的方法(附源码)_Android

本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

android编程开发之全屏和退出全屏的实现方法_Android

本文实例讲述了android编程开发之全屏和退出全屏的实现方法.分享给大家供大家参考,具体如下: xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fullscreen" android:onClick

android编程开发之全屏和退出全屏的实现方法

本文实例讲述了android编程开发之全屏和退出全屏的实现方法.分享给大家供大家参考,具体如下: xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fullscreen" android:onClick

Android实现无标题栏全屏的方法

Android中实现全屏.无标题栏的两种办法,另附Android系统自带样式的解释 实现全屏无标题栏: 1.在xml文件中进行配置 AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: android:theme="@android:style/Theme.NoTitleBar.Fullscreen"   实现无标题栏(但有系统自带的任务栏): android:theme="@andr

Android中3种全屏方法及3种去掉标题栏的方法_Android

一.去掉标题栏的方法 第一种:入门的时候经常使用的一种方法 复制代码 代码如下:  requestWindowFeature(Window.FEATURE_NO_TITLE);  //去掉标题栏注意这句一定要写在setContentView()方法的前面,不然会报错的 第二种:在AndroidManifest.xml文件中定义 复制代码 代码如下:  <application android:icon="@drawable/icon" android:label="@s