Material Design 之 定义状态栏(Status Bar)的颜色

Hey,好久不见。今天遇到一个问题,想要把Status Bar 和 Tool Bar的颜色弄成一样的,或者是类似的,例如Material Design:

图中Status Bar颜色比Tool Bar稍微深了一些,也很有层次。

在Android Studio1.4提供的模板的styles.xml里面,其实已经实现了这样的方法:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

这里的colorPrimary对应Tool Bar的颜色,colorPrimayDark对应Status Bar的颜色。这两种颜色可以在Values-colors.xml中自定义。

也就是说,只要修改这两个颜色,就能轻松实现上图的MD效果。

我设置的minSdk level是15(4.0),这样定义没有提示不兼容,但是不知道在5.0以下机器上能否出效果。但是,如果采用下面两个特性(结尾的链接里的),就会明确要求minSdk 19。

<!-- 设置导航栏和状态栏成半透明的 -->
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>

 

比较奇怪的是,虽然我们可以在app_bar_main.xml中看到背景颜色被设成了colorPrimay,

<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/AppTheme.PopupOverlay" />

但我全局搜索了一下,并没有发现哪里有调用colorPrimaryDark。这也很好理解,毕竟没有一个组件是Status Bar可以供你调用。我猜想这是一个特殊的关键字,意即colorPrimaryDark是一个约定的词,在特定版本会被Status Bar自动地使用。

 

很多其他的应用,比如知乎,他的Status Bar其实跟Tool Bar是一样的颜色,它采取的是Translucent  Bar透明状态栏的策略。注意,国外说的沉浸(Immersive)跟这个有区别。

其他可能帮到你的资料:

安卓4.4以上修改状态栏颜色:http://blog.csdn.net/koche/article/details/46766963

知乎:http://www.zhihu.com/question/27177235

Material调色盘:http://www.materialpalette.com/red/pink

posted @ 2015-11-18 17:42  LarryLawrence  阅读(1148)  评论(0编辑  收藏  举报