Android的CollapsingToolbarLayout标题背景 [英] Android CollapsingToolbarLayout Title background
问题描述
我是从全新的Android设计支持库正与CollapsingToolbarLayout。
I'm working with the CollapsingToolbarLayout from the new Android Design Support Library.
我已经设置其标题和它工作正常，唯一的问题，我仍然有就是当你滚动，文本丢失，根据在背景图像上。
I have set its title and it is working fine, the only problem I still have is that when you scroll, the text is lost, depending on the image in the background.
我想要做的，设置一个背景，CollapsingToolbarLayout冠军，但我还没有找到一个方法来做到这一点。
What I'd like to do, is set a background to the CollapsingToolbarLayout title, but I haven't find a way to do it.
反正有没有做到这一点？
Is there anyway to achieve this?
谢谢！
布局：
<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标题：
Setting up the CollapsingToolbarLayout title in the activity:
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Some title here");
编辑：
在这里，您可以看到图像序列时，我崩溃了工具栏。你可以看到标题文字怎么不可读。问题是，我没有，我显示图像的控制研究，因此对于一些图像看起来不错，但对于其他人，像这样的例子，它看起来并不擅长的一切，这是无法读取。我脑子里想的是也许添加某种背景的文本，所以总有相同的颜色在文本的后面，它始终是可读的。
Here you can see a sequence of images when I collapse the toolbar. You can see how the title text is not readable. The problem is that I don't have controll of the images that I show, so for some images it looks ok, but for others, like this example, it doesn't look good at all and it is not readable. What I had in mind was maybe add some kind of background to the text, so there is always the same color at the back of the text and it is always readable.
推荐答案
使用的正文保护麻布（向下滚动了一点）。我的例子假定标题文字是白色的，因此有些调整可能是必要的优化您的案件。
Use a text protection scrim(scroll down a bit). My example assumes the title text is white, so some tweaks may be necessary to optimize for your case.
在你的 CollapsingToolbarLayout ，添加以下ivBigImage后：
Inside your CollapsingToolbarLayout, add the following after 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:background="@drawable/scrim_bottom"/>
在你的绘制对象文件夹中添加：
In your Drawable folder, add:
scrim_top.xml
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
and 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的高度。
And for dimensions, I used a height of 88dp.
这篇关于Android的CollapsingToolbarLayout标题背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
