Затемнение Изображения В Collapsingtoolbarlayout Или Image Scrim

Здравствуйте, Хабражители и любители Android-разработки.

В этой статье я хочу поделиться с вами, как мне кажется, нужной и интересной информацией.

Речь пойдет о таком понятии, как Image Scrim (скажу сразу, это понятие я ввел сам).

Предисловие

Проект предполагал получение данных через Dribbble API. При получении изображений и их сортировке в RecyclerView мне приходилось передавать изображение из одного действия в другое.

Так как в этом проекте нужно было использовать современные решения, я решил реализовать всё это при нажатии на элемент в RecyclerView с помощью CollapsingToolbarLayout и вставке в него изображения.

Чтобы было понятнее, о чем я говорю (читай «не лей воду»), приведу пример:



Как вы можете видеть на этой гифке, изображение расположено на белом фоне, и если бы не Image Scrim, который я реализовал, то заголовок изображения «Happy Octopus» не был бы виден (белый шрифт на белом изображении).

.

Ну а теперь приступим к реализации.

Выполнение

   

 <android.support.design.widget.CollapsingToolbarLayout
             android:id="@+id/collapsing_toolbar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:fitsSystemWindows="true"
             app:contentScrim="Эattr/colorPrimary"
             app:layout_scrollFlags="scroll|exitUntilCollapsed"
             app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large">
 
             <ImageView
                 android:id="@+id/image_shot"
                 android:layout_width="match_parent"
                 android:layout_height="@dimen/shot_image_height"
                 android:background="@color/colorPrimary"
                 android:scaleType="centerCrop"
                 app:layout_collapseMode="parallax" />
 
             <View
                 android:layout_width="match_parent"
                 android:layout_height="@dimen/text_scrim_height_top"
                 android:background="@drawable/scrim_top"
                 app:layout_collapseMode="pin"/>
 
             <View
                 android:layout_width="match_parent"
                 android:layout_height="88dp"
                 android:layout_gravity="@dimen/text_scrim_height_bottom"
                 android:layout_alignBottom="@+id/image_shot"
                 android:background="@drawable/scrim_bottom"/>.



   

4. Добавьте следующие строки в dimens.xml:

<dimen name="text_scrim_height_top">50dp</dimen> <dimen name="text_scrim_height_bottom">88dp</dimen>

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

P.S. Надеюсь, статья была полезной.

Буду рад ответить на все вопросы, если они у вас возникнут. П.

П.

С.

Следующая небольшая таблица с альфа-каналами цветов также может оказаться полезной для выбора желаемой прозрачности для Image Scrim.



Теги: #Android #разработка для Android #мобильные приложения #разработка для Android #приложения для Android #Разработка мобильных приложений #разработка для Android

• Sap Business One – Упрощенное Erp Для Компании Среднего Размера

  19 Oct, 24

• Исследование: На Что Тратят Электронные Деньги В России?

  19 Oct, 24

• Введение В Gitops Для Openshift

  19 Oct, 24

• Дмитрий Муромцев (Итмо) – Об Онтологическом Моделировании И Формировании Разговорного Интеллекта

  19 Oct, 24

• Хватит Терпеть Жару В Квартирах

  19 Oct, 24

• Почему Стоит Полностью Перейти На Ceylon Или Kotlin (Часть 1)

  19 Oct, 24

• Есть Ли У Биткойна Шанс Стать Чем-То Серьезным?

  19 Oct, 24

• Научная Деятельность. Низкий Старт

  19 Oct, 24

• Релиз Clion 2021.2: Улучшения В Отладчике, Проверка Времени Жизни Объектов, Поддержка Пресетов Cmake

  19 Oct, 24

• Мини-Империи

  19 Oct, 24