CALayer- градиент: CAGradientLayer

Подготовка и настройка проекта описана в статье CALayer.

Градиент

Как я писал немногого выше, для настройки градиента мы будем использовать заготовленные метод gradientSetup(). Для отображения градиента нужно задать ему цвета, стартовую и конечную точки. Нужные нам цвета хранятся в свойствах BlueView и мы их используем. А вот с точками нужно немного понимания.

CALayer_proSwift_ru_hsuie

Слой, в котором рисуется градиент — это прямоугольник с координатами (0, 0), (1, 0), (1, 1), (0, 1). Соответсвенно точки начала и окончания градиента задаются в частях от единицы. На рисунке выше

  •  startPoint = (0.2, 0.8)
  • endPoint = (0.8, 0.2)

Думаю, суть ясна. Для управления направлением отрисовки градиента нужно указать начальную и конечную точки. Все что за пределам координат этих точек — будет оригинальными (неизменными) цветами. А между точками — градиент.

Измените метод  gradientSetup ()

Задайте цвета в Interface Builder. Я задал черный, оранжевый и белый.

CALayer_proSwift_ru_9zyag

И т.к. мы реализовали метод prepareForInterfaceBuilder(), мы сразу можем увидеть результат работы градиента на сцене контроллера. При запуске проекта — все тоже работает нормально.

CALayer_proSwift_ru_r2i71

Слева — Storyboard, справа — симулятор с запущенным проектом.

Ничего сложного — задали цвета и точки начала и окончания градиента. В нашем случае — это вектор сверху вниз, посередине ширины (координаты х точек — имеют значение по 0.5) и от 0.2 до 0.8 по у.

Массив с цветами gradientLayer.colors = [] определяет набор цветов для градиента. Добавляя или убирая цвета в массив, мы можем управлять его отображением. для примера я добавлю еще один цвет в массив.

Результат:

CALayer_proSwift_ru_q4vhq

Еще нужно понимать, что массив с цветами градиента берет в себя значения   CGColor, а у нас все цвета — это UIColor. К счастью UIColor — это обертка для CGColor. И получить значение нужного нам типа легко — для цвета UIColor вызвать свойство .CGColor, что мы и сделали.

Если нужно изменить размеры полосы того или иного цвета в градиенте, то нужно использовать свойство градиентного слоя locations. Это массив, который в себя берет значения от 0.0 до 1.0, учитывая, что количество элементов совпадает с количеством цветов в массиве цветов, и элементы в нем  — это части от единицы, для указания количества того или иного цвета в градиенте.  Вот пример:

CALayer_proSwift_ru_4qcwo

CALayer_proSwift_ru_lhpqb

Слева — измененный градиент, справа — оригинальный. Цифра 0.75 в массиве означает, что градиент между черными и оранжевым цветом будет занимать 75% пространства, а градиент между оранжевым и белым — оставшиеся 25%.

Следующая часть: CALayer- закругление углов, выделение границы

 

Ссылка проекта на Github

https://github.com/Ironrnd/CALayer_proSwift_ru

Опубликовано в Iron ribbon, Реальные примеры, Уроки, Элементы UI Метки:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*