【问题标题】:Material Design - AppCompat toolbar without showing shadowMaterial Design - AppCompat 工具栏不显示阴影
【发布时间】:2015-03-26 16:39:37
【问题描述】:

我正在使用 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">

活动布局:

<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,阴影实际上是在toolbar的顶部。

【问题讨论】:

  • 这两个是完全不同的阴影。垂直的是DrawerLayout。它应该显示在展开的抽屉旁边。水平的是windowContentOverlayLOLLIPOP 下面的API 的一部分。当您使用Toolbar 小部件时,工具栏不是窗口装饰的一部分,因此阴影从工具栏上方的窗口顶部开始,而不是在其下方。您需要在ToolbarLOLLIPOP 下方添加一个额外的空View,并将其背景设置为可绘制的垂直阴影(8dp 高#20000000#00000000)。在LOLLIPOP 上,您可以在工具栏上设置 8dp 高度。
  • 嗨,Eugen,你拯救了我的一天。这正是我所需要的,并且在棒棒糖之前运行良好。这应该是正确的答案。您可以将其发布为答案,我可以接受。非常感谢!
  • 刚刚做到了,很高兴能为您服务。

标签: android android-appcompat material-design android-toolbar


【解决方案1】:

您可以使用setElevation 方法设置阴影量。例如:

getSupportActionBar().setElevation(25);

增加/减少传递给setElevation 的值将因此增加/减少阴影效果的存在。

【讨论】:

  • 谢谢威利斯,我的问题有些混乱,实际上我需要显示阴影,但我没有找到使它工作的解决方案。是否可以为高程设置其他值以显示阴影?
  • 您好,威利斯,非常感谢!我还为应用程序设置了主题。我现在显示了阴影,但它不在工具栏下方。还有什么建议吗?
  • 嗯。看看在Toolbar 属性中指定海拔是否会有所不同。将以下内容添加到 Toolbar 布局:android:elevation="20dp"。然后删除getSupportActionBar().setElevation(25);
  • 再次感谢威利斯!我这边有一些困惑,我应该提一下模拟器是 android 4.0 版。你建议的适用于 5.0,而我的问题是 4.0。
【解决方案2】:

这两个是完全不同的阴影。 垂直DrawerLayout。它应该显示在展开的抽屉旁边。 水平的windowContentOverlayLOLLIPOP以下API的一部分(LOLLIPOP@null)。

当您使用Toolbar 小部件时,工具栏不再是窗口装饰的一部分,因此阴影从窗口顶部开始 工具栏而不是下方 它(所以你希望windowContentOverlay@null)。此外,您需要在工具栏前的LOLLIPOP 下方添加一个额外的空View,并将其背景设置为可绘制的垂直阴影(从#20000000#00000000 的8dp 高渐变效果最好)。在LOLLIPOP 上,您可以改为在工具栏上设置 8dp 高度。

注意:使用与抽屉阴影相同但水平的渐变以获得最佳效果。

【讨论】:

    【解决方案3】:

    要在工具栏下显示阴影,请使用 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'
    

    【讨论】:

      猜你喜欢
      • 2019-12-23
      • 2014-12-25
      • 2016-03-06
      • 1970-01-01
      • 1970-01-01
      • 2015-01-31
      • 1970-01-01
      • 1970-01-01
      • 2016-10-27
      相关资源
      最近更新 更多