Выбор цветов с помощью 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() .

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

Класс 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);
}