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

Хороший визуальный дизайн необходим для успешного приложения, а цветовые схемы являются основным компонентом дизайна. Библиотека Palette — это библиотека Jetpack, которая извлекает яркие цвета из изображений для создания визуально привлекательных приложений.

Вы можете использовать библиотеку Palette для разработки тем макетов и применения пользовательских цветов к визуальным элементам в вашем приложении. Например, вы можете использовать палитру для создания цветной титульной карточки для песни на основе обложки ее альбома или для настройки цвета панели инструментов приложения при изменении фонового изображения. Объект 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 если этот конкретный профиль не существует в изображении. Поэтому проверьте, что образец не является null, прежде чем использовать его. Например, следующий код получает цвет текста заголовка из палитры, если образец Vibrant не является null:

Котлин

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);
}

Рисунок 2. Пример изображения с яркой панелью инструментов и соответствующим цветом текста заголовка.