Android折叠式标题栏布局（CollapsingToolbarLayout）标题背景

Question

我正在使用最新的Android Design支持库中的CollapsingToolbarLayout。

我已经设置了它的标题，而且它也工作得很好，唯一的问题是当你滚动时，文本会随着背景图像的变化而消失。

我想做的是将一个背景设置给CollapsingToolbarLayout的标题，但我还没有找到方法。

有没有办法实现这个功能呢？

布局：

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
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"
android:fitsSystemWindows="true">

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

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_gravity="fill_vertical"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="24dp">

        <android.support.v7.widget.CardView
            android:id="@+id/cvDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp">

            <LinearLayout
                style="@style/Image.Info.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/description"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                <TextView
                    android:id="@+id/tvDescription"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text=""/>

            </LinearLayout>

        </android.support.v7.widget.CardView>


    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

在活动中设置CollapsingToolbarLayout标题：

CollapsingToolbarLayout collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Some title here");

编辑：

在这里，您可以看到我折叠工具栏时的一系列图像。您可以看到标题文本无法阅读。问题在于我无法控制显示的图片，因此对于某些图片，它看起来还不错，但对于其他图片（例如此示例），它看起来很糟糕且无法阅读。我想到的是可能在文本后面添加某种背景色，以便文本始终有相同的背景色并且始终可读。

- roy_lennon

---

无需添加代码，只需简单的协调器工具栏布局。这里没有花哨的东西 - 但我还是会使用它。 - roy_lennon

@Jared Burrows，这里不需要代码，只是基本的功能。此外，为什么要留下评论呢？如果你不想帮忙，就关闭标签页，继续过自己的生活。 - vvbYWf0ugJOGNA3ACVxp

嗨@roy_lennon，我也遇到了与您完全相同的问题，但是我已经应用了下面描述的解决方案，但没有任何后果，我仍然可以像之前一样在collapsingtoolbarlayout中看到imageview（正如您在问题描述中所述），你能帮我吗？ - neteot

@roy_lennon 你好，你如何动态地将图像添加到CollapsinToolbarLayout中？ - Farid

Answer 1

使用文本保护蒙版（向下滚动一点）。我的示例假设标题文本是白色的，因此可能需要进行一些调整以优化您的情况。

在CollapsingToolbarLayout中，在ivBigImage后添加以下内容：

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/sheet_text_scrim_height_top"
    android:background="@drawable/scrim_top"
    app:layout_collapseMode="pin"/>

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/sheet_text_scrim_height_bottom"
    android:layout_gravity="bottom"
    android:layout_alignBottom="@+id/image"
    android:background="@drawable/scrim_bottom"/>

在您的Drawable文件夹中添加：

scrim_top.xml

。

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="270"
    android:startColor="@color/translucent_scrim_top"
    android:centerColor="@color/translucent_scrim_top_center"
    android:endColor="@android:color/transparent"/>
</shape>

和 scrim_bottom.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="90"
    android:startColor="@color/translucent_scrim_bottom"
    android:centerColor="@color/translucent_scrim_bottom_center"
    android:endColor="@android:color/transparent"/>
</shape>

对于颜色，您应该在初始测试中使其变暗，以便更明显地表明它已经生效，但是在实际生产中，我使用了：

<color name="translucent_scrim_top">#26000000</color>
<color name="translucent_scrim_top_center">#0C000000</color>
<color name="translucent_scrim_bottom">#2A000000</color>
<color name="translucent_scrim_bottom_center">#0D000000</color>

至于尺寸，我使用了88dp的高度。

- Jim Pekarek

---

谢谢，这似乎解决了我的问题。我需要稍微尝试和调整一下，但我认为这就是答案。谢谢！ - roy_lennon

你好@Amagi82，我一直在尝试使用你的解决方案来解决我的应用程序中出现的问题，但它并没有起作用。第一个视图（按钮的上部视图）可以正常工作，如果你在Android Studio的xml布局中使用“design”选项卡，它就会出现，但是另一个视图（底部视图）不显示，并且在xml的设计选项卡中，它出现在其他组件之上，超出了协调布局...你知道可能发生了什么吗？谢谢！ - neteot

@neteot 如果没有看到您的代码和发生情况的图像，我就不确定，但我首先要检查的是我在布局中放置视图的位置和顺序。遮罩是否在CollapsingToolbarLayout内？它们的顺序是什么？它们按顺序绘制，因此如果您在FrameLayout（如CollapsingToolbarLayout）中的另一个视图之后放置了全尺寸图像，则会在其上方绘制。如果有帮助，请告诉我，或者请澄清我是否走错了路。祝你好运。 :) - Jim Pekarek

我在我的 View 中添加了 android:fitsSystemWindows="true"。否则，它会从状态栏下方开始，看起来很糟糕。 - Albert Vila Calvo

@Amagi82 终于做到了！！经过两天的奋斗，我找到了解决方案……在等级文件中，我使用的是支持库版本22.+，而它必须是23.+……我都快疯了！非常感谢你！ - neteot

Answer 2

参考Amagi82的文本保护屏幕示例，在CollapsingToolbarLayout上添加app:expandedTitleTextAppearance参数。

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    .
    app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"
    .
    .
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

例如，将以下内容添加到您的样式xml中：

<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">
    <item name="android:shadowDy">0</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowRadius">8</item>
    <item name="android:shadowColor">@android:color/black</item>
</style>

- Joao Ferreira

---

这是一个非常简单的解决方法！我还没有尝试其他的。 - sebasira

简单易懂。对我来说唯一剩下的问题是返回按钮，如果背景是白色的...看起来它无法检测到背景图像以相应地更改其颜色。 - chitgoks

Answer 3

编辑：

如果您想在工具栏“收缩”后更改其颜色，则需要将可折叠式工具栏的contentScrim属性设置为该颜色：

<android.support.design.widget.CollapsingToolbarLayout
        app:contentScrim="@color/[color you want]"
        ...>

将此属性的值指向您希望工具栏变成的颜色将解决您的问题，我理解就是这样。

希望这回答了您的问题！

- Shubhang Desai

---

我已经有这个了，我只想让折叠工具栏标题的背景颜色变成另一种颜色。 - roy_lennon

@roy_lennon 对不起，我完全误解了问题。请查看编辑。 - Shubhang Desai

谢谢！我已经知道那个了……但这不是我想做的……我想在折叠之前更改Collapsing Toolbar Layout的标题…… - roy_lennon

这是你在寻找的吗？ - Shubhang Desai

不是的，我需要添加背景颜色，而不是更改标题字体颜色... - roy_lennon

Answer 4

这是一个需要编写大量代码实现的工作。我通过两种方法来实现。
1.使用具有TransparentBlack颜色的View进行简单的解决方案

代码说明：
1.CollapsingToolbarLayout具有仅包含文本大小的样式。
2.默认的CollapsingToolbarLayout底部距离被覆盖为16dp。
3.我们的带视差滚动效果的标题是一个RelativeLayout，其中包括一个ImaveView和一个View。
4.这个简单的带有对比色背景（这里是＃77000000）的View位于顶部标题RelativeLayout的底部，并且充当CollapsingToolbarLayout折叠后白色标题的背景。

  <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/redeem_detail_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_window_background"
        android:fitsSystemWindows="true"
        app:expandedTitleMarginBottom="16dp"
        app:expandedTitleTextAppearance="@style/CollapsingTitleStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!--header view-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/redeem_detail_top_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/splash" />

            <!--A view that draws a semi tranparent black overlay so that title is visible once expanded -->
            <View
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_alignParentBottom="true"
                android:background="@color/black_transparent" />

        </RelativeLayout>

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

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

样式1的图片:

a) 当CollapsingToolbarLayout标题完全展开时：

b) 当CollapsingToolbarLayout标题在向上滚动时缩小：

2 回答 如上

Joao Ferreira已经提到了方法。

这是当shadowRadius=16时的样子：注意阴影

PS 如果有任何疑问，请更新或询问更多 :)

- sud007