Снова доброго времени суток всем. В этой статье хотелось бы продолжить тему кастомных View, а именно диалога выбора цвета.
Небольшое отступление: Предвосхищая негативные отзывы, хочу заранее предупредить — статья рассчитана на новичков в программировании. Начиная знакомиться с разработкой под Андроид, я столкнулся (да и сейчас регулярно сталкиваюсь) с интересным фактом: в интернете воз и маленькая тележка информации посвящена установке и настройке Эклипса, потом красочно описывают, как нажать New – Android Application Project и получить свой первый ХеллоВорд. А потом сразу сервисы – потоки – биндинги – хендлеры и всякие прочие базы данных. Посередине – пустота. Как раз эту пустоту я и пытаюсь заполнить, облегчить переход от чайника хотя бы к кофейнику так сказать. Очень надеюсь, что помогу кому-то найти нечто нужное без лишних мучений. И не могу в очередной раз не отметить еще одну особенность Рунета: Не так давно в очередной раз наступил на грабли столкнулся я с проблемой, можно сказать смешной для знающего человека, но для меня незнакомой. Довольно быстро нашел решение на каком-то англоязычном форуме. Топик состоял из двух постов. Вопрос и ответ. Все! Если кому интересно будет – найду ссылку. Да, кстати, возникший вопрос относится и к данной статье, так что дальше я это отмечу. Так вот, а посмотреть на наши форумы – жуть. Каждый вопрос порождает несколько страниц флуда на тему «читай документацию», ответа же в большинстве случаев так и нет.
Ну ладно, извините за многословие, наболело, так сказать. Продолжим под катом.
Итак, в очередном проекте столкнулся я с необходимостью изменения цветов каких-то элементов в программе. То есть нужен соответствующий элемент управления, назовем его ColorPicker. В стандартном наборе таковой отсутствует, то есть каждый извращается как может. Да что там говорить, даже у Майкрософта на ББ нет единства, посмотрите на диалоги выбора цвета в Ворде скажем и в том же Paint.
На смартфоне не так просто попасть пальцем в нужную точку, вводить вручную значения тоже не очень удобно. Поиск в интернете, тем не менее, предлагает либо некоторое подобие вышеупомянутых смартфононеудобных Paintообразных диалогов, либо максимально упрощенные варианты типа тройки ползунков для RGB, отдельный ползунок для альфа-канала, или вообще фиксированный набор из нескольких цветных плиток. Да и не люблю я чужие библиотеки в свои проекты пихать, поэтому поиск был довольно беглым. А хотелось всего и сразу. И в одном месте.
В итоге после длительных раздумий родилось вот такое:
То есть все довольно просто. Первое (наружное) кольцо представляет градиент GRB. Второе в нижней половине регулирует насыщенность выбранного цвета, переходя затем в оттенки серого. Ну и третье кольцо – прозрачность. Все под рукой одновременно. Центральный круг отображает непосредственно текущий выбранный цвет и параллельно выполняет функцию кнопки OK.
Ну а теперь, если кому понравилось это цветное чудовище, давайте попробуем все это дело накодить.
Поскольку рисовать не так уж много, да и скорость отрисовки некритична, отнаследуемся от View и будем рисовать на Canvas. Для правильного позиционирования наших художеств надо знать размеры, размеры самой View тоже хочется контролировать, поэтому переопределим метод onMeasure(). Получается вот такая заготовка:
public class ColorPicker extends View {
private float cx;
private float cy;
private int size;
public ColorPicker(Context context) {
this(context, null);
}
public ColorPicker(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ColorPicker(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
// Метод на потом, будем тут что-нибудь делать при создании класса
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int mWidth = measure(widthMeasureSpec);
int mHeight = measure(heightMeasureSpec);
size = Math.min(mWidth, mHeight);
setMeasuredDimension(size, size);
// Вычислили размер доступной области, определили что меньше
// и установили размер нашей View в виде квадрата со стороной в
// высоту или ширину экрана в зависимости от ориентации.
// Вместо Math.min как вариант можно использовать getConfiguration,
// величину size можно умножать на какие-нибудь коэффициенты,
// задавая размер View относительно размера экрана. Например так:
/*int orient = getResources().getConfiguration().orientation;
switch (orient) {
case Configuration.ORIENTATION_PORTRAIT:
size = (int) (measureHeight * port);
break;
case Configuration.ORIENTATION_LANDSCAPE:
size = (int) (measureHeight * land);
break;
}*/
calculateSizes();
// И запустили метод для расчетов всяких наших размеров
}
private int measure(int measureSpec) {
int result = 0;
int specMoge = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMoge == MeasureSpec.UNSPECIFIED) result = 200;
else result = specSize;
return result;
}
private void calculateSizes() {
cx = size * 0.5f;
cy = cx;
// Забегая вперед вычислили координаты центра нашего квадрата.
}
@Override
protected void onDraw(Canvas c) {
super.onDraw(c);
// Ну а тут будем рисовать
// Для начала проверим, что все работает – нарисуем просто фон
c.drawColor(Color.BLUE);
invalidate();
}
}
Теперь наш класс обязан появиться в разделе Custom & Library Views палитры элементов. Тащим его на разметку нашего ХеллоВорда.
Должно получиться что-то вроде этого:
Получилось? Замечательно выходит.
Переходим к рисованию. Давайте начнем снаружи. Нам необходимо кольцо с градиентом цветов. Кольцо, кто не в курсе, рисуется так:
@Override
protected void onDraw(Canvas c) {
super.onDraw(c);
c.drawCircle(cx, cy, rad_1, p_color);
invalidate();
}
То есть нам необходим радиус окружности и кисть (или краска, как там Paint переводится).
Добавляем к нашему коду:
private Paint p_color = new Paint(Paint.ANTI_ALIAS_FLAG);
private void calculateSizes() {
cx = size * 0.5f;
cy = cx;
// вычисляем радиус
rad_1 = size * 0.44f;
// 0.44 – ну понравилось мне это число. Можно подобрать свое
// Теперь кисть:
p_color.setStrokeWidth(size * 0.08f);
// То есть ставим толщину линии 0.08 от size
// опять же можно экспериментировать
}
Если теперь все это запустить, будет как с тем сусликом – кольца не видно, но оно есть. Просто мы ему цвет не задали. Не ему, вернее, а нашей Paint p_color.
С цветом будем делать следующее. Помните же, бывают такие шейдеры. И градиенты. Определяем массив из четырех цветов:
int[] mColors = new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.RED};
(Из четырех – чтоб не было резкого перехода. От красного начали и к красному вернулись).
Применяем градиент к шейдеру, шейдер к кисти, кисть к окружности, яйцо в утке, утка в зайце…
Shader s = new SweepGradient(cx, cy, mColors, null);
p_color.setShader(s);
Смотрим:
Красивенько получилось, правда?
А вот второе кольцо рисовать пока рановато. Как мы помним, там должен быть нарисован градиент насыщенности выбранного цвета. А ничего еще не выбрано. Надо заставить нашу View реагировать на конечности пользователя. То есть используем метод OnTouch. А чтобы наш класс был вполне себе самостоятельным, изобразим OnTouch непосредственно внутри класса:
// в наш пока скучающий метод init() добавляем
setOnTouchListener(this);
// Эклипс ругается, поддаемся на его уговоры
public class ColorPicker extends View implements OnTouchListener
После чего Эклипс заботливо предлагает добавить метод:
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
// Тут мы определяем, что сделал юзер
case MotionEvent.ACTION_DOWN:
// Тут надо будет запомнить координаты - типа на каком кольце начат свайп
break;
case MotionEvent.ACTION_MOVE:
// А тут собственно будем получать значение
break;
}
return true;
}
Вроде все просто, но тут и вылезли те самые грабли, упомянутые в начале статьи. Эклипс упорно что-то требовал. Как выяснилось ему хотелось дополнить onTouch:
case MotionEvent.ACTION_UP:
v.performClick();
break;
И соответственно метод:
@Override
public boolean performClick() {
return super.performClick();
}
После чего все успокоились. Теперь мы смело получаем координаты в onTouch:
case MotionEvent.ACTION_DOWN:
float a = Math.abs(event.getX() - cx);
float b = Math.abs(event.getY() - cy);
break;
case MotionEvent.ACTION_MOVE:
float x = event.getX() - cx;
float y = event.getY() - cy;
break;
И вперед — вычислять цвета. Вот где простор для критики открывается, ибо не дружу я особо с математикой. Поэтому продолжить предлагаю в следующей статье.
Автор: OJV
