本文主要是介绍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"><includelayout="@layout/app_bar_main"android:layout_width="match_parent"android:layout_height="match_parent" /><android.support.design.widget.NavigationViewandroid: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.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><android.support.v7.widget.Toolbarandroid: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.FloatingActionButtonandroid: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 CoordinatorLayout AppBar 上边缘阴影原因的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!