当前位置:首页>编程日记>正文

高大上的Android沉浸式状态栏?

本站寻求有缘人接手,详细了解请联系站长QQ1493399855

背景

之前做过Android沉浸式状态栏的相关需求,但是一直忙于工作,没时间系统的整理下沉浸式相关的知识,所以今天抽出时间,写一篇 Android沉浸式状态栏的文章。

何为沉浸式

沉浸式就是要给用户提供完全沉浸的体验,使用户有一种置身于虚拟世界之中的感觉。
沉浸式模式就是整个屏幕中显示都是应用的内容,没有状态栏也没有导航栏,用户不会被一些系统的界面元素所打扰。
Android沉浸式模式的本质就是全屏化,但这可能并不是我们想要的,我们还是来实现下网上传的沸沸扬扬的Android沉浸式状态栏

沉浸式状态栏的兼容情况

Android版本透明状态栏
<4.4×
4.4-5.0
>=5.0
Android版本黑白字符状态栏
<6.0×
>=6.0

fitsSystemWindows

在讲沉浸式状态栏之前,我们先来认识一个属性——fitsSystemWindows,这个属性在沉浸式状态中扮演着非常重要的角色。

  • 官方描述

Boolean internal attribute to adjust view layout based on system
windows such as the status bar. If true, adjusts the padding of this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity.

  • 中文描述

Boolean内部属性是基于系统窗口(如status bar)调整视图布局。如果为true,将调整视图padding为系统窗口预留出空间。Will only take effect if this view is in a non-embedded activity.
这句话的意思是view不在非嵌入式的activity才会生效。
嵌入式activity是托管在父activity中的活动。常见的例子是TabHost / TabActivity设计。特别是,嵌入式Acitvities位于主机中 LocalActivityManager,这在概念上类似于 FragmentManager 它允许您在另一个内部显示一个Activity。

根据这个定义,很容易理解为什么只有主机(非嵌入式)Activity才能支持 fitsSystemWindows 属性,因为任何嵌入的活动都限制在其主机定义的区域内。

  • 注意:

fitsSystemWindows只作用在sdk>=19的系统上就是高于4.4的系统,android:fitsSystemWindows默认值为false,并且在哪个控件设置android:fitsSystemWindows="true"会有不一样的效果

android:fitsSystemWindows=“true”,这个属性可以给任何view设置,只要设置了这个属性此view的所有padding属性失效.只有在设置了透明状态栏(StatusBar)或者导航栏(NavigationBar)此属性才会生效

当设置了透明状态栏(StatusBar)时:

当为此activity设置了:

<item name="android:windowTranslucentStatus">true</item>
或者
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

如果有以上两种情况之一,我们的状态栏(StatusBar)就会变成透明,并且布局会扩展到StatusBar的位置同时,所有设置了android:fitsSystemWindows="true"属性的view会自动添加一个值等于状态栏高度的paddingTop

当设置了透明导航栏(NavigationBar)时:

<item name="android:windowTranslucentNavigation">true</item>
或者
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

如果有以上两种情况之一,我们的导航栏(NavigationBar)就会变成透明,并且布局会扩展到NavigationBar的位置。同时,所有设置了android:fitsSystemWindows="true"属性的view会自动添加一个值等于导航栏高度的paddingBottom。

沉浸式状态栏实现的一般思路

  • 4.4以下版本: 我们可以对StatusBar和 NavigationBar进行显示和隐藏操作,但无法实现沉浸式状态栏。

  • Android4.4(API 19) - Android 5.0(API 21): 通过FLAG_TRANSLUCENT_STATUS设置状态栏为透明并且为全屏模式,然后通过添加一个与StatusBar 一样大小的View,将View 的 background 设置为我们想要的颜色,从而来实现沉浸式。

  • Android 5.0(API 21)以上版本: 在Android 5.0的时候,加入了一个重要的属性和方法 android:statusBarColor (对应方法为 setStatusBarColor),通过这个方法我们就可以轻松实现沉浸式。也就是说,从Android5.0开始,系统才真正的支持沉浸式。

  • Android 6.0(API 23)以上版本: Android6.0以上的实现方式和Android 5.0 +是一样,但从Android 6.0(API 23)开始,我们可以改状态栏的绘制模式,可以显示白色或浅黑色的内容和图标(除了魅族手机,魅族自家有做源码更改,6.0以下就能实现)

Android4.4(API 19) - Android 5.0(API 21)实现沉浸式的方式

Android 4.4 为什么能够实现沉浸式的效果呢?因为在Android 4.4 新增了一个重要的属性:FLAG_TRANSLUCENT_STATUS

 /*** Window flag: request a translucent status bar with minimal system-provided* background protection.** <p>This flag can be controlled in your theme through the* {@link android.R.attr#windowTranslucentStatus} attribute; this attribute* is automatically set for you in the standard translucent decor themes* such as* {@link android.R.style#Theme_Holo_NoActionBar_TranslucentDecor},* {@link android.R.style#Theme_Holo_Light_NoActionBar_TranslucentDecor},* {@link android.R.style#Theme_DeviceDefault_NoActionBar_TranslucentDecor}, and* {@link android.R.style#Theme_DeviceDefault_Light_NoActionBar_TranslucentDecor}.</p>** <p>When this flag is enabled for a window, it automatically sets* the system UI visibility flags {@link View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and* {@link View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}.</p>*/public static final int FLAG_TRANSLUCENT_STATUS = 0x04000000;

解释:设置状态栏透明,并且变为全屏模式。上面的解释已经说得很清楚了,当window的这个属性有效的时候,会自动设置 system ui visibility的标志SYSTEM_UI_FLAG_LAYOUT_STABLE和SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN.

有两种方式实现这个属性:

可以在代码中设置,如下:

activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

当然也可以在theme 中设置属性windowTranslucentStatus,如下:

android:windowTranslucentStatus

效果如下:

高大上的Android沉浸式状态栏? 配图01

效果如上图,可以看出,沉浸式的效果是出来了,但是也有一个问题,我们的标题栏和状态栏重叠了,相当于整个布局上移了StatusBar 的高度。为了让标题栏回到原来的位置,我们在标题栏的上方添加一个大小和StatusBar大小一样的View,View 的BackgroundColor 为标题栏一样的颜色,这个View起到一个占位的作用。这个时候,标题栏就会下移StatusBar的高度,回到正常的位置。
添加如下代码:

       //获取windowphone下的decorViewViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();int       count     = decorView.getChildCount();//判断是否已经添加了statusBarViewif (count > 0 && decorView.getChildAt(count - 1) instanceof StatusBarView) {decorView.getChildAt(count - 1).setBackgroundColor(calculateStatusColor(color, statusBarAlpha));} else {//新建一个和状态栏高宽的viewStatusBarView statusView = createStatusBarView(activity, color, statusBarAlpha);decorView.addView(statusView);}ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);//rootview不会为状态栏留出状态栏空间ViewCompat.setFitsSystemWindows(rootView,true);rootView.setClipToPadding(true);

创建和status bar 一样大小的View的代码如下:

 private static StatusBarView createStatusBarView(Activity activity, int color, int alpha) {// 绘制一个和状态栏一样高的矩形StatusBarView statusBarView = new StatusBarView(activity);LinearLayout.LayoutParams params =new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));statusBarView.setLayoutParams(params);statusBarView.setBackgroundColor(calculateStatusColor(color, alpha));return statusBarView;}

其中StatusBarView 就是一个普通的View。

添加上述代码后,效果如下:

高大上的Android沉浸式状态栏? 配图02

通过以上就可以实现Android 4.4 上的沉浸式状态栏

另外,如果是一张图片延伸到状态栏的话,直接设置FLAG_TRANSLUCENT_STATUS就可以了,如下:

高大上的Android沉浸式状态栏? 配图03

小结:Android4.4上实现沉浸式状态栏的套路是:为window添加FLAG_TRANSLUCENT_STATUS Flag,然后添加一个和status bar 一样大小的View 站位,从而让让标题栏不会与status bar重叠。而图片延伸到状态栏只需要设置FLAG_TRANSLUCENT_STATUS就OK。

沉浸式在Android4.4 - Android5.0 之间的版本表现得不是很好,从上面贴的几张图就可以看出,状态栏的顶部有一个渐变,会显示出黑色的阴影(底部的导航栏也是一样的效果),在Android 5.0 版本已经被修复了。

Android 5.0(API 21)以上实现沉浸式的方式

Android 5.0 是一个里程碑式的版本,从Android 5.0开始,Google 推出了全新的设计规范 Material Design,并且原生控件就可以实现一些炫酷的UI动效。从这个版本开始,google 加入了一个比较重要的方法setStatusBarColor (对应属性:android:statusBarColor),通过这个方法,可以很轻松地实现沉浸式状态栏。方法如下:

 /*** Sets the color of the status bar to {@code color}.** For this to take effect,* the window must be drawing the system bar backgrounds with* {@link android.view.WindowManager.LayoutParams#FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS} and* {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_STATUS} must not be set.** If {@code color} is not opaque, consider setting* {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and* {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}.* <p>* The transitionName for the view background will be "android:status:background".* </p>*/public abstract void setStatusBarColor(@ColorInt int color);

注意看这个方法的注释,想要这个方法生效,必须还要配合一个Flag一起使用,必须设置FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS ,并且不能设置FLAG_TRANSLUCENT_STATUS(Android 4.4才用这个).

看一下FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS这个flag:

可以看到,这个flag 也是在Android 5.0添加的,它的作用是什么呢?

高大上的Android沉浸式状态栏? 配图04

解释:设置了FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS,表明会Window负责系统bar的background 绘制,绘制透明背景的系统bar(状态栏和导航栏),然后用getStatusBarColor()和getNavigationBarColor()的颜色填充相应的区域。这就是Android 5.0 以上实现沉浸式导航栏的原理。

实现沉浸式添加如下代码:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
//注意要清除 FLAG_TRANSLUCENT_STATUS flag
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(getResources().getColor(android.R.color.holo_red_light));

效果如下:

高大上的Android沉浸式状态栏? 配图05

当然也可以直接在Theme中使用,在values-v21文件夹下添加如下主题:

<style name="MDTheme" parent="Theme.Design.Light.NoActionBar"><item name="android:windowTranslucentStatus">false</item><item name="android:windowDrawsSystemBarBackgrounds">true</item><item name="android:statusBarColor">@android:color/holo_red_light</item></style>

效果和上面代码中添加的效果一样。

图片延伸到状态栏

Android 5.0使图片延伸到状态栏,只需设置windowTranslucentStatus,将 statusBarColor 设置为透明即可:

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.DayNight.NoActionBar"><item name="android:windowTranslucentNavigation">true</item><item name="android:windowTranslucentStatus">true</item><!-- 设置statusBarColor 为透明--><item name="android:statusBarColor">@android:color/transparent</item></style>

效果如下:

高大上的Android沉浸式状态栏? 配图06

代码实现方式中通过版本号的判断兼容 Android5.0以下和Android 5.0以上:

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);activity.getWindow().setStatusBarColor(calculateStatusColor(color, statusBarAlpha));} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();int count = decorView.getChildCount();if (count > 0 && decorView.getChildAt(count - 1) instanceof StatusBarView) {decorView.getChildAt(count - 1).setBackgroundColor(calculateStatusColor(color, statusBarAlpha));} else {StatusBarView statusView = createStatusBarView(activity, color, statusBarAlpha);decorView.addView(statusView);}ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);rootView.setFitsSystemWindows(true);rootView.setClipToPadding(true);setRootView(activity);
}

Android 6.0 + 实现状态栏字色和图标浅黑色

使用沉浸式的时候会遇到一个问题,那就是Android 系统状态栏的字色和图标颜色为白色,当我的主题色或者图片接近白色或者为浅色的时候,状态栏上的内容就看不清了。 这个问题在Android 6.0的时候得到了解决。Android 6.0 新添加了一个属性SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

高大上的Android沉浸式状态栏? 配图07

解释:为setSystemUiVisibility(int)方法添加的Flag,请求status bar
绘制模式,它可以兼容亮色背景的status bar 。要在设置了FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDSflag
,同时清除了FLAG_TRANSLUCENT_STATUSflag 才会生效。

添加如下代码:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}

效果如下:

高大上的Android沉浸式状态栏? 配图08

除了在代码中添加以外,还可以直接在主题中使用属性:

 <style name="MDTheme" parent="Theme.Design.Light.NoActionBar"><item name="android:windowTranslucentStatus">false</item><item name="android:windowDrawsSystemBarBackgrounds">true</item><item name="android:statusBarColor">@android:color/holo_red_light</item><!-- Android 6.0以上 状态栏字色和图标为浅黑色--><item name="android:windowLightStatusBar">true</item></style>

注意:主题要放在values-v23文件夹下。


http://www.coolblog.cn/news/37da81885a58b41d.html

相关文章:

  • asp多表查询并显示_SpringBoot系列(五):SpringBoot整合Mybatis实现多表关联查询
  • s7day2学习记录
  • 【求锤得锤的故事】Redis锁从面试连环炮聊到神仙打架。
  • 矿Spring入门Demo
  • 拼音怎么写_老师:不会写的字用圈代替,看到孩子试卷,网友:人才
  • Linux 实时流量监测(iptraf中文图解)
  • Win10 + Python + GPU版MXNet + VS2015 + RTools + R配置
  • 美颜
  • shell访问php文件夹,Shell获取某目录下所有文件夹的名称
  • 如何优雅的实现 Spring Boot 接口参数加密解密?
  • LeCun亲授的深度学习入门课:从飞行器的发明到卷积神经网络
  • 支撑微博千亿调用的轻量级RPC框架:Motan
  • Mac原生Terminal快速登录ssh
  • 法拉利虚拟学院2010 服务器,法拉利虚拟学院2010
  • java受保护的数据与_Javascript类定义语法,私有成员、受保护成员、静态成员等介绍...
  • mysql commit 机制_1024MySQL事物提交机制
  • 2019-9
  • jquery 使用小技巧
  • 科学计算工具NumPy(3):ndarray的元素处理
  • vscode pylint 错误_将实际未错误的py库添加到pylint白名单
  • linux批量创建用户和密码
  • 工程师在工作电脑存 64G 不雅文件,被公司开除后索赔 41 万,结果…
  • js常用阻止冒泡事件
  • newinsets用法java_Java XYPlot.setInsets方法代碼示例
  • 气泡图在开源监控工具中的应用效果
  • 各类型土地利用图例_划重点!国土空间总体规划——土地利用
  • php 启动服务器监听
  • dubbo简单示例
  • Ubuntu13.10:[3]如何开启SSH SERVER服务
  • [iptables]Redhat 7.2下使用iptables实现NAT
  • 【设计模式】 模式PK:策略模式VS状态模式
  • CSS小技巧——CSS滚动条美化
  • JS实现-页面数据无限加载
  • 最新DOS大全
  • Django View(视图系统)
  • 阿里巴巴分布式服务框架 Dubbo
  • 阿里大鱼.net core 发送短信
  • Sorenson Capital:值得投资的 5 种 AI 技术
  • 程序员入错行怎么办?
  • 两张超级大表join优化
  • Arm芯片的新革命在缓缓上演
  • 第九天函数
  • Linux软件安装-----apache安装
  • HDU 5988 最小费用流
  • 《看透springmvc源码分析与实践》读书笔记一
  • nagios自写插件—check_file
  • python3 错误 Max retries exceeded with url 解决方法
  • 正式开课!如何学习相机模型与标定?(单目+双目+鱼眼+深度相机)
  • 通过Spark进行ALS离线和Stream实时推荐
  • 行为模式之Template Method模式