Advertisement
  1. Code
  2. Material Design

Добавляем цвета в приложения для Android с Palette

by
Read Time:5 minsLanguages:

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Одной из определяющих особенностей дизайна material является использование цвета для выделения и подчеркивания контента на экране. Используя класс Palette, разработчики могут извлекать яркие цвета из растрового изображения для использования в своих приложениях для настройки элементов пользовательского интерфейса.

В этой статье вы узнаете, как создать объект Palette из растрового изображения. Внутри каждого Palette содержится набор объектов Swatch, которые позволят вам работать с определенными цветовыми профилями и списком видимых цветов изображения.

Example of the Palette colors generated from a base imageExample of the Palette colors generated from a base imageExample of the Palette colors generated from a base image

1. Создание Palette

Чтобы начать работу, вам нужно будет импортировать библиотеку поддержки палитры в ваш проект, включив следующую строку в узел зависимостей файла build.gradle вашего проекта. Поскольку это библиотека поддержки v7, классы, связанные с Palette, доступны обратно в Android API 7.

После запуска gradle sync в вашем проекте вы можете создать Palette из растрового изображения. Это можно сделать с помощью Palette.Builder либо синхронно, вызвав метод generate() без каких-либо параметров, либо асинхронно, вызвав функцию generate(Palette.PaletteAsyncListener listener). Поскольку для создания Palette может потребоваться время, рекомендуется, чтобы синхронный метод вызывался только из фонового потока. В дополнение к двум методам генерации, класс Palette.Builder имеет несколько других полезных методов, которые имеют свои собственные издержки:

  • maximumColorCount (int numOfSwatches) позволяет вам изменить количество объектов Swatch, которые должны быть сгенерированы из растрового изображения. По умолчанию для построителя 16. Чем больше объектов Swatch вы создадите, тем больше времени потребуется для создания Palette.
  • resizeBitmapSize (int maxDimension) изменяет размер растрового изображения так, что его наибольшая размерность будет только такой, как переданное значение этого метода. Чем больше ваше растровое изображение, тем больше времени потребуется для создания Palette. Аналогично, меньшие растровые изображения будут обрабатываться быстрее, но вы потеряете точность цвета.

В следующем фрагменте кода показано, как создать растровое изображение из локального ресурса и асинхронно создать объект Palette.

Когда у вас есть Palette, вы можете начать работу с связанными объектами Swatch.

2. Swatch

Объекты Swatch представляют цвета, созданные из палитры изображения. Каждый Swatch содержит:

  • значение RGB (красный, зеленый, синий) и HSL (оттенок, насыщенность, свечение) для цвета.
  • значение популяции, отражающее количество пикселей, представленных Swatch.
  • значение цвета, которое можно использовать для текста заголовка при отображении на основном цвете Swatch.
  • значение цвета, которое может использоваться для тела текста при отображении на основном цвете Swatch.

Профили Swatch

Каждая Palette имеет набор из шести предопределенных цветовых профилей:

  • vibrant
  • light vibrant
  • dark vibrant
  • muted
  • light muted
  • dark muted

Хотя каждый из них может быть полезен в зависимости от дизайна вашего приложения, наиболее часто используются яркие и темные цвета. Следует отметить, что любой из этих профилей может быть null, поэтому вы должны соответствующим образом обрабатывать эту ситуацию. В примере проекта в методе onGenerated(Palette palette) из асинхронного Palette.Builder вы можете увидеть, как извлечь каждый профиль Swatch.

setViewSwatch(TextView view, Palette.Swatch swatch) - это метод, который принимает Swatch и TextView, и устанавливает цвета фона TextView и текста из значений в Swatch. Вы заметите, что мы сначала проверяем, является ли Swatch равным null, и если это так, мы просто скрываем представление.

Example of profile Swatch colorsExample of profile Swatch colorsExample of profile Swatch colors

Дополнительные Swatch

В дополнение к объектам Swatch стандартного профиля каждая Paletter содержит список общих объектов Swatch, сгенерированных из растрового изображения. Они могут быть извлечены из Palette в виде list с помощью метода getSwatches().

В примере проекта этот List извлекается и помещается в ArrayAdapter<Palette.Swatch>, который затем отображает основной цвет и цвета текста Swatch, а также количество пикселей, представленных в растровом изображении этим Swatch. Следует обратить внимание на то, что список будет не в определенном порядке. В примере проекта я отсортировал элементы по их популяции.

В этом фрагменте кода mAdapter является адаптером объектов Swatch:

Example of generated Swatches from a bitmapExample of generated Swatches from a bitmapExample of generated Swatches from a bitmap

Заключение

В этой статье вы узнали о библиотеке поддержки Palette и о том, как извлекать образцы цвета из растрового изображения. Это позволит вам настраивать элементы пользовательского интерфейса, такие как фон и текст, чтобы они дополняли изображения в вашем приложении. В сочетании с классами Color и ColorUtil (доступными в библиотеке поддержки v4) у вас есть еще больше возможностей для раскраски вашего приложения.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.