Хороший визуальный дизайн необходим для успешного приложения, а цветовые схемы являются основным компонентом дизайна. Библиотека 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() .
Используйте образцы для создания цветовых схем
Класс 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);
}
