Создаём Color Picker в android

Разработка /
Разработка: Создаём Color Picker в android

Всем привет!  В этой статье мы рассмотрим как можно реализовать диалог выбора цвета в android с помощью библиотеки ColorPickerPreference.

С ней вы легко можете создавать ColorPicker, ColorPickerDialog и ColorPickerPreference.

В файле build.gradle вашего проекта добавьте зависомость:

compile 'com.github.skydoves:colorpickerpreference:1.0.2'

ColorPickerView

Для реализации ColorPicker с кастомным макетом, используйте ColorPickerView.

Разработка: Создаём Color Picker в android

Добавим ColorPickerView в layout.xml:


<com.skydoves.colorpickerpreference.ColorPickerView
        android:id="@+id/colorPickerView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:palette="@drawable/palette"
        app:selector="@drawable/wheel" />

Здесь можно сразу указать, какие используем палитру и селектор.

app:palette="@drawable/palette" // картинка для палитры
app:selector="@drawable/wheel" // изображение селектора. Не всегда это нужно, поэтому можете не указывать его.

Осталось добавить ColorListener:

colorPickerView.setColorListener(new ColorListener() {
            @Override
            public void onColorSelected(ColorEnvelope colorEnvelope) {
                LinearLayout linearLayout = findViewById(R.id.linearLayout);
                linearLayout.setBackgroundColor(colorEnvelope.getColor());
            }
        });

ColorListener будет вызван при показе палитры пользователю.

Он даёт нам экземпляр ColorEnvelope и мы можем получить цвет HSV, цветовой код html или даже код rgb из ColorEnvelope.

colorEnvelope.getColor() // возвращает int
colorEnvelope.getHtmlCode() // возвращает String
colorEnvelope.getRgb() // возвращает int[3]

Если хотите сохранить позицию селектора и показать выбранный цвет позже, сохраните имя для ColorPicker Preference с помощью метода setPreferenceName.

colorPickerView.setPreferenceName("MyColorPickerView");

После сохранения данных позиция селектора будет восстановлена при следующем создании ColorPickerView.

@Override
protected void onDestroy() {
   super.onDestroy();
   colorPickerView.saveData();
 }

Также мы можем получить сохранённые ранее цвета с помощью следующих методов (им нужно передать в параметре цвет по-умолчанию, на случай если нет сохранённого цвета):

int color = colorPickerView.getSavedColor(Color.WHITE);
String htmlColor = colorPickerView.getSavedColorHtml(Color.WHITE);
int[] colorRGB = colorPickerView.getSavedColorRGB(Color.WHITE);


ColorPickerDialog

Для создания ColorPicker в Dialog, используйте ColorPickerDialog.

Разработка: Создаём Color Picker в android

ColorPickerDialog наследует AlertDialog, таким образом можно настраивать темы для него:


ColorPickerDialog.Builder builder = new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
builder.setTitle("ColorPicker Dialog");
builder.setPreferenceName("MyColorPickerDialog");
builder.setFlagView(new CustomFlag(this, R.layout.layout_flag));
builder.setPositiveButton(getString(R.string.confirm), new ColorListener() {
   @Override
   public void onColorSelected(ColorEnvelope colorEnvelope) {
      TextView textView = findViewById(R.id.textView);
      textView.setText("#" + colorEnvelope.getHtmlCode());

      LinearLayout linearLayout = findViewById(R.id.linearLayout);
      linearLayout.setBackgroundColor(colorEnvelope.getColor());
     }
   });
   builder.setNegativeButton(getString(R.string.cancel), new DialogInterface.OnClickListener() {
      @Override
      public void onClick(DialogInterface dialogInterface, int i) {
      dialogInterface.dismiss();
   }
});
builder.show();

Позицию селектора и сохранённый цвет можно получить впоследствии аналогично с помощью имени ColorPicker Preference и метода setPreferenceName. Но в случае с ColorPickerDialog, метод saveData() будет вызван автоматически при выборе PositiveButton. Сохранённая позиция селектора будет восстановлена при создании ColorPickerDialog.

ColorPickerView colorPickerView = builder.getColorPickerView();
colorPickerView.setPreferenceName("MyColorPickerDialog");


ColorPickerPreference

Для реализации ColorPicker в оне настроек PreferenceScreen используем ColorPickerPreference.

Разработка: Создаём Color Picker в android

Для примера:


<com.skydoves.colorpickerpreference.ColorPickerPreference
    android:key="@string/ToolbarColorPickerPreference"
    android:title="Toolbar Color"
    android:summary="changes toolbar color"
    app:preference_dialog_title="Toolbar ColorPickerDialog"
    app:preference_dialog_positive="@string/confirm"
    app:preference_dialog_negative="@string/cancel"
    app:preference_palette="@drawable/palette"
    app:preference_selector="@drawable/wheel"
    app:default_color="@color/colorPrimary"/>

Можно настроить все пять параметров для кастомизации диалога.

// название для Dialog
app:preference_dialog_title="Toolbar ColorPickerDialog"

// текст для positive button
app:preference_dialog_positive="@string/confirm"

// текст negative button
app:preference_dialog_negative="@string/cancel"

// изображение палитры ColorPicker 
app:preference_palette="@drawable/palette"

// изображение селектора в ColorPicker
app:preference_selector="@drawable/wheel"

// цвет по-умолчанию
app:default_color="@color/colorPrimary"


FlagView

FlagView позволяет добавить флаг над селектором. Можно пропустить эту часть, если вам он не нужен.

Вначале создадим макет Flag типа такого:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:background="@drawable/flag"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/flag_color_layout"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="6dp"
        android:layout_marginLeft="5dp"
        android:orientation="vertical"/>

    <TextView
        android:id="@+id/flag_color_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="5dp"
        android:textSize="14dp"
        android:textColor="@android:color/white"
        android:maxLines="1"
        android:ellipsize="end"
        android:textAppearance="?android:attr/textAppearanceSmall"
        tools:text="#ffffff"/>
</LinearLayout>

Затем создадим CustomFlagView наследуя FlagView.


public class CustomFlag extends FlagView {

    private TextView textView;
    private View view;

    public CustomFlag(Context context, int layout) {
        super(context, layout);
        textView = findViewById(R.id.flag_color_code);
        view = findViewById(R.id.flag_color_layout);
    }

    @Override
    public void onRefresh(int color) {
        textView.setText("#" + String.format("%06X", (0xFFFFFF & color)));
        view.setBackgroundColor(color);
    }
}

И, наконец, добавим FlagView в ColorPickerView или в ColorPickerDialog.Builder:


// для ColorPickerView
colorPickerView.setFlagView(new CustomFlag(this, R.layout.layout_flag));

// для ColorPickerDialog
ColorPickerDialog.Builder builder = new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
builder.setFlagView(new CustomFlag(this, R.layout.layout_flag));

Также можно задать режим у FlagView:

colorPickerView.setFlagMode(FlagMode.ALWAYS); // всегда показывать flagView
colorPickerView.setFlagMode(FlagMode.LAST); // показывать flagView при действии Action_UP


Разработка: Создаём Color Picker в android

Больше информации — в документации.

Спасибо за чтение!

Источник: «How to implement Color Picker in android»
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.