安卓设计库工具栏阴影

Question

尝试使用新的Android设计库时，我发现了一个与工具栏阴影相关的错误。当使用CollapsingToolbarLayout时，仅在折叠工具栏时才会出现工具栏下方的阴影。当我们展开它时，阴影会消失。我的布局看起来像这样：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="@dimen/user_avatar_height"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center_vertical"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/white"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

结果是这样的 当工具栏折叠时有一个阴影。 但是当展开它时，阴影消失了。

是否有解决此问题的解决方案？ 也许有一种方法来处理阴影的出现/消失？ 谢谢。

- Raman Branavitski

---

这可能不是一个错误 - 可能它的行为是有意为之的，就像在此页面底部“具有重叠内容的灵活空间”下所描述的那样：https://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling - JoeyJubb

你找到任何解决方案了吗？我认为这种行为是有意的，但如果你想在展开时也显示阴影，那么这似乎会很麻烦。我尝试监听AppBarLayout偏移量的变化并手动设置阴影，还将AppBarLayout包装在RelativeLayout中并手动放置一个阴影，但都不符合我的要求... - Thoast83

@Thoast83 在下面发布一个答案。 - Raman Branavitski

@RamanBranavitski，我不明白为什么你要回答我的问题，而我是在问你是否找到了解决方法...？但是今天我实际上找到了一种方法，也许有更好的方法，但它可以工作。你想让我把它发布为解决方案吗？ - Thoast83

Answer 1

更新

看起来谷歌的支持库团队在24.0.0版本中引入了这个行为，但是它有点有bug，所以现在需要做一个新的解决方案。

1 - 在res目录下的animator-v21文件夹中创建appbar_always_elevated.xml。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <objectAnimator android:propertyName="elevation"
                        android:valueTo="8dp"
                        android:valueType="floatType"
                        android:duration="1"/>
    </item>

</selector>

2 - 在AppBarLayout中使用：

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:stateListAnimator="@animator/appbar_always_elevated"
        android:theme="@style/AppTheme.AppBarOverlay">

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

---

旧答案

他们在新的支持库版本（24）中修复了这个问题，因此您只需要升级并使用正确的属性即可。

观看 https://youtu.be/w45y_w4skKs?t=31m52s

---

旧答案

我通过在ViewPager周围放置一个FrameLayout并设置android:foreground来解决了这个问题。

附上我正在使用的可绘制对象，并在此处提供链接

- Amilcar Andrade

Answer 2

在我的情况下，这段代码对我起作用！

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stateListAnimator="@null"
    android:elevation="4dp">

- devyunsy88

---

完美运行，谢谢，但需要最低API级别21。 - Drunken Daddy

Answer 3

@amilcar-andrade的回复帮助我找到了正确的解决方案，因为他的链接不正确。

您需要将stateListAnimator应用于您的AppBarLayout：

示例：

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="320dp"
    android:stateListAnimator="@animator/appbar_always_elevated"
    android:fitsSystemWindows="true">

使用此 XML 作为动画师：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <objectAnimator android:propertyName="elevation"
            android:valueTo="8dp"
            android:valueType="floatType"
            android:duration="1"/>
    </item>
</selector>

- Rafael Ruiz Muñoz

Answer 4

我只是像这样重写了CollapsingToolbarLayout的代码。

public class ShadowCollapsingToolbarLayout extends CollapsingToolbarLayout {

private AppBarLayout.OnOffsetChangedListener mOnOffsetChangedListener;

//constructors

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    ViewParent parent = this.getParent();
    if (parent instanceof AppBarLayout) {
        if (mOnOffsetChangedListener != null)
            ((AppBarLayout) parent).addOnOffsetChangedListener(mOnOffsetChangedListener);
    }
}

public void setOnOffsetChangeListener(AppBarLayout.OnOffsetChangedListener listener) {
    mOnOffsetChangedListener = listener;
}
}

在xml中使用它而不是本地CollapsingToolbarLayout，并设置监听器，如下所示

mCollapsingLayout.setOnOffsetChangeListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
                ViewCompat.setElevation(appBarLayout, appBarLayout.getTargetElevation());
            }
        });

- Raman Branavitski