Question

背景

我正在尝试使用Android设计支持库对重叠的内容进行折叠工具栏。

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

问题

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

代码

以下是使用的布局及其引用自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重叠内容”演示，它似乎在没有闪烁问题的情况下正常工作。

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">

CollapsingToolbarLayout以重叠内容闪烁

1 个答案: