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

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

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

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

Редактировать:

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

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

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

Внутри вашего 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> 

И для измерений я использовал высоту 88 дп.

Используйте scrim для защиты текста от примера Amagi82 и добавьте в CollapsingToolbarLayout параметр app:expandedTitleTextAppearance expandTitleTextAppearance.

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

Редактировать:

Если вы хотите изменить цвет панели инструментов, как только она «сжалась», вам необходимо установить атрибут contentScrim разметки панели инструментов на этот цвет:

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

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

Надеюсь это ответит на твой вопрос!

Это большая работа, которую можно достичь, написав большую часть кода. Я достиг этого двумя способами.

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

Обозначение кода:
1 CollapsingToolbarLayout имеет стиль с только размером текста.
2 По умолчанию CollapsingToolbarLayout margin bottom переопределяется до 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 Название расширено Полностью:

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

Б) Когда CollapsingToolbarLayout Title уменьшается при прокрутке вверх:

Сокращение

2 Ответ выше

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

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

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

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