应用市场上App越来越多的出现沉浸式状态栏的设计(如下图所示)状态栏和导航栏具有相同的颜色。Android在4.4开始对于该种效果的支持,而在4.4之下,状态栏只是黑框,无法控制。同时在4.4和5.0及其之上的版本对该种效果的支持又有所差异,因此要实现该种效果,可以将4.4归为一类,5.0及其之上归为一类。接下来,我们将一步步来在4.4和5.0及其之上来实现如下所示效果。

导航栏问题

在Android中,顶部导航栏目前常用的两种实现方式,一个是通过Toolbar,一个是通过自定义View的方式来实现。两种方式各有利弊。Toolbar为官方指定规范,开发者使用更方便,但可拓展性差,对于一些特殊的展示效果无法实现,而通过自定义方式的方式,可以支持更多展示效果,但却需要我们写更多的代码。两种方式在实现状态栏沉浸上也有所差别。

去掉Title

Toolbar

默认主题会具有一个title,当我们使用Toolbar的时候,而没有去掉title,应用则会crash,报出如下所示错误。

因此在使用Toolbar 的时候,我们需要style中添加如下属性配置

true

当然我们也可以通过代码动态去掉title,但当我们的主题从Theme.AppCompat作为父类继承的时候,通过代码并不可以去掉title。

自定义导航栏

当我们未设置windowNoTitle属性的时候,在导航栏之上有title。显然和我们要实现导航栏的沉浸式有所违背,因此实现对于导航栏的沉浸,

true该配置是必不可少的。

设置状态栏透明

去掉title之后,是否我们就可以实现上述的效果了呢?

这个时候,我们发现状态栏还是黑色,并没有沉浸,需要我们将状态栏设置为透明。

true

该属性只有在在4.4和高于4.4版本上可以进行该属性的配置,但是在更低版本上则无法使用。配置该属性之后,执行效果如下图所示。

解决导航栏上移问题

这个时候,Toolbar被整体上移了,导致其部分功能也进入了状态栏之下,包括导航栏的内容也到了状态栏位置之中,显然这是不符合我们最初的要求的。如何解决这个问题?我们在Toolbar中添加fitSystemWindows属性,即可使得toolbar的上部空出一个高度,使得Toolbar内容部分脱离状态栏。

android:id="@+id/toolbar"

android:fitsSystemWindows="true"

android:layout_width="match_parent"

android:layout_height="wrap_content">

得到我们最终想要得到的效果

自定义导航栏与之实现类似。

fitsSystemWindows属性

前面对Toolbar的设置是在Toolbar中添加的fitSystemWindows属性,那么当我们将其属性添加到Toolbar所在的最外层的布局会怎么样呢?

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context="com.example.netease.toolbardemo.activity.ToolbarActivity">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content">

执行之后,可以看到和之前未设置状态栏透明时的效果相同。

那么这个fitSystemWindows工作的原理是什么呢?通过上述实验,不难发现,对于沉浸状态栏的控制,该属性起到了一个很关键的作用。

接下来通过一个实验来验证下,该属性所起的作用,在Toolbar所在的布局中,在布局的底部添加一个Button.

android:id="@+id/toolbar"

android:fitsSystemWindows="true"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:text="Test"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorAccent"

android:layout_alignParentBottom="true"/>

当我们将该属性设置到按钮上,又会发生什么呢?

android:text="Test"

android:fitsSystemWindows="true"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorAccent"

android:layout_alignParentBottom="true"/>

通过比较可以很明显的看出,设置了fitsSystemWindows属性的View在其上部被设置了一个padding。根据之前做的实验,我们可以知道当我们设置了窗口状态栏透明之后,整个内容视图会向上移动了一个状态栏的高度,而当前为该View增加的padding的大小是不是和其高度相同呢?

Button btn = (Button) findViewById(R.id.test_btn);

Log.i("padding", btn.getPaddingTop()+"");

Rect frame = new Rect();

getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);

Log.i("height", frame.top+"");

获取按钮的padding高度和状态栏的高度,我们可以得到如下日志。

通过实验我们可以得出结论,fitSystemWindows属性会对所设置的View增加一个top padding,因此当我们在实现让导航栏沉浸的时候,设置窗口状态栏的透明会使得视图整体上移,而借助fitSystemWindows属性的功能,为视图中最顶部的View设置一个和状态栏高度相同的padding,使得导航栏不会被顶到状态栏内。

当我们在一个视图中,多个View设置该属性时,发现只有第一个设置该属性的View会起作用,在视图布局上,自上而下的第一个View其作用。层级上则为最顶级的View上首先其作用。因此其功能归纳为:

为设置该属性的View增加一个和状态栏高度相同的toppadding

当视图中有多个View被设置了该属性,那么只布局上最顶部的View起作用

5.0及其以上

至此,我们可以完美的实现一个状态栏的沉浸,上述的实现是在Android 4.4版本上,在视图的最上部,会有一个黑色渐变的阴影,而在5.0设备上的展示效果如下所示,在状态栏上整个都会有一个阴影。当然不同厂家对此也有自己的一些优化,比如魅族在4.4上是不具有阴影的。

对于5.0及其之上,官方提供了对状态栏颜色控制的相应API,我们可以通过代码来控制状态栏的颜色,实现如下效果。

实现代码

if(Build.VERSION.SDK_INT >= 21) {

Window window = getWindow();

//取消设置透明状态栏,使 ContentView 内容不再沉浸到状态栏下

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

//需要设置这个 flag 才能调用 setStatusBarColor 来设置状态栏颜色

window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

//设置状态栏颜色

window.setStatusBarColor(getResources().getColor(R.color.yx_red));

}

据此可以看出,当我们在5.0及其之上的实现中,可以不用进行状态栏透明的设置和fitSystemWindows属性的设置,直接通过代码来控制,但为了适应4.4版本,建议在代码中仍然按之前的方式实现,如果想在5.0及其高版本中实现去阴影,再手动在代码中控制。

android开发沉浸式标题栏_Android沉浸式状态栏实现相关推荐

  1. android开发沉浸式标题栏_android实现沉浸式状态栏

    前言 在android开发的过程中,经常会涉及到沉浸式状态栏的问题,说白了,就是手机屏幕顶部栏的颜色显示问题,为了实现美感一体的效果,许多app都已经开始了沉浸式状态栏的显示,这里,我也简单介绍一个沉 ...

  2. android开发 修改标题栏背景_移动开发整体凉凉的背景下,究竟还剩哪些 Android热门前沿知识...

    1. Android架构设计模式 MVC架构设计模式:MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写. MVP架构 ...

  3. android studio 显示view树_Android 沉浸式解析和轮子使用

    文 | 黑羽 on 移动电商 前言 我们先一起来回顾一下实现沉浸式状态栏的一般套路.在 Android 上,关于对 StatusBar(状态栏)的操作,一直都在不断改善,并且表现越来越好,在 Andr ...

  4. android开发 修改标题栏背景_Android哆啦A梦调试工具体验

    滴滴开发调试工具(https://github.com/didi/DoraemonKit)是滴滴开源的一款功能齐全的客户端( iOS .Android )研发助手 是什么 用图说话,这个调试工具其实就 ...

  5. android开发 修改标题栏背景_android开发修改状态栏背景色和图标颜色

    修改状态栏背景色和图标颜色 默认是黑底白字的,现在要改为白底黑字的 先看下效果图: Screenshot_2018-01-03-19-20-27-797_com.yiban1314..png 1.状态 ...

  6. Android开发:去除标题栏的方法

    项目中需要有去除标题栏的需求,于是简单的研究了一下. 效果图: Android中如果我们不需要标题栏(现在大多数是ToolBar),那么我们可以将其去除,去除的方法大体可以分为两种:1.代码中实现:2 ...

  7. Android开发如何去除标题栏title(转)

    去除标题栏title其实非常简单,他有两种方法,一种是在代码中添加,另一种是在AndroidManifest.xml中添加: 1.在代码中实现: 在此方法setContentView(R.layout ...

  8. android开发歌词滑动效果_Android应用开发--MP3音乐播放器滚动歌词实现

    [android]代码库2013年6月2日 简.美音乐播放器开发记录 -----主题 这篇博客的主题是:"滚动歌词的实现" 要的效果如下: ----实现过程 1. 建立歌词内容实体 ...

  9. android开发 修改标题栏背景_基于.NET的APP开发方式中MobileForm的使用smobiler

    样式一 一. Toolbar 1. 目标样式 我们要实现上图中的效果,需要如下的操作: 2. 修改属性 a. 修改Mobile Form的Toolbar属性 获取窗体底部工具栏,打开集合编辑器,并点击 ...

最新文章

  1. java8 list切片_Java8新特性_创建 Stream、流筛选与切片
  2. c++ 关于char *的类库函数
  3. mac连接手机 vm_使用mac ssh连接谷歌云vm实例
  4. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  5. 使用CLion在Gtkmm中加载glade文件时的相对路径问题
  6. android开源SlidingMenu使用
  7. APP自动化测试--IOS
  8. mysql手册12_锁机制
  9. oracle财务管理系统有什么用,CSS_Oracle财务管理系统:会计业务周期,下面是使用Oracle财务管理系统 - phpStudy...
  10. TeamTalk Base静态库说明
  11. 记一次联想Y7000P安装黑apple系统地经历
  12. 生活中的十大心理学现象
  13. 网络安全与渗透:漏洞攻击—— msf(四)此生无悔入华夏,男儿何不带吴钩
  14. ArcGIS中加载各种在线地图
  15. 阿里云香港服务器带宽太贵怎么办?香港节点全球CDN加速你值得拥有
  16. python可以自动运行m文件吗_如何运行m文件而不启动matlab
  17. 日志20130104~0308
  18. sdcard/DCIM/.thumbnails文件夹里的庞然大物 是这样来的
  19. java判断是否是闰年
  20. 简述网桥的特点_网桥的工作原理和特点

热门文章

  1. springboot学习之注解
  2. 九齐单片机NY8B062D单按键控制4种LED状态
  3. 视频美颜sdk背后的技术:人脸检测
  4. 【你不知道的Java】-汉字转换拼音
  5. 小米 android 调试模式设置,小米4手机怎么开启usb调试模式
  6. 2014苹果发布会 看点
  7. 深度学习笔记(九):神经网络剪枝(Neural Network Pruning)详细介绍
  8. 通过mac电脑的下载服务器的日志与日志筛选
  9. 金融支付类APP测试方法——服务端部分
  10. 带大家写一波微信公众号的爬取