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设置为多少都不可能比状态栏还高,因此不会出现阴影。

阅读更多
文章标签: android AppBar阴影
个人分类: 技术杂记
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭