Android CollapsingToolbarLayout标题背景

我正在使用新的Androiddevise支持库中的CollapsingToolbarLayout。

我已经设置了它的标题，它工作正常，唯一的问题是，当你滚动，文本丢失，取决于在背景中的图像。

我想要做的是为CollapsingToolbarLayout标题设置一个背景，但是我没有find办法。

有没有办法做到这一点？

谢谢！

布局：

<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"); 

编辑：

在这里，当我折叠工具栏时，您可以看到一系列图像。 你可以看到标题文本是不可读的。 问题是，我没有控制我显示的图像，所以对于一些图像看起来不错，但是对于其他人来说，像这个例子一样，它看起来不好看，而且不可读。 我想到的可能是为文本添加某种背景，所以在文本的背面总是有相同的颜色，并且总是可读的。

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> 

对于颜色，你应该在最初的testing中使它们变得更暗，所以你可以使用它更明显，但是对于我使用的产品：

 <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的高度。

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> 

Answer 3

编辑：

如果要在工具栏“缩小”后更改颜色，则需要将折叠工具栏布局的contentScrim属性设置为该颜色：

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

按照我的理解，将这个属性的值指向想要工具栏的颜色将解决你的问题。

希望这能回答你的问题！

Answer 4

通过编写大量的代码，在这里做了很多工作。 我通过2种方式实现了这一点。

1通过使用View with TransparentBlack颜色的简单解决方法
CODE >>

代码解释：
1 CollapsingToolbarLayout只有文本大小的样式。
2默认CollapsingToolbarLayout边距底部被覆盖到16dp。
3.我们的视差标题collapseMode是一个带有ImaveView和View的RelativeLayout。
4.顶部标题底部带有BG的简单视图对比色（此处为＃77000000）的相对布局，用作CollapsingToolbarLayout的折叠标题的白色BG。

  <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请更新或问，如果有任何困惑:)