伴随着 Android 5.0 发布的 Material Design,让 Android 应用告别了以前的工程师审美,迎来了全新的界面,灵动的交互,也让越来越多的 App 开始遵从 material design 设计原则,不再是以前拿着iOS设计稿,做着Android开发。本文就其中的沉浸式状态栏这一特性,描述其兼容到4.4的实现,以及一些使用中的小细节。

前言

在4.4之前状态栏一直是黑色的,在4.4中带来了 windowTranslucentStatus 这一特性,因此可以实现给状态栏设置颜色,如下图所示,状态栏颜色不再是黑色,而是可以定制的颜色。

国内将状态栏变色叫做沉浸式状态栏,时间久了,叫的人多了,大家就不再深究,默认了这种叫法。

可以在知乎上看到关于这个问题的讨论:为什么在国内会有很多用户把「透明栏」(Translucent Bars)称作 「沉浸式顶栏」?

需要解决的问题

  1. 4.4及其以上都是可以实现沉浸式状态栏效果的,5.0及其以上可以直接在主题中设置颜色,或者调用 Window 类中的 setStatusBarColor(int color) 来实现,这两种方式在5.0上都比较简单,但是如何兼容到4.4呢?
  2. 图片背景的页面,怎样让状态栏透明或者半透明(效果如下)?
  3. 使用 DrawerLayout 时,主界面实现沉浸状态栏同时,怎样保证抽屉视图也能延伸到状态栏(如下图所示),且兼容到4.4?

以上就是本文要解决的问题,下面给出解决方案。

解决方案

1. 给状态栏设置颜色

思路是:

  • 先设置状态栏透明属性;
  • 给根布局加上一个和状态栏一样大小的矩形View(色块),添加到顶上;
  • 然后设置根布局的 FitsSystemWindows 属性为 true,此时根布局会延伸到状态栏,处在状态栏位置的就是之前添加的色块,这样就给状态栏设置上颜色了。

代码如下:

    /**
* 设置状态栏颜色
*
* @param activity 需要设置的activity
* @param color 状态栏颜色值
*/
public static void setColor(Activity activity, int color) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
View statusView = createStatusView(activity, color);
// 添加 statusView 到布局中
ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
decorView.addView(statusView);
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(true);
rootView.setClipToPadding(true);
}
}

其中生成状态栏一样大小的矩形色块的代码如下:

    /**
* 生成一个和状态栏大小相同的矩形条
*
* @param activity 需要设置的activity
* @param color 状态栏颜色值
* @return 状态栏矩形条
*/
private static View createStatusView(Activity activity, int color) {
// 获得状态栏高度
int resourceId = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
int statusBarHeight = activity.getResources().getDimensionPixelSize(resourceId); // 绘制一个和状态栏一样高的矩形
View statusView = new View(activity);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
statusBarHeight);
statusView.setLayoutParams(params);
statusView.setBackgroundColor(color);
return statusView;
}

在 setContentView() 之后调用 setColor(Activity activity, int color) 方法即可。

2. 图片作背景时,状态栏透明

这个实现比较简单,根布局背景设置为图片,然后添加状态栏透明 Flag, 然后设置根布局的 FitsSystemWindows 属性为 true 即可。代码如下:

    /**
* 使状态栏透明
* <p>
* 适用于图片作为背景的界面,此时需要图片填充到状态栏
*
* @param activity 需要设置的activity
*/
public static void setTranslucent(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(true);
rootView.setClipToPadding(true);
}
}

同样的,在 setContentView() 之后调用 setTranslucent(Activity activity) 方法即可。

3. 使用 DrawerLayout 时的特殊处理

注意点:

  • 使用 DrawerLayout 时,此时不能再对根布局,即 DrawerLayout 进行设置,而要针对 DrawerLayout 的内容布局进行设置,即抽屉之外的另一个布局。

    如下是一个典型的 DrawerLayout 的布局,其内容布局即 FrameLayout,我们需要对 FrameLayout 进行仿状态栏色块的添加、FitsSystemWindows 属性的设置。

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"> <FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"> <LinearLayout
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</LinearLayout>
</FrameLayout> <android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/activity_main_drawer"/> </android.support.v4.widget.DrawerLayout>
  • 还有一个需要注意的设置抽屉布局(Drawer)的 FitsSystemWindows 属性为 false,即上面布局中的 NavigationView

解决方案

  • DrawerLayout 状态栏变色

    代码如下:

    /**
* 为DrawerLayout 布局设置状态栏变色
*
* @param activity 需要设置的activity
* @param drawerLayout DrawerLayout
* @param color 状态栏颜色值
*/
public static void setColorForDrawerLayout(Activity activity, DrawerLayout drawerLayout, int color) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
View statusBarView = createStatusBarView(activity, color);
// 添加 statusBarView 到布局中
ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
contentLayout.addView(statusBarView, 0);
// 内容布局不是 LinearLayout 时,设置padding top
if (!(contentLayout instanceof LinearLayout) && contentLayout.getChildAt(1) != null) {
contentLayout.getChildAt(1).setPadding(0, getStatusBarHeight(activity), 0, 0);
}
// 设置属性
ViewGroup drawer = (ViewGroup) drawerLayout.getChildAt(1);
drawerLayout.setFitsSystemWindows(false);
contentLayout.setFitsSystemWindows(false);
contentLayout.setClipToPadding(true);
drawer.setFitsSystemWindows(false);
}
}

需要注意的是,DrawerLayout 的布局只能包含两个直接子布局,一个是内容布局,一个是抽屉布局,结构如前面的示例布局所示,如果内容布局的根布局如果不是LinearLayout 需要对其子布局设置padding top值,否则仿状态栏色块会被遮挡在最下面,布局内容延伸到状态栏,如下图所示:

(ps:就上图中的问题,目前的解决方案感觉并不是很好,如果你有更好的解决方案,请告诉我~)

  • DrawerLayout 状态栏透明
    /**
* 为 DrawerLayout 布局设置状态栏透明
*
* @param activity 需要设置的activity
* @param drawerLayout DrawerLayout
*/
public static void setTranslucentForDrawerLayout(Activity activity, DrawerLayout drawerLayout) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 设置内容布局属性
ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
contentLayout.setFitsSystemWindows(true);
contentLayout.setClipToPadding(true);
// 设置抽屉布局属性
ViewGroup vg = (ViewGroup) drawerLayout.getChildAt(1);
vg.setFitsSystemWindows(false);
// 设置 DrawerLayout 属性
drawerLayout.setFitsSystemWindows(false);
}
}

同样的,在 setContentView() 之后调用上述解决方案中的方法即可。

在项目中使用

以上代码我整理成了一个工具类,放在 github 上:StatusBarUtils.java 文件

在项目中推荐这样使用,在 BaseActivity 中重写 setContentView(int layoutResID) 方法,新建一个 setStatusBarColor()方法,全局设置状态栏颜色,因为一般 App 大部分界面状态栏都是主题色。


public class BaseActivity extends AppCompatActivity { @Override
public void setContentView(int layoutResID) {
super.setContentView(layoutResID);
setStatusBarColor();
} protected void setStatusBar() {
StatusBarUtils.setColor(this, getResources().getColor(R.color.colorPrimary));
} }

当子类 Activity 的状态栏需要特殊处理时,比如设置不同的颜色,或者设置图片为背景时,重写父类的 setStatusBarColor() 方法即可,例如:

public class ImageStatusBarActivity extends BaseActivity {

    @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_status_bar); } @Override
protected void setStatusBar() {
StatusBarUtils.setTranslucent(this);
}

对 DrawerLayout 布局使用时,需要注意一点,因为方法是在 setContentView() 之后立即调用的,所以传进来的 DrawerLayout 要通过 findViewById() 传进来。如果传入在 setContentView() 之后通过 findViewById() 得到的 DrawerLayout, 则会造成空指针异常。

 StatusBarUtils.setColorForDrawerLayout(this, (DrawerLayout) findViewById(R.id.drawer_layout), getResources()
.getColor(R.color.colorPrimary));

源码和Demo下载

StatusBarDemo Github 地址

StatusBarUtils.java 文件

Demo apk 下载

效果在前文中都有截图,就不多放了。

如文章中有疏漏的地方,请联系我或在评论里告知。

Android App 沉浸式状态栏解决方案的更多相关文章

  1. Android 中沉浸式状态栏实现

    Android 中沉浸式状态栏实现方式如下 计算状态栏高度及调用沉浸式状态栏的相关API方法 package com.example.status; import android.annotation ...

  2. Android:沉浸式状态栏(一)工具类

    参考自Android 沉浸式状态栏完美解决方案 基本功能 状态栏深色或浅色图标切换 自定义状态栏背景 设置沉浸式状态栏 先准备几个工具类 1.SystemBarTintManager package ...

  3. 81.Android之沉浸式状态栏攻略

    转载:http://blog.csdn.net/lmj623565791/article/details/48649563/ 一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下:本篇博客 ...

  4. 【Android】沉浸式状态栏实现

    在Android4.4(API 19)及以后的版本中都增加了对沉浸式状态栏的支持,实现起来也很简单,将application的主题稍作修改即可: <style name="AppThe ...

  5. Android 之 沉浸式状态栏及顶部状态栏背景色设置

    现在很多应用都引用了沉浸式状态栏,如QQ,效果下图: 效果很酷炫,其实设置也很简单.但是,需要注意的是,这种效果只能在API19以及以上版本中才能够做到. 方法一: 首先,如果想让界面Activity ...

  6. Android中沉浸式状态栏的应用

    在Android5.0版本后,谷歌公司为Android系统加入了很多新特性,刷新了Android用户的体验度.而其中的一个新特性就是沉浸式状态栏.那么问题来了,很多非移动端的小伙伴就要问了,什么是沉浸 ...

  7. Android实现沉浸式状态栏(必须高逼格)

     情况一:保留状态栏 只是将我们的布局嵌入到状态栏中 方法一:通过设置theme主题 因为 API21 之后(也就是 android 5.0 之后)的状态栏,会默认覆盖一层半透明遮罩.且为了保持4.4 ...

  8. Android:沉浸式状态栏(二)集成

    在Activity的onCreate()方法中添加代码 //设置状态栏透明 StatusBarUtil.setTranslucentStatus(this); //设置透明状态栏的paddingTop ...

  9. Android 自动取色并设置沉浸式状态栏

    Android 自动取色并设置沉浸式状态栏 - Stars-One的杂货小窝 最近在进行产品的优化,也是研究了下沉浸式状态栏的实现方法及自动取色,记录一下笔记 设置沉浸式状态栏 1.添加依赖 这里,是 ...

随机推荐

  1. 前端开发攻城师绝对不可忽视的五个HTML5新特性

    HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程.还记得以前我们介绍过的HTML5新标签. 作为未来前端开发技术的潮流和风向标,HTML ...

  2. python 3.5 猜数字游戏

    #!/usr/bin/env python #encoding: utf-8 number = 88 for i in range(1,6): num = int(input('gusee numbe ...

  3. Android 颜色大全 (colors.xml )

    <resources> <color name="pink">#ffc0cb</color><!--粉红色 --> <colo ...

  4. 手动替换GCC版本

    当我们的系统里面会有2个以上版本的gcc时,系统会缺省的默认一个gcc版本,当然我们可以更改系统的默认配置,来降低gcc.g++的版本以满足不同的需求. 1.查看GCC的版本信息 $ls /usr/b ...

  5. 免小号QQ空间说说刷赞器

    小伙伴们赶紧用等待免小号QQ空间说说刷赞器,几分钟就可以刷好几百赞了噢, 给大家一个下载地址:http://www.dedewl.com/TA/gotoB.php?id=770319205B

  6. 利用好CSS,实现Qt控件美化

    一.CSS概念 级联样式表 (CSS) 包含应用于网页中的元素的样式规则.CSS 样式定义元素的显示方式以及元素在页中的放置位置.可以创建一个通用规则,只要 Web 浏览器遇到一个元素实例,或遇到一个 ...

  7. sql模糊匹配

    执行 数据库查询时,有完整查询和模糊查询之分. 一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,%:表示任意0个 ...

  8. 深入理解Java的protected修饰符

    其实Java的protected修饰符,权限定义的很微妙,大致有以下几种: (1)protected控制符用于修饰方法和成员变量: (2)一个类的protected方法或成员变量,在包外是不能通过该类 ...

  9. 关于overload和override

    override 覆盖,表示在子类中一个函数覆盖基类中的同名函数,或者局部的某个函数覆盖了全局的某个同名函数.被覆盖的函数通常不能直接被调用,必须借助一些显式的强制手段. overload 重载,表示 ...

  10. poj 2229 Ultra-QuickSort(树状数组求逆序数)

    题目链接:http://poj.org/problem?id=2299 题目大意:给定n个数,要求这些数构成的逆序对的个数. 可以采用归并排序,也可以使用树状数组 可以把数一个个插入到树状数组中, 每 ...