Как я добавил одну кнопку и отрефакторил половину проекта
Это история добавления кнопки в приложение, над которым я сейчас работаю. Мой предыдущий пост был о добавлении элемента управления выбора в том же приложении.
Итак, приложение очень простое, но оно полно настраиваемых визуальных эффектов, реализация которых занимает больше всего времени.
Моя цель — кнопка Пуск. Его цвет меняется в зависимости от выбранных значений средств выбора выше. Между цветами элементов выбора и кнопки Старт должна быть связь, чтобы они хорошо смотрелись вместе на одном экране, но пока неясно, как этого добиться.
Я начал с двух сборщиков. Я знал их выбранные цвета, и моей первой мыслью было взять среднее значение в RGB. Это просто, у меня уже были все необходимые занятия. Чтобы не писать лишний код, я взял градиент от верхнего цвета к нижнему и попросил центральную точку.
Результат разочаровал... При некоторых значениях кнопка становилась серой!
Оказывается, мой код для рисования градиента с цветами RGB не так уж и хорош. Раньше этого не было заметно, когда цвета были близки друг к другу, но если я попробую нарисовать градиент от зеленого к розовому, например, то у меня получится вот что:
Хорошо, какие еще у нас есть варианты? После небольшого исследования того, как работают цветовые пространства, я решил перенести все на HSB. HSB — это еще одно представление цветового пространства RGB.
Выбор среднего значения для hue всегда должен приводить к приятному яркому цвету. Решил сразу сделать рефакторинг и проверить.
Вау, это выглядит немного токсично, но почему? Самое время открыть графический редактор и проверить, как там создаются градиенты. Себе на заметку: в следующий раз сначала проверяй, а потом внедряй.
Итак, мне нужно уменьшить насыщенность и яркость в центральной точке. Немного экспериментов и результат выглядит приемлемым.
Но дизайнер все еще недоволен! Что это за синий цвет, спрашивает он, откуда он взялся?
Что есть, то есть. Изменение значения оттенка всегда приводит к красивому яркому цвету, но этот цвет не имеет ничего общего с начальной и конечной точками. Модель HSB не сработала. Я все же оставил его, потому что мне нравится, как строятся новые градиенты. Но для кнопки запуска нам нужно что-то другое.
Рефакторинг половины приложения оказался слишком трудоемким, поэтому я сделал небольшую площадку для экспериментов с цветами вместе с дизайнером. Заметка для себя: в следующий раз сделайте это перед реализацией,
Новое решение — использовать режим наложения снова.
Моя текущая реализация кнопки была основана на простых CALayers, мне нужно было переписать с помощью draw(_ rect:). Легкий.
В качестве базового цвета я взял значение палитры repeats и значение seconds, добавленное к интенсивности цвета.
Сделанный.
Подожди секунду! Что это за странное свечение на границе? Неприемлемо!
Я не мог избавиться от него полностью и в какой-то момент сдался и снова провел рефакторинг кнопки, на этот раз используя комбинацию draw(_ rect:) и masks.
Было много рефакторинга, экспериментов и выбрасывания кода ради одной кнопки. Несколько лет назад я бы счел это разочаровывающим, теперь я думаю, что это все самое интересное!
"Предыдущий пост"
