Android CoordinatorLayout AppBar 上边缘阴影原因

前言

  今天使用Android Studio向导生成了一个Hello World应用，使用了Navigation Drawer Activity模板。显示的界面如下图（系统为Android 7.1）。 

 

  这儿的AppBar上边缘出现了阴影效果，但在平时使用AppBar时是像下面这个样子的，于是想来研究一下是怎么回事。 

 
 

 

布局文件分为两个部分，一是外层DrawerLayout布局，二是其中引用的内容部分，以CoordinaLayout为根元素。

activity_main.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">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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>

app_bar_main.xml:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.ningxiang.autofill.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

---

分析思路

AppBar设置了elevation？是的

  出现阴影效果，首先想到的肯定就是对AppBar设置了elevation属性。于是使用HierarchyViewer查看布局属性，发现确实AppBarLayout elevation=12。 
  那对于另外的没有阴影的情况是否就没有设置相应的elevation呢？答案并不是。同样查看没有AppBar上边缘阴影的应用发现其AppBarLayout同样有设置elevation=12。 
  于是，我又遇到了这个更奇怪的问题——为何其他应用在AppBarLayout同样设置了elevation的情况下没有表现出上边缘阴影？

StatubarColor=”@android:color/transparent”

  最开始怀疑是否是AppBarLayout中引入的theme里面定义了什么属性，但当把去掉后依然有阴影。最后又经过多次对比Coordinator套AppBarLayout发现，对这现象起关键作用的是在style中设置的一个属性：

android:statusbarColor=”@android:color/transparent”

当设置了该属性定义状态栏背景透明时，AppBarLayout就会表现出上边缘的阴影。而当去掉该属性时，就可以呈现出上面第二张图片的效果了。

原因分析

  为什么设置statusBarColor为transparent会有这样的效果呢。说起来还是跟CoordinatorLayout有关系。 
  当我们设置CoordinatorLayout的android:fitsSystemWindows=”true”时，CoordinatorLayout就会延生到状态栏去（可以通过HierarchyViewer查看布局的屏幕位置起始点为（0,0）），然后还会自己使用colorPrimaryDark属性去绘制状态栏颜色。 
  若此时我们将状态栏背景颜色设为transparent，那么我们看到的状态栏颜色其实就是CoordinatorLayout绘制的。本来CoordinatorLayout没有设置elevation属性，但AppBarLayout的elevation为12，因此就有上边缘阴影。 
  但是我们不设置状态栏背景颜色为transparent透明时，状态栏就会也使用colorPrimaryDark属性值来绘制状态栏背景，但此时由于是状态栏本身绘制的背景颜色，而又由于状态栏作为系统窗口始终是覆盖在我们应用之上的，因此无论AppBarLayout的elevation设置为多少都不可能比状态栏还高，因此不会出现阴影。