Главная

Затемнение изображения в CollapsingToolbarLayout или Image Scrim

2017-01-09 в 15:29, admin, рубрики: android, android apps, android development, Android разработка, мобильные приложения, разработка мобильных приложений, Разработка под android

Привет, хабражителям и ~~любителям~~ профессионалам разработки под Android. В этой статье я хочу с вами поделиться на мой взгляд нужной и интересной информацией. Речь пойдет о такой вещи, как Image Scrim (скажу сразу, что данное понятие я ввел самостоятельно).

Предисловие

Не так давно занимаясь разработкой проекта, я столкнулся с небольшой неприятностью. Проект был связан с получением данных через Dribbble API. При получении изображения и сортировкой их в RecyclerView мне пришлось передавать имидж из одной активности в другую. Так как в этом проекте нужно было использовать современные решения, все это дело при клике на item в RecyclerView я решил реализовать с помощью CollapsingToolbarLayout и в него вставить Image.
Чтоб было понятней о чем я говорю (читай «не лить воду»), приведу пример:

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

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

Реализация

На самом деле т.н. Image Scrim — это обычные View элементы внутри CollapsingToolbarLayout.

1. В необходимом layout после имиджа внутри CollapsingToolbarLayout создаем две кастомные вьюхи, например так:

<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"/>...

2. Создаем 2 файла в 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>

3. Добавляем цвета в colors:

<color name="translucent_scrim_top">#33000000</color> 
<color name="translucent_scrim_top_center">#26000000</color>
<color name="translucent_scrim_bottom">#4D000000</color>
<color name="translucent_scrim_bottom_center">#40000000</color>

С прозрачностью цветов можно поиграться, чтоб подобрать более плавные цвета.

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

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

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

P.S. Надеюсь статья оказалось полезной. Буду рад ответить на все вопросы, если таковы будут.

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