如何使渐变形状留在CollapsingToolbarLayout标题后面

Question

我一直在玩Chris Bane关于折叠工具栏布局的Cheesesquare示例应用程序,我在折叠工具栏上添加标题后面的渐变时遇到问题,因此即使背景很亮,标题仍然可读.

我在stackoverflow上看到过一个解决这个问题的解决方案.

该解决方案将渐变"附加"到图像本身而不是"折叠"工具栏的底部.当你向下滚动时,会发生的情况是,随着视线的视线偏离,该渐变将随着图像消失.我想让渐变跟随工具栏折叠(并保持视差效果).

这段简短的视频应该可以解决问题:https://vid.me/J225

activity_contact_detail.xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    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"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

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

            <View
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:layout_gravity="bottom"
                android:background="@drawable/backdrop_bg"/>
        </FrameLayout>


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

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

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

...

<View
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@drawable/backdrop_bg"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"/>

backdrop_bg.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#0000"
        android:startColor="#303F9F"
        android:type="linear"/>
    <corners android:radius="0dp"/>
</shape>

非常欢迎任何帮助!

Answer 1

傻傻的,我回到这个问题并找到了解决方案.@whaleswallace让我意识到CollapsingToolBarLayout扩展了FrameLayout本身(所以你不需要将图像和渐变视图包装在一起)所以这是一个添加android:layout_gravity ="center_horizo​​ntal | bottom到梯度视图的问题:

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

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="72dp"
                android:background="@drawable/backdrop_bg"
                android:layout_gravity="center_horizontal|bottom"/>

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

图像将进入"parallaxing",渐变将保持锚定在AppBarLayout的底部.