Урок 5. Работа с графическими ресурсами в Material Design

Содержание этого урока

  1. Тонирование элементов дизайна
  2. Извлечение главных цветов на изображении
  3. Создание векторных элементов

См. также

Указанные ниже возможности по работе с элементами дизайна позволяют реализовать в приложении элементы Material Design:

  • тонирование элементов дизайна;
  • извлечение главного цвета;
  • создание векторных элементов.

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

Тонирование элементов дизайна


В Android 5.0 (уровень API 21) и более поздних версий можно тонировать растровые изображения и изображения в формате NinePatch, определенные как альфа-маски. Для тонирования можно применять как цветовые ресурсы, так и атрибуты темы, которые разрешаются в цветовые ресурсы (например, ?android:attr/colorPrimary). Обычно такие ресурсы создаются только один раз, после чего они автоматически окрашиваются для соответствия цветам темы.

Тонирование можно применить к объектам BitmapDrawable и NinePatchDrawable с помощью методаsetTint(). Также можно задать цвет и способ тонирования в макетах, используя для этого атрибутыandroid:tint и android:tintMode.

Извлечение главных цветов на изображении


Во вспомогательной библиотеке Android r21 и более поздних версий содержится класс Palette, с помощью которого можно извлекать следующие главные цвета на изображении:

  • насыщенные цвета;
  • насыщенные темные цвета;
  • насыщенные светлые цвета;
  • приглушенные цвета;
  • приглушенные темные цвета;
  • приглушенные светлые цвета.

Для извлечения этих цветов передайте объект Bitmap в статический метод Palette.generate() в фоновом потоке, где загружаются изображения. Если невозможно использовать этот поток, вместо этого вызовите метод Palette.generateAsync() и укажите модуль прослушивания.

Извлечь главные цвета на изображении можно также с помощью методов getter из класса Palette, таких как Palette.getVibrantColor.

Чтобы использовать класс Palette в своем проекте, добавьте в модуль своего приложения следующую зависимость Gradle:

dependencies {
    ...
    compile 'com.android.support:palette-v7:21.0.0'
}

 

Дополнительные сведения представлены в справке по API для класса Palette .

Создание векторных элементов


ВИДЕО

Векторная графика в Android

В Android 5.0 (уровень API 21) и более поздних версий имеется возможность определить векторные элементы, которые можно масштабировать без ущерба для четкости. Для векторного изображения требуется лишь один файл ресурсов, тогда как для растровых изображений необходим отдельный файл ресурсов для каждой плотности экрана. Чтобы создать векторное изображение, укажите детали формы в XML-элементе <vector>.

В следующем примере создается векторное изображение в форме сердца.

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
    android:height="256dp"
    android:width="256dp"
    <!-- size of the virtual canvas -->
    android:viewportWidth="32"
    android:viewportHeight="32">

  <!-- draw a path -->
  <path android:fillColor="#8fff"
      android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

 

Векторные изображения представлены в Android как объекты VectorDrawable. Дополнительные сведения о синтаксисе pathData см. в справке по траекториям SVG. Дополнительные сведения об анимации свойств векторных элементов см. в разделе Анимация векторных элементов.

Комментарии: 1
Добавить комментарий