Question

如何在CollapsingToolbar Layout的标题上获得淡化的稀松布？

我已成功使用app:expandedTitleTextAppearance属性设置文字大小和颜色，但无法弄清楚如何为文字提供背景。

我知道这是可能的，因为我可以看到WhatsApp已经在其Group Info屏幕中完成了它。

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

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

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

4 个答案: