向 CollapsingToolbarLayout 添加褪色稀松布

Question

如何在 CollapsingToolbar 布局的标题上获得褪色的稀松布？

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

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

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

Answer 2

在我向包含 shape_scrim.

的视图添加 z-axis 翻译值后，

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
    ...
    ... />

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

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

向 CollapsingToolbarLayout 添加褪色稀松布

Adding a fading scrim to a CollapsingToolbarLayout

android

android-design-library