三步实现沉浸式状态栏（即状态栏与APP同色）

叁歲伎倆 2022-07-28 04:18 165阅读 0赞

本篇实现的是沉浸式状态栏。先明确下概念，什么是状态栏？直接上图：

![Center][]

什么是沉浸式状态栏？示例图如下：

非沉浸式状态栏                                                                        沉浸式状态栏

![Center 1][]       ![Center 2][]

其实，实质上就是使手机状态栏的颜色改变，使其成为自己想要的颜色。如果把它设置成和APP主色调相同，这样看上去就会好看许多。至于叫法，网上都这么叫，就不用深究它了。下面介绍如何实现，其实很简单，只需三步：

前提：建立的安卓工程必须是API 19以上的才行，也就是Android4.4版本以上。

** 步骤1：**

在布局文件的最外层Layout上加上两个属性，

android:clipToPadding="true"  
       android:fitsSystemWindows="true"

示例：

![Center 3][]

**步骤2：**

在Activity的onCreate()方法中加入两行代码：

getWindow().addFlags(WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_STATUS);  //透明状态栏  
       getWindow().addFlags(WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_NAVIGATION);  //透明导航栏

**    步骤3：**

**      **在Activity的onCreate()方法中加入一行代码：

requestWindowFeature(Window.FEATURE\_NO\_TITLE); //设置无标题栏

注意：此句代码一定要加在 setContentView(R.layout.activity\_main);之前。

示例：

![Center 4][]

通过以上三步简单的操作，这样就可以实现状态栏变色啦！

**备注：**

** 一、**其实，只需要加入

这两行代码就能改变状态栏颜色。

但是，会出现状况。

状况1（如果布局文件中不加  android:clipToPadding="true"    android:fitsSystemWindows="true"  这两个属性）

![Center 5][]

![Image 1][]可以看到，标题栏会整体往上移动，占据状态栏的空间。也就是将状态栏当成了APP标题栏的一部分。

状况2（如果onCreate()方法中不加  requestWindowFeature(Window.FEATURE\_NO\_TITLE);  这句代码）

![Center 6][]

可以看到，布局多了系统自带的title栏，一般情况下这是不需要的。

**二、**在步骤3中，requestWindowFeature(Window.FEATURE\_NO\_TITLE); 这句代码的设置可以不设置在onCreate()方法中，设置成配置文件的theme样式也是可以的，但是要和你的Activity相匹配，示例如下：

![Center 7][]

三、状态栏的颜色，就是布局文件中最外层的布局的背景颜色。但是，如果最外层的Layout设置宽高都是                    match\_parent，而其子布局未设置任何背景颜色，

![Center 8][]

这样的话，就会使整块屏幕（包括状态栏）都是一个颜色，

如下图：

![Center 9][]

当然，有时候我们需要将除了标题区域以外的内容区域设置成和APP主色不同的颜色。这时，只需要将需要改变背景颜色的子布局设置一下背景颜色就行啦。

![Center 10][]

运行效果如下：

![Center 11][]

通常，这样就是我想要的效果。每个人需求不同，大家自行发挥。

[Center]: /images/20220727/51375939f98c4f88aa5308f14907c3d3.png
[Center 1]: https://img-blog.csdn.net/20160330152245473?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220727/f576776c0a844970affdff10b3b490e9.png
[Center 3]: /images/20220727/00f5dbaf1caa4ec7992ed31b46cc85f9.png
[Center 4]: /images/20220727/7c2c55d74cfd4db78a50b1ad1854609e.png
[Center 5]: /images/20220727/16318b21978f4467ac6eef752dfe4af1.png
[Image 1]: 
[Center 6]: /images/20220727/a582f029a4624fb38b73d14349656b04.png
[Center 7]: /images/20220727/d05784186daa4922ab2bb04cc3a8517c.png
[Center 8]: /images/20220727/f6349cc0c3c14da09591d78009508a96.png
[Center 9]: /images/20220727/17509c704c554559b86ae5b195c53970.png
[Center 10]: /images/20220727/7836c789aaec46eba23b793d2f2a81fd.png
[Center 11]: /images/20220727/300d037b80fa458f867c253d47038894.png