Android中主流状态栏效果实现

Android在早期的系统版本中，状态栏是不支持修改的，所以打开任何应用程序会发现顶部的状态栏始终是黑条。在Android 4.4（KitKat）之后，系统的状态栏开始支持开发者定制和修改，包括显示或隐藏，更改颜色等（嗯，一定是抄袭ios的...），又在Android 5.0（LOLLIPOP）进行了改进。这样一来，我们就可以让系统状态栏跟随应用程序改变了。

下面总结了市面上几种常见的StatusBar显示效果。

一.状态栏完全透明

应用程序的某些页面在状态栏完全透明，且内容区延伸到状态栏时，视觉体验会更佳。这种显示效果在各种应用的启动页中较为常见，因为启动页的背景是一张大图，全屏显示效果更好。另外在如墨迹天气中这种效果也在多个页面中被使用到。

以中华万年历的天气页面为例，效果如下所示：



接下来进入代码实现。

添加如下styles.xml文件。

values/styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>

<style name="AppTheme" parent="AppBaseTheme">
</style>
</resources>

values-v19/styles.xml

<resources>
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>

values-v21/styles.xml

<resources>
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>

注意，android:windowTranslucentStatus是在4.4版本引入的属性，android:statusBarColor是在5.0版本引入的属性，如果不添加到相应的values文件夹，会编译不通过。

styles在工程中的结构如图：



最后再将定义好的样式添加的清单文件中（android:theme="@style/AppTheme"），可以是<application>节点，也可以是<activity>节点，根据应用的需要来定。

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">

</application>

上述代码在网上随处可见，但是在实际测试时发现，5.0以上的设备状态栏会显示出透明灰色，不能达到我们想要的效果。在Activity的onCreate()方法中，调用setContentView()之前添加如下代码可解决。

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

到这里就已实现我们想要的效果。另外需要注意的是，在4.4版本中，StatusBar只能实现半透明，会有一层半透明黑色覆盖在状态栏上。

二.状态栏与标题栏颜色一致

这种效果比较常见，状态栏与标题栏颜色一致形成一个整体，如网易新闻，网易云音乐，今日头条，华尔街见闻等。

示例图如下：



同样是通过styles.xml文件实现。

values/styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Main theme colors -->
<!--   your app branding color for the app bar -->
<item name="colorPrimary">@color/colorPrimary</item>
<!--   darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/colorPrimary</item>

<!-- Customize your theme here. -->
</style>

<style name="AppTheme" parent="AppBaseTheme">
</style>
</resources>

values-v19/styles.xml

<resources>
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>

实现上述效果关键在于colorPrimary和colorPrimaryDark。colorPrimary是应用程序的主色调，状态栏默认会使用colorPrimaryDark设定的颜色。这里不用添加values-v21/styles.xml，当然，如果愿意，在values-v21/styles.xml中增加<item name="android:statusBarColor">@color/colorPrimary</item>也可以，android:statusBarColor用于定义状态栏的颜色。

对colorPrimary和colorPrimaryDark的理解，可参考下图：



布局文件activity_main.xml如下。

<?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:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>-->

</LinearLayout>

如果使用了Toolbar作为标题栏（自己写View也可以），一定记得在Activity中添加setSupportActionBar(toolbar)。

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}

三.状态栏比标题栏颜色加深

示例图如下：



该效果只出现在Android 5.0以上版本中。当我们在Studio中创建工程时，如果选中集成AppCompat，创建出来的应用就是这种显示效果，同时也是Material Design推荐的做法。严格遵循Material Design的app，如知乎、饿了么都是这种效果。

实现方法同上述第二种情况一样，添加styles.xml文件即可。其中colorPrimaryDark颜色比colorPrimary深。

values/styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Main theme colors -->
<!--   your app branding color for the app bar -->
<item name="colorPrimary">@color/colorPrimary</item>
<!--   darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<!-- Customize your theme here. -->
</style>

<style name="AppTheme" parent="AppBaseTheme">
</style>
</resources>

附官方Material Design培训教程：
https://developer.android.google.cn/training/material/index.html