android - CollapsingToolbarLayout 内容重叠闪烁

Question

背景

我正在尝试使用 Android 设计支持库制作一个包含重叠内容的折叠工具栏。

它类似于 Google Play 商店电影页面，其中电影海报与上方折叠工具栏中的视差图像略有重叠。

问题

我在向上滚动时遇到了一个问题，电影海报在视差图像后面，然后重新绘制到顶部。导致图像闪烁。

Animated gif of the issue

代码

下面是使用的布局，它引用自 Google 的 SupportDesignDemo。

https://android.googlesource.com/platform/development/+/master/samples/SupportDesignDemos/res/layout/design_appbar_toolbar_parallax_overlap.xml

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_height="192dp"
        android:layout_width="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_app_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_scrollInterpolator="@android:anim/decelerate_interpolator"
            app:contentScrim="?attr/colorPrimary">

            <ImageView
                android:id="@+id/app_bar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/backdrop"
                android:scaleType="centerCrop"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>

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

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

    <android.support.v4.widget.NestedScrollView 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"
                                                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                                                app:behavior_overlapTop="50dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:orientation="vertical">

            <ImageView android:layout_width="150dp"
                       android:layout_height="220dp"
                       android:padding="15dp"
                       android:src="@drawable/poster"
                       android:layout_marginLeft="16dp"/>

            <TextView
                android:id="@+id/textview_dialogue"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

注意事项

下载了“Android API 演示”，尝试了“AppBar/Parallax Overlapping content”演示，它似乎工作正常，没有闪烁问题。

Answer 1

找到答案了!这很简单。将 elevation 添加到 AppBarLayout 将修复闪烁。

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_height="192dp"
    android:layout_width="match_parent"
    app:elevation="1dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">