Подтвердить что ты не робот

Android CollapsingToolbarLayout Название фона

Я работаю с CollapsingToolbarLayout из новой библиотеки поддержки дизайна Android.

Я установил свой заголовок, и он работает нормально, единственная проблема, которая у меня до сих пор заключается в том, что при прокрутке текст теряется в зависимости от изображения в фоновом режиме.

Что бы я хотел сделать, задан фон заголовка 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");

Edit:

Здесь вы можете увидеть последовательность изображений, когда я сбрасываю панель инструментов. Вы можете видеть, как текст заголовка не читается. Проблема в том, что у меня нет контроля над изображениями, которые я показываю, поэтому для некоторых изображений он выглядит нормально, но для других, как этот пример, он выглядит не совсем хорошо, и он не читается. То, что я имел в виду, возможно, добавило какой-то фон в текст, так что всегда есть тот же цвет в конце текста, и он всегда читаем.

введите описание изображения здесь

4b9b3361

Ответ 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"/>

В вашей папке "Живая" добавьте:

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.

Ответ 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>

Ответ 3

Edit:

Если вы хотите изменить цвет панели инструментов, как только она "сжалась", вам необходимо установить атрибут contentScrim разворачивающейся панели панели инструментов на этот цвет:

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

Указание значения этого атрибута на цвет, который вы хотите включить в панель инструментов, решит вашу проблему, как я ее понимаю.

Надеюсь, что ответит на ваш вопрос!

Ответ 4

Чтобы достичь этой цели, много написано, написав большую часть кода. Я достиг этого двумя способами.

1 Простой обходной путь с использованием цвета View with TransparentBlack
CODE →

Объяснение кода:
1 CollapsingToolbarLayout имеет стиль с только размером текста.
2 По умолчанию CollapsingToolbarLayout край поля переопределяется до 16dp.
3. Наш заголовок с parallax collapseMode является RelativeLayout с ImaveView и представлением.
4. Этот простой вид с BG в нижней части верхнего заголовка. Относительная компоновка с цветом контраста (здесь # 77000000), действует как BG для 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 Title расширяется полностью:

Расширенное название

b) Когда CollapsingToolbarLayout Название сокращается при прокрутке вверх:

Сокращение

2 Ответ выше

Метод упоминается уже Жоао Феррейрой.

Вот как это выглядит с помощью shadowRadius = 16: Обратите внимание на тень

введите описание изображения здесь

PS, пожалуйста, обновите или спросите больше, если есть какие-либо недоразумения:)