Android CollapsingToolbarLayout 标题背景 [英] Android CollapsingToolbarLayout Title background

问题描述

我正在使用新的 Android 设计支持库中的 CollapsingToolbarLayout.

我已经设置了它的标题并且它工作正常，我仍然遇到的唯一问题是当你滚动时，文本会丢失，这取决于背景中的图像.

我想做的是为 CollapsingToolbarLayout 标题设置背景，但我还没有找到方法.

有没有办法做到这一点?

布局:

解决方案
使用 文本保护纱布(向下滚动一点).我的示例假设标题文本为白色，因此可能需要进行一些调整以针对您的情况进行优化.
在您的 CollapsingToolbarLayout 中，在 ivBigImage 之后添加以下内容:
<查看android:layout_width="match_parent"android:layout_height="@dimen/sheet_text_scrim_height_top"android:background="@drawable/scrim_top"app:layout_collapseMode="pin"/><查看android:layout_width="match_parent"android:layout_height="@dimen/sheet_text_scrim_height_bottom"机器人:layout_gravity="底部"android:layout_alignBottom="@+id/image"android:background="@drawable/scrim_bottom"/>
在您的 Drawable 文件夹中，添加:
scrim_top.xml
<梯度机器人:角度=270"android:startColor="@color/translucent_scrim_top"android:centerColor="@color/translucent_scrim_top_center"android:endColor="@android:color/transparent"/></形状>
和 scrim_bottom.xml
<梯度机器人:角度=90"android:startColor="@color/translucent_scrim_bottom"android:centerColor="@color/translucent_scrim_bottom_center"android:endColor="@android:color/transparent"/></形状>
对于颜色，您应该在初始测试中使这些颜色更深，这样您就可以更明显地使用它，但对于生产，我使用了:
<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 的高度.
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. 

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?

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


Setting up the CollapsingToolbarLayout title in the activity:
CollapsingToolbarLayout collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Some title here");
Edit:

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

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:layout_alignBottom="@+id/image"
    android:background="@drawable/scrim_bottom"/>
In your Drawable folder, add:

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>
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>
For colors, you should make these darker in initial testing so it's more obvious you have it working, but for production I used:
<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>
And for dimensions, I used a height of 88dp.

                        
这篇关于Android CollapsingToolbarLayout 标题背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！