Котошоп: Tint. 50 оттенков серого

В Lollipop у Drawable-объектов появилась поддержка оттенков (Tint)

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

Управление оттенками может пригодиться для создания значков разных цветов, например, для значков меню в Toolbar. Вам не нужно создавать наборы значков, достаточно создать один значок и управлять его цветом.

Добавить поддержку оттенка можно через новый атрибут android:tint у элемента bitmap.

Создадим в папке res/drawable новый файл tint.xml:


<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_launcher_cat"
    android:tint="@color/red_tint"/>

В качестве источника указали значок, а для оттенка выбрали красный цвет. Его определим как ресурс.


<color name="red_tint">#FF0000</color>

Разместим два ImageView и сравним их.


...
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView"
    android:src="@drawable/ic_launcher_cat"
    android:layout_marginBottom="294dp"
    android:layout_alignBottom="@+id/imageView2"
    android:layout_alignParentStart="true" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView2"
    android:src="@drawable/tint"
    android:layout_marginTop="285dp"
    android:layout_below="@+id/textView"
    android:layout_alignParentEnd="true" />
...

Результат. Пример немного надуманный, чтобы было проще понять принцип работы с оттенками.

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

Помимо атрибута android:tint (цвет, который накладывается на src), можно добавить атрибут android:tintMode — способ смешения цветов (будут ли смешиваться альфа-каналы (прозрачность) заданного цвета и основного ресурса).

Аналогично можно поступить с фоном, используя следующие атрибуты.

android:background - стандартный атрибут (цвет, картинка, значок, фигура или селектор, описанный в xml-файле)
android:backgroundTint - цвет, который будет накладываться на background
android:backgroundTintMode - способ смешения цветов

Ёлочка, зажгись! Программное включение оттенков

Старый пример для Java.

Коты очень любят залезать на новогодние ёлки. А если при этом ёлки падают, то сами виноваты. Надо лучше закреплять дерево.

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

Разместим две картинки рядом.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <ImageView
        android:id="@+id/star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/star" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/textView"
        android:src="@drawable/firtree" />

</RelativeLayout>

Напишем код для активности.


package ru.alexanderklimov.lollipop;

import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ImageView;

import java.util.Random;

public class MainActivity extends Activity {

    private Handler mHandler = new Handler();
    private int[] mStarLightsArray = new int[] {Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            mHandler.postDelayed(runnable, 500);
        }
    }

    private Runnable runnable = new Runnable() {
        @Override
        public void run() {
            mHandler.removeCallbacks(runnable);
            ImageView starImageView = (ImageView) findViewById(R.id.star);
            Random random = new Random();
            int randomColor = random.nextInt(mStarLightsArray.length);
            starImageView.getDrawable().setTint(mStarLightsArray[randomColor]);
            mHandler.postDelayed(runnable, 500);
        }
    };
}

С помощью метода setTint() мы устанавливаем случайный цвет из массива (красный, синий, зелёный, жёлтый) и закрашиваем выбранным цветом серую звезду. Смена цветов происходит каждые полсекунды. Ёлочка зажглась!

Котошоп: Tint. 50 оттенков серого

Ёлочка, зажгись! Программное включение оттенков

Реклама

Реклама