Статьи

Раскраска Android-приложений с помощью палитры

Ноябрь 19, 2018

Одной из определяющих особенностей дизайна материала является использование цвета, чтобы дополнить и подчеркнуть контент на экране. Используя класс Palette , разработчики могут извлекать выдающиеся цвета из растрового изображения для использования в своих приложениях для настройки элементов пользовательского интерфейса.

В этой статье вы узнаете, как создать объект Palette из растрового изображения. В каждой Palette содержится набор объектов Swatch , которые позволят вам работать с определенными цветовыми профилями и списком видимых цветов из изображения.

Пример палитры цветов, сгенерированных из базового изображения

1. Создание палитры

Для начала вам необходимо импортировать библиотеку поддержки палитры в ваш проект, включив следующую строку в узел зависимостей файла build.gradle вашего проекта. Поскольку это библиотека поддержки v7, классы, связанные с Palette , доступны для Android API 7.

1
compile ‘com.android.support:palette-v7:+’

После запуска синхронизации проекта в своем проекте вы можете сгенерировать Palette из растрового изображения. Это можно сделать с помощью Palette.Builder либо синхронно , вызвав метод generate() без каких-либо параметров, либо асинхронно , вызвав generate(Palette.PaletteAsyncListener listener) . Поскольку создание Palette может занять некоторое время, рекомендуется вызывать синхронный метод только из фонового потока. В дополнение к двум методам Palette.Builder класс Palette.Builder имеет несколько других полезных методов, которые имеют свои собственные компромиссы:

  • maximumColorCount(int numOfSwatches) позволяет вам изменить, сколько объектов Swatch должно быть сгенерировано из растрового изображения. По умолчанию для застройщика 16 . Чем больше объектов Swatch вы сгенерируете, тем больше времени потребуется для создания Palette .
  • resizeBitmapSize(int maxDimension) изменяет resizeBitmapSize(int maxDimension) растрового изображения так, чтобы его наибольшее измерение было настолько большим, насколько было передано значение этого метода Чем больше ваше растровое изображение, тем больше времени потребуется для создания Palette . Аналогично, меньшие растровые изображения будут обрабатываться быстрее, но вы потеряете в точности цветопередачи.

В следующем фрагменте кода показано, как создать растровое изображение из локального ресурса и асинхронно создать объект Palette .

1
2
3
4
5
6
7
Bitmap bitmap = BitmapFactory.decodeResource( getResources(), R.drawable.union_station );
Palette.from( bitmap ).generate( new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated( Palette palette ) {
        //work with the palette here
    }
});

Получив Palette , вы можете начать работать со связанными объектами Swatch .

2. Образцы

Swatch объектов представляют цвета, сгенерированные из палитры изображения. Каждый Swatch содержит:

  • значения RGB ( R ed, G reen, B lue) и HSL ( H ue, S aturation, Lightness) для цвета.
  • значение совокупности, отражающее количество пикселей, представленных Swatch .
  • значение цвета, которое можно использовать для текста заголовка при отображении в основном цвете образца.
  • значение цвета, которое можно использовать для основной части текста при отображении в основном цвете образца.

Профили образцов

Каждая Palette имеет набор из шести предопределенных цветовых профилей:

  • вибрирующий
  • легкий живой
  • темный живой
  • приглушенный
  • свет приглушен
  • темный приглушенный

Хотя каждый из них может быть полезен в зависимости от дизайна вашего приложения, наиболее часто используются яркие и темные. Следует отметить, что любой из этих профилей может быть null , поэтому вам следует соответствующим образом справиться с этой ситуацией. В примере проекта в onGenerated(Palette palette) из асинхронного Palette.Builder вы можете увидеть, как извлечь каждый Palette.Builder профиля.

1
2
3
4
5
6
setViewSwatch( mVibrantTextView, palette.getVibrantSwatch() );
setViewSwatch( mLightVibrantTextView, palette.getLightVibrantSwatch() );
setViewSwatch( mDarkVibrantTextView, palette.getDarkVibrantSwatch() );
setViewSwatch( mMutedTextView, palette.getMutedSwatch() );
setViewSwatch( mLightMutedTextView, palette.getLightMutedSwatch() );
setViewSwatch( mDarkMutedTextView, palette.getDarkMutedSwatch() );

setViewSwatch(TextView view, Palette.Swatch swatch) — это метод, который принимает Swatch и TextView и устанавливает фон TextView и цвета текста из значений в Swatch . Вы заметите, что мы сначала проверяем, является ли Swatch null и, если это так, мы просто скрываем представление.

1
2
3
4
5
6
7
8
9
public void setViewSwatch( TextView view, Palette.Swatch swatch ) {
    if( swatch != null ) {
        view.setTextColor( swatch.getTitleTextColor() );
        view.setBackgroundColor( swatch.getRgb() );
        view.setVisibility( View.VISIBLE );
    } else {
        view.setVisibility( View.GONE );
    }
}
Пример профиля Swatch цветов

Дополнительные образцы

В дополнение к стандартным объектам Swatch профиля каждая Palette содержит список общих объектов Swatch созданных из растрового изображения. Их можно извлечь из Palette в виде List с помощью getSwatches() .

В примере проекта этот List извлекается и помещается в ArrayAdapter<Palette.Swatch> который затем отображает основной цвет Swatch и цвет основного текста, а также количество пикселей, представленных в растровом изображении этим Swatch . Стоит обратить внимание на то, что список не в каком-то определенном порядке. В примере проекта я отсортировал элементы по их численности.

1
2
3
4
5
6
for( Palette.Swatch swatch : palette.getSwatches() ) {
    mAdapter.add( swatch );
}
 
mAdapter.sortSwatches();
mAdapter.notifyDataSetChanged();

В этом фрагменте кода mAdapter является адаптером объектов Swatch с помощью следующих методов:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@Override
public View getView( int position, View convertView, ViewGroup parent ) {
    ViewHolder holder;
    if( convertView == null ) {
        holder = new ViewHolder();
        convertView = LayoutInflater.from( getContext() ).inflate( R.layout.color_item, parent, false );
        holder.view = (TextView) convertView.findViewById( R.id.view );
        convertView.setTag( holder );
    } else {
        holder = (ViewHolder) convertView.getTag();
    }
 
    holder.view.setBackgroundColor( getItem( position ).getRgb() );
    holder.view.setTextColor( getItem( position ).getBodyTextColor() );
    holder.view.setText( «Population: » + getItem( position ).getPopulation() );
 
    return convertView;
}
 
public void sortSwatches() {
    sort(new Comparator<Palette.Swatch>() {
        @Override
        public int compare( Palette.Swatch lhs, Palette.Swatch rhs ) {
            return rhs.getPopulation() — lhs.getPopulation();
        }
    });
}
 
public class ViewHolder {
    TextView view;
}
Пример сгенерированных образцов из растрового изображения

Вывод

В этой статье вы узнали о библиотеке поддержки Palette и о том, как извлечь образцы цветов из растрового изображения. Это позволит вам настроить элементы пользовательского интерфейса, такие как фоны и текст, чтобы они дополняли изображения в вашем приложении. В сочетании с классами Color и ColorUtil (доступны в библиотеке поддержки v4) у вас есть еще больше возможностей для раскрашивания вашего приложения.

40
Share: