Хороший визуальный дизайн необходим для успешного приложения, а цветовые схемы являются основным компонентом дизайна. Библиотека Palette — это библиотека Jetpack, которая извлекает яркие цвета из изображений для создания визуально привлекательных приложений.
Вы можете использовать библиотеку палитры для разработки тем макета и применения пользовательских цветов к визуальным элементам в вашем приложении. Например, вы можете использовать палитру для создания титульной карточки песни с согласованием по цвету на основе обложки ее альбома или для настройки цвета панели инструментов приложения при изменении его фонового изображения. Объект Palette
предоставляет вам доступ к цветам Bitmap
изображения, а также предоставляет шесть основных цветовых профилей растрового изображения, которые помогут вам выбрать дизайн .
Настройте библиотеку
Чтобы использовать библиотеку Palette, добавьте в build.gradle
следующее:
Котлин
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
классный
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Создать палитру
Объект Palette
предоставляет доступ к основным цветам изображения, а также к соответствующим цветам наложенного текста. Используйте палитры для разработки стиля вашего приложения и динамического изменения цветовой схемы вашего приложения на основе заданного исходного изображения.
Чтобы создать палитру, сначала создайте экземпляр Palette.Builder
из Bitmap
. Затем вы можете использовать Palette.Builder
для настройки палитры перед ее созданием. В этом разделе описывается создание и настройка палитры из растрового изображения.
Создать экземпляр палитры
Создайте экземпляр Palette
, используя его метод from(Bitmap bitmap)
, чтобы сначала создать Palette.Builder
из Bitmap
.
Конструктор может генерировать палитру синхронно или асинхронно. Используйте синхронную генерацию палитры, если вы хотите создать палитру в том же потоке, что и вызываемый метод. Если вы генерируете палитру асинхронно, в другом потоке, используйте метод onGenerated()
для доступа к палитре сразу после ее создания.
В следующем фрагменте кода представлены примеры методов для обоих типов создания палитры:
Котлин
// Generate palette synchronously and return it. fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate() // Generate palette asynchronously and use it on a different thread using onGenerated(). fun createPaletteAsync(bitmap: Bitmap) { Palette.from(bitmap).generate { palette -> // Use generated instance. } }
Ява
// Generate palette synchronously and return it. public Palette createPaletteSync(Bitmap bitmap) { Palette p = Palette.from(bitmap).generate(); return p; } // Generate palette asynchronously and use it on a different thread using onGenerated(). public void createPaletteAsync(Bitmap bitmap) { Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { // Use generated instance. } }); }
Если вам необходимо постоянно создавать палитры для отсортированного списка изображений или объектов, рассмотрите возможность кэширования экземпляров Palette
, чтобы предотвратить снижение производительности пользовательского интерфейса. Не создавайте палитры в своем основном потоке .
Настройте свою палитру
Palette.Builder
позволяет вам настроить палитру, выбрав, сколько цветов будет в результирующей палитре, какую область вашего изображения будет использовать конструктор для создания палитры и какие цвета будут включены в палитру. Например, вы можете отфильтровать черный цвет или убедиться, что конструктор использует только верхнюю половину изображения для создания вашей палитры.
Точно настройте размер и цвета палитры с помощью следующих методов класса Palette.Builder
:
-
addFilter()
- Этот метод добавляет фильтр, указывающий, какие цвета разрешены в результирующей палитре. Передайте свой собственный
Palette.Filter
и измените его методisAllowed()
, чтобы определить, какие цвета отфильтровываются из палитры. -
maximumColorCount()
- Этот метод устанавливает максимальное количество цветов в вашей палитре. Значение по умолчанию — 16, оптимальное значение зависит от исходного изображения. Для пейзажей оптимальные значения варьируются от 8 до 16, а для изображений с лицами обычно значения от 24 до 32.
Palette.Builder
требует больше времени для создания палитр с большим количеством цветов. -
setRegion()
- Этот метод указывает, какую область растрового изображения использует построитель при создании палитры. Этот метод можно использовать только при создании палитры из растрового изображения, и он не влияет на исходное изображение.
-
addTarget()
- Этот метод позволяет вам выполнить собственное сопоставление цветов, добавив
Target
цветовой профиль в конструктор. ЕслиTarget
по умолчанию недостаточно, опытные разработчики могут создать свою собственнуюTarget
с помощьюTarget.Builder
.
Извлечение цветовых профилей
Основываясь на стандартах Material Design , библиотека Palette извлекает из изображения часто используемые цветовые профили. Каждый профиль определяется Target
, а цвета, извлеченные из растрового изображения, оцениваются по каждому профилю на основе насыщенности, яркости и численности (количества пикселей в растровом изображении, представленного цветом). Для каждого профиля цвет с наилучшей оценкой определяет цветовой профиль для данного изображения.
По умолчанию объект Palette
содержит 16 основных цветов данного изображения. При создании палитры вы можете настроить количество цветов с помощью Palette.Builder
. Извлечение большего количества цветов обеспечивает больше потенциальных совпадений для каждого цветового профиля, но также приводит к тому, что Palette.Builder
занимает больше времени при создании палитры.
Библиотека палитры пытается извлечь следующие шесть цветовых профилей:
- Светлый Яркий
- Яркий
- Темный Яркий
- Свет приглушен
- Без звука
- Темный приглушенный
Каждый из методов get< Profile >Color()
в Palette
возвращает цвет в палитре, связанной с этим конкретным профилем, где < Profile >
заменяется именем одного из шести цветовых профилей. Например, метод получения цветового профиля Dark Vibrant — getDarkVibrantColor()
. Поскольку не все изображения содержат все цветовые профили, укажите возвращаемый цвет по умолчанию.
На рис. 1 показана фотография и соответствующие ей цветовые профили из методов get< Profile >Color()
.
![Изображение, показывающее закат слева и извлеченную цветовую палитру справа.](https://developer.android.com/static/training/material/images/palette-library-color-profiles_2-1_2x.png?authuser=9&hl=ru)
Используйте образцы для создания цветовых схем
Класс Palette
также создает объекты Palette.Swatch
для каждого цветового профиля. Объекты Palette.Swatch
содержат связанный цвет для этого профиля, а также количество цветов в пикселях.
Образцы имеют дополнительные методы для доступа к дополнительной информации о цветовом профиле, такой как значения HSL и количество пикселей. Вы можете использовать образцы для создания более полных цветовых схем и тем приложений с помощью методов getBodyTextColor()
и getTitleTextColor()
. Эти методы возвращают цвета, подходящие для использования с цветом образца.
Каждый метод get< Profile >Swatch()
из Palette
возвращает образец, связанный с этим конкретным профилем, где < Profile >
заменяется именем одного из шести цветовых профилей. Хотя методы get< Profile >Swatch()
палитры не требуют параметров значений по умолчанию, они возвращают null
, если этот конкретный профиль не существует в изображении. Поэтому перед использованием убедитесь, что образец не равен нулю. Например, следующий код получает цвет текста заголовка из палитры, если образец Vibrant не равен нулю:
Котлин
val vibrant = myPalette.vibrantSwatch // In Kotlin, check for null before accessing properties on the vibrant swatch. val titleColor = vibrant?.titleTextColor
Ява
Palette.Swatch vibrant = myPalette.getVibrantSwatch(); if(vibrant != null){ int titleColor = vibrant.getTitleTextColor(); // ... }
Чтобы получить доступ ко всем цветам в палитре, метод getSwatches()
возвращает список всех образцов, созданных на основе изображения, включая стандартные шесть цветовых профилей.
В следующем фрагменте кода используются методы из предыдущих фрагментов кода для синхронного создания палитры, получения ее яркого образца и изменения цветов панели инструментов в соответствии с растровым изображением. На рис. 2 показаны полученное изображение и панель инструментов.
Котлин
// Set the background and text colors of a toolbar given a bitmap image to // match. fun setToolbarColor(bitmap: Bitmap) { // Generate the palette and get the vibrant swatch. val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch // Set the toolbar background and text colors. // Fall back to default colors if the vibrant swatch isn't available. with(findViewById<Toolbar>(R.id.toolbar)) { setBackgroundColor(vibrantSwatch?.rgb ?: ContextCompat.getColor(context, R.color.default_title_background)) setTitleTextColor(vibrantSwatch?.titleTextColor ?: ContextCompat.getColor(context, R.color.default_title_color)) } }
Ява
// Set the background and text colors of a toolbar given a bitmap image to // match. public void setToolbarColor(Bitmap bitmap) { // Generate the palette and get the vibrant swatch. // See the createPaletteSync() method from the preceding code snippet. Palette p = createPaletteSync(bitmap); Palette.Swatch vibrantSwatch = p.getVibrantSwatch(); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // Load default colors. int backgroundColor = ContextCompat.getColor(getContext(), R.color.default_title_background); int textColor = ContextCompat.getColor(getContext(), R.color.default_title_color); // Check that the Vibrant swatch is available. if(vibrantSwatch != null){ backgroundColor = vibrantSwatch.getRgb(); textColor = vibrantSwatch.getTitleTextColor(); } // Set the toolbar background and text colors. toolbar.setBackgroundColor(backgroundColor); toolbar.setTitleTextColor(textColor); }
![Изображение заката и панель инструментов с TitleTextColor внутри.](https://developer.android.com/static/training/material/images/palette-library-title-text-color_2-1_2x.png?authuser=9&hl=ru)