Material Design - AppCompat 工具栏不显示阴影
Material Design - AppCompat toolbar without showing shadow
我正在使用AppCompat V7 的工具栏来替换以前的操作栏,并且希望像以前的操作栏一样具有工具栏的阴影。但是默认情况下工具栏没有阴影,我已经尝试了reddit中提到的修复。但运气不好。
设置阴影的代码:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
工具栏布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="?attr/actionBarSize"
android:background="#F1F1F1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
foreground="?android:windowContentOverlay">
activity布局:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:id="@+id/drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<FrameLayout android:id="@+id/fragment_container"
android:layout_below="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:id="@+id/left_drawer"
android:layout_gravity="start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:divider="#eee"
android:background="#EEE"
android:id="@+id/drawer_header">
<ImageView
android:id="@+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="@string/user_icon"
android:src="@drawable/ic_action_person"
android:paddingTop="0dp"
android:paddingLeft="0dp"/>
<TextView
android:id="@+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/user_icon"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:textSize="14sp"
android:text="@string/not_logged_in"
android:paddingTop="0dp"
android:paddingBottom="0dp"/>
</RelativeLayout>
<ListView
android:id="@+id/drawer_list"
android:layout_below="@+id/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="0dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
style.xml中的设置:
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<item name="android:windowContentOverlay">@drawable/drawer_shadow</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/black</item>
</style>
有人可以帮忙吗?
谢谢!
更新 1:根据 Willis 的建议,我显示了阴影,但它不在工具栏下方,而是在工具栏左侧。
更新2:我注意到如果我不在toolbar.xml和styles.xml中设置windowContentOverlay,阴影实际上是在工具栏的顶部。
您可以使用setElevation
方法设置阴影量。例如:
getSupportActionBar().setElevation(25);
Increasing/decreasing 传递给 setElevation
的值将因此 increase/decrease 存在阴影效果。
这两个是完全不同的影子。 垂直 是DrawerLayout
。它应该显示在展开的抽屉旁边。 水平 是 LOLLIPOP
以下 API 上 windowContentOverlay
的一部分(在 LOLLIPOP
上是 @null
)。
当您使用 Toolbar
小部件时,工具栏不再是 window 装饰的一部分,因此阴影从 window over[ 的顶部开始=35=] 工具栏,而不是 下方的 (因此您希望 windowContentOverlay
为 @null
)。此外,您需要在 LOLLIPOP
之前的工具栏下方添加一个额外的空白 View
,并将其背景设置为可绘制的垂直阴影(从 #20000000
到 #00000000
的 8dp 高渐变效果最好).在 LOLLIPOP
上,您可以改为在工具栏上设置 8dp 高度。
注意:使用与抽屉阴影相同但水平的渐变以获得最佳效果。
要在工具栏下方显示阴影,请使用 Google Android 设计支持库中提供的 AppBarLayout。这是一个如何使用它的例子。
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
要使用 Google Android 设计支持库,请在您的 build.gradle 文件中输入以下内容:
compile 'com.android.support:design:22.2.0'
我正在使用AppCompat V7 的工具栏来替换以前的操作栏,并且希望像以前的操作栏一样具有工具栏的阴影。但是默认情况下工具栏没有阴影,我已经尝试了reddit中提到的修复。但运气不好。
设置阴影的代码:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
工具栏布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="?attr/actionBarSize"
android:background="#F1F1F1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
foreground="?android:windowContentOverlay">
activity布局:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:id="@+id/drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<FrameLayout android:id="@+id/fragment_container"
android:layout_below="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:id="@+id/left_drawer"
android:layout_gravity="start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:divider="#eee"
android:background="#EEE"
android:id="@+id/drawer_header">
<ImageView
android:id="@+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="@string/user_icon"
android:src="@drawable/ic_action_person"
android:paddingTop="0dp"
android:paddingLeft="0dp"/>
<TextView
android:id="@+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/user_icon"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:textSize="14sp"
android:text="@string/not_logged_in"
android:paddingTop="0dp"
android:paddingBottom="0dp"/>
</RelativeLayout>
<ListView
android:id="@+id/drawer_list"
android:layout_below="@+id/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="0dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
style.xml中的设置:
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<item name="android:windowContentOverlay">@drawable/drawer_shadow</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/black</item>
</style>
有人可以帮忙吗?
谢谢!
更新 1:根据 Willis 的建议,我显示了阴影,但它不在工具栏下方,而是在工具栏左侧。
更新2:我注意到如果我不在toolbar.xml和styles.xml中设置windowContentOverlay,阴影实际上是在工具栏的顶部。
您可以使用setElevation
方法设置阴影量。例如:
getSupportActionBar().setElevation(25);
Increasing/decreasing 传递给 setElevation
的值将因此 increase/decrease 存在阴影效果。
这两个是完全不同的影子。 垂直 是DrawerLayout
。它应该显示在展开的抽屉旁边。 水平 是 LOLLIPOP
以下 API 上 windowContentOverlay
的一部分(在 LOLLIPOP
上是 @null
)。
当您使用 Toolbar
小部件时,工具栏不再是 window 装饰的一部分,因此阴影从 window over[ 的顶部开始=35=] 工具栏,而不是 下方的 (因此您希望 windowContentOverlay
为 @null
)。此外,您需要在 LOLLIPOP
之前的工具栏下方添加一个额外的空白 View
,并将其背景设置为可绘制的垂直阴影(从 #20000000
到 #00000000
的 8dp 高渐变效果最好).在 LOLLIPOP
上,您可以改为在工具栏上设置 8dp 高度。
注意:使用与抽屉阴影相同但水平的渐变以获得最佳效果。
要在工具栏下方显示阴影,请使用 Google Android 设计支持库中提供的 AppBarLayout。这是一个如何使用它的例子。
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
要使用 Google Android 设计支持库,请在您的 build.gradle 文件中输入以下内容:
compile 'com.android.support:design:22.2.0'