[Android | Material Design] ToolBar 通知栏变色处理小问题 笔记

一直很喜欢让通知栏变色，要不然强迫症忍不了啊。统一颜色是必须的。

---

Eclipse

在Eclipse中，处理通知栏变色很简单。只需要在相关view的父布局中加入xml代码：

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

然后在对应Activity代码中加入

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);}

就可以搞定通知栏变色，真的很简单。

---

Android Studio

然而到了AndroidStudio这里，加入Material Design设计。引入了许多theme，虽然也能变色，但是StatusBar是深色处理。很不喜欢。就需要处理一下。

没有对比就没有伤害，我还是喜欢右边的。

调整了各种参数，才发现产生这种情况究其根本就是StatusBar使用了theme中的colorPrimaryDark
文件位置[res\values\styles.xml]

所以为了不破坏系统自带属性，这里在styles.xml中创建一个style标签

res\values\styles.xml

    ... //other style    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">    </style>    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">        <item name="windowNoTitle">true</item>        <item name="windowActionBar">false</item>        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimary</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    ... //other style

res\values-v21\styles.xml

    ... //other style    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">        <item name="android:windowDrawsSystemBarBackgrounds">true</item>        <item name="android:statusBarColor">@android:color/transparent</item>    ... //other style    </style>

---

接下来就是很重要的

android:fitsSystemWindows=”true”

这个属性是调整ToolBar到屏幕的距离。在根布局是【android.support.v4.widget.DrawerLayout】与【android.support.design.widget.CoordinatorLayout】有所不同，下面分别来查看。

DrawerLayout + NavigationView

先上DrawerLayout的xml代码，然后在剖析。

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:openDrawer="start">    <android.support.design.widget.CoordinatorLayout         android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:fitsSystemWindows="true"            android:theme="@style/AppTheme.AppBarOverlay">            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                app:popupTheme="@style/AppTheme.PopupOverlay" />        </android.support.design.widget.AppBarLayout>        <include layout="@layout/content_main" />    </android.support.design.widget.CoordinatorLayout>    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_main"        app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>   

---

首先就是根布局DrawerLayout必须加android:fitsSystemWindows=”true”，否则就会

展开NavigationView

通知栏惨不忍睹。
然后就是CoordinatorLayout加还是不加android:fitsSystemWindows=”true”???
这是加之后

what??? 你在逗我？这条线什么鬼？？？

可知DrawerLayout根布局：

• DrawerLayout 必须加入android:fitsSystemWindows=”true”
• CoordinatorLayout 不加
• AppBarLayout 加入/不加入 没区别
• ToolBar 加入/不加入 没区别

---

CoordinatorLayout 布局

依然先上代码，然后解析

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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"    android:fitsSystemWindows="true">    <android.support.design.widget.AppBarLayout        android:id="@+id/app_bar"        android:layout_width="match_parent"        android:layout_height="@dimen/app_bar_height"        android:fitsSystemWindows="true"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/toolbar_layout"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="centerCrop"                android:src="@drawable/img1"                android:fitsSystemWindows="true"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.6"/>            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:popupTheme="@style/AppTheme.PopupOverlay" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_scrolling" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="@dimen/fab_margin"        app:layout_anchor="@id/app_bar"        app:layout_anchorGravity="bottom|right"        app:srcCompat="@android:drawable/ic_dialog_email" /></android.support.design.widget.CoordinatorLayout>

---

如果是CoordinatorLayout为父布局，也必须加入android:fitsSystemWindows=”true”。如果没有，也会一片惨白。

可知，如果想透明通知栏，根布局有android:fitsSystemWindows=”true”是必须的

不过这个代码有点特殊，里面加入了CollapsingToolbarLayout，折叠ToolBar。
因为是CollapsingToolbarLayout，所以换成了动图

但是可以看到，滑动的时候图片全部显示。通知栏并不会透明，而是有色块。效果不是很好。

在< ImageView>中加入android:fitsSystemWindows=”true” 完美解决。

这里有一个坑，如果< AppBarLayout>里面不设置android:fitsSystemWindows=”true”，就会

出现Toolbar占位问题。所以这里需要注意加入代码。

---

可知CoordinatorLayout根布局：

• CoordinatorLayout 必须加入android:fitsSystemWindows=”true”
• AppBarLayout 必须加入
• CollapsingToolbarLayout 加入/不加入 没区别
• ToolBar 加入/不加入 没区别
• 如果CollapsingToolbarLayout里有ImageView 必须加入