Выбор цветов с помощью API палитры

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

Изображение, показывающее закат слева и извлеченную цветовую палитру справа.
Рисунок 1. Пример изображения и извлеченные из него цветовые профили с учетом максимального количества цветов по умолчанию (16) для палитры.

Используйте образцы для создания цветовых схем

Класс 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 внутри.
Рис. 2. Пример изображения с яркой панелью инструментов и соответствующим цветом текста заголовка.