向 CollapsingToolbarLayout 添加渐变稀松布答案

【问题标题】：Adding a fading scrim to a CollapsingToolbarLayout向 CollapsingToolbarLayout 添加渐变稀松布
【发布时间】：2015-07-21 00:38:12
【问题描述】：

如何在 CollapsingToolbar 布局的标题上获得褪色纱幕？

我已经使用app:expandedTitleTextAppearance 属性成功设置了文本大小和颜色，但不知道如何给文本添加背景。

我知道这是可能的，因为我可以看到 WhatsApp 在其群组信息屏幕中已经做到了。

【问题讨论】：

嗨！我读到你能做到这一点，我正面临这个问题，你能帮帮我吗？
我最终没有这样做。看起来 WhatsApp 可能正在使用他们自己的折叠工具栏布局实现
我设法在折叠工具栏的上侧添加了覆盖半透明效果（这很好，因为我的上插入符号是白色的，并且很难看到浅色图像）但底部的覆盖效果我没有'不知道怎么做，事实证明，如果你设置android:layout_gravity="bottom"，视图不会出现在布局中（不是视图也不是textview或其他任何东西，只有底部）

标签： android android-design-library

【解决方案1】：

我能够做到的唯一方法是在工具栏后面放置一个视图，如下所示：

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

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

有了 shape_scrim.xml 看起来像这样：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="90"
    android:endColor="#00000000"
    android:startColor="#BB000000"/>
</shape>

【讨论】：

【解决方案2】：

在我将 z 轴平移值添加到包含 shape_scrim 的视图后，bkurzius 实现对我有用。

<View
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@drawable/shape_scrim"
     android:layout_gravity="bottom"
     android:translationZ="8dp"/>

<ImageView
    ...
    ... />

【讨论】：

【解决方案3】：

感谢 bkurzius，在我像这样更改 shape_scrim.xml 后，您的实现对我有用（使其容器视图从上到下产生淡化效果），源代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="#BB000000"
        android:startColor="#00000000"/>
</shape>

我的 CollapsingToolbar 看起来像这样：

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

            <android.support.v7.widget.ViewStubCompat
                android:id="@+id/background_collapsing_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

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

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

【讨论】：

【解决方案4】：

另一种方法是利用 app:contentScrim=""

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:minHeight="?attr/actionBarSize"
    android:gravity="bottom"
    android:theme="@style/AppTheme.AppBarOverlay">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        **app:contentScrim="@color/colorPrimary"**
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageViewGroupAvatar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop"
                android:src="@drawable/bonga_avatar"
                app:layout_collapseMode="parallax" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/imageview_background_gradient_profile" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:layout_marginRight="@dimen/eight_margin"
                android:padding="@dimen/eight_margin"
                android:tint="#901E78"
                app:srcCompat="@drawable/ic_camera" />

        </FrameLayout>

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center|left"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/toolbarTextViewGroupName"
                    style="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    tools:text="Group Profile" />

            </LinearLayout>
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

【讨论】：