Android中 4.4-5.0 系统状态栏颜色的修改。实现Translucent System Bar

在Android 4.4之前，打开app的时候我们能看到系统顶部那条黑乎乎的通系统状态栏。但是Android 4.4开始，引入了Translucent System Bar的系特性，弥补系统通知栏突兀之处。当我们使用这个特性的前后对比我们来看一下。





在这里我们使用一种简单的方法，之前在网上也看过类似的实现方法，一种是直接在代码里面去设置，还有一种直接修改主题的样式，个人感觉后面一种比较方便，也容易理解，在这里就介绍一下第二种方法。

首先要到AndroidManifest中为指定的Activity去设置Theme，不过我们不能在values/style.xml中直接去定义Translucet System Bar的Theme，因为对应的版本不一样，该特性只兼容Android 4.4开始的版本。可以建几个不同版本的values，比如values、values-v19、values-v21。

利用主题样式去设置的话。

1.我们先把values创建完成，里面有三个版本的styles。

values/styles.xml

<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--在Android 4.4之前的版本上运行，直接跟随系统主题-->
</style>

values-v19/styles.xml

<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>

设置了属性 windowTranslucentStatus 和windowTranslucentNavigation 为true，我们必须设置这两个属性的值为true才行，以便使我们定义的layout侵入系统栏的领域。

values-v21/style.xml

<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<!--Android 5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

无论你在哪个SDK版本的values目录下，设置了主题，都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4 以下的设备。否则，肯定会报找不到Theme的错误。

2.在AndroidManifest.xml中对指定Activity的theme进行设置

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/TranslucentTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

3.在Activity的布局文件中把android:fitsSystemWindows设置为true

虽然不加android:fitsSystemWindows属性也会改变状态栏的背景，但是出现的结果是不同的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="wxt.example.com.as20.MainActivity"
android:background="#FF4081">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<Button
android:onClick="open"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打开"/>

</LinearLayout>

这个是个LinearLayout布局，我们把android:fitsSystemWindows属性在里面设置。如果background是一种颜色的话，他会在整个屏幕上都是这种颜色。
那么我们把android:fitsSystemWindows属性去掉之后呢，两者有什么差别呢？

加了android:fitsSystemWindows属性的界面（左）
不加android:fitsSystemWindows属性的界面（右）





在这里我们先来介绍一下fitsSystemWindows，

fitsSystemWindows 是在 android 4.4 中引入的。 System windows 顾名思义就是系统窗口，系统在这里显示系统一些属性和操作区域，比如 最上方的状态栏，以及没有实体按键的最下方的虚拟导航栏。

大部分的时候，你的应用都不会在状态栏和导航栏下面显示内容，如果你需要在他们下面显示内容，则需要确保你应用的可交互控件（比如按钮）不要显示在系统窗口下面了。 android:fitsSystemWindows=“true” 默认行为就是通过在 View 上设置和系统窗口一样高度的边框（padding ）来确保你的内容不会出现到系统窗口下面。

android:fitsSystemWindows属性，我们可以根据自己的需要去设置，并不一样要设置在第一个跟布局的属性里，我们来看一下另外一种

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/about_bg_darker"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/security_setting_title_bg"
android:fitsSystemWindows="true"
android:gravity="center_vertical"
android:orientation="horizontal">

<ImageButton
android:id="@+id/common_title_back_btn"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/actionbar_indicator_bg2"
android:contentDescription="@null"
android:src="@drawable/actionbar_back" />

<TextView
android:id="@+id/common_title_main_text"
style="@style/common_title_main_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title_feedback_setting" />

<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />

<ImageButton
android:id="@+id/common_title_main_extra_btn"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/actionbar_indicator_bg2"
android:contentDescription="@null"
android:src="@drawable/submit_setting_feedback" />
</LinearLayout>

<LinearLayout
android:id="@+id/setting_menu"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="@drawable/bg_card3"
android:gravity="center_vertical"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="7"
android:gravity="center_vertical">
<TextView
android:id="@+id/setting_feedback_menu_select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:textColor="#5d9cec"
android:textSize="14dp"
android:text="@string/activity_setting_feedback_common"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="3"
android:gravity="center_vertical|right">
<ImageView
android:id="@+id/menu_imageview"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginRight="12dp"
android:src="@drawable/arrow_07"/>
</RelativeLayout>
</LinearLayout>

<EditText
android:id="@+id/container_setting_feedback"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="@id/setting_feedback_menu"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
android:fontFamily="@string/font_families_roboto"
android:gravity="top"
android:hint="@string/container_hint_setting_feedback"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="15dp"
android:textColor="#787878"
android:textColorHint="#B5B5B5"
android:textSize="16dp" />

<TextView
android:id="@+id/notice_setting_feedback"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/container_setting_feedback"
android:fontFamily="@string/font_families_roboto"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="10dp"
android:text="@string/notice_setting_feedback"
android:textSize="12dp" />

</LinearLayout>

在这里我们把android:fitsSystemWindows属性设置到第二个LinearLayout中了，第二个LinearLayout是类似于actionbar的布局。我们来看一下效果图：