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

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

Градиент

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

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

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

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

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

//
// proSwift.ru
//

private func gradientSetup () {
    gradientLayer.colors = [startColor.CGColor, midColor.CGColor, endColor.CGColor]
    gradientLayer.startPoint = CGPointMake(0.5, 0.2)
    gradientLayer.endPoint = CGPointMake(0.5, 0.8)
}

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

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

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

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

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

//
// proSwift.ru
//

private func gradientSetup () {
    //  Временная запись
    let tmpColor = UIColor.yellowColor()
    gradientLayer.colors = [startColor.CGColor, midColor.CGColor, tmpColor.CGColor, endColor.CGColor]
    //- - - - - - -
        
    //gradientLayer.colors = [startColor.CGColor, midColor.CGColor, endColor.CGColor]
    gradientLayer.startPoint = CGPointMake(0.5, 0.2)
    gradientLayer.endPoint = CGPointMake(0.5, 0.8)
}

Результат:

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

//
// proSwift.ru
//

gradientLayer.colors = [startColor.CGColor, midColor.CGColor, tmpColor.CGColor, endColor.CGColor]

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

//
// proSwift.ru
//

private func gradientSetup () {
    gradientLayer.colors = [startColor.CGColor, midColor.CGColor, endColor.CGColor]
    gradientLayer.startPoint = CGPointMake(0.5, 0.2)
    gradientLayer.endPoint = CGPointMake(0.5, 0.8)

    gradientLayer.locations = [0, 0.75, 1]
}

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

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

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

https://github.com/Ironrnd/CALayer_proSwift_ru