Создать градиент в представлении с местоположениями из Zeplin

Question

Я работаю над проектом, где мне нужно применить градиенты к представлению. У меня есть файл эскиза и у меня есть цвета, которые я собираюсь использовать для градиента с местоположениями, но я не могу получить точное представление.

Может кто-нибудь помочь, как это получить?

Я создал функцию для применения градиента: -

func applyGradient(colours: [UIColor]) -> Void {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = colours.map { $0.cgColor }
        self.layer.insertSublayer(gradient, at: 0)
    }

func applyGradientToView(){
        let firstColor = UIColor(red: 26/255, green: 169/255, blue: 186/255, alpha: 1.0)
        let secondColor = UIColor(red: 26/255, green: 97/255, blue: 157/255, alpha: 1.0)
        let thirdColor = UIColor(red: 27/255, green: 65/255, blue: 144/255, alpha: 1.0)
        self.applyGradient(colours: [firstColor, secondColor, thirdColor])
    }

Здесь массив UIcolor - это комбинация цветов, которые я буду использовать, я использовал все три, но все же я не получил то же самое, что и в скетче

Что я создал: -

Цвета градиента в файле эскиза: -

Вид в файле эскиза выглядит так: -

Answer 1

Пара проблем ...

1) Ваше "Цвета градиента в файле эскиза:" изображение не соответствует выходному изображению файла эскиза.Однако вы применили градиент в эскизе, он не является полной градиентной заливкой сверху вниз (или, в данном случае, снизу вверх).

2) При работе с цветами в разных приложениях и/ или устройства, вы должны знать о «цветовых пространствах».Выполните быстрый поиск в Google по запросу sketch colors don't match, и вы найдете множество материалов, объясняющих его, а также советы по использованию эскиза для целей iOS.

Итак, простой способ получить закрыть к вашему желаемому выходу относится использование OS X Digital Color Meter - который должен быть установлен по умолчанию на вашем Mac (если это не так, его легко найти).Этот инструмент позволяет вам навести курсор на точку на вашем изображении и получить значения RGB на основе разных цветовых пространств.SRGB должен совпадать.

Кроме того, существует лучший способ кодирования вашего пользовательского представления для повторного использования.Взгляните на этот подход:

class MyGradientView: UIView {

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {

        let gradientLayer = layer as! CAGradientLayer

        let firstColor = UIColor(red: 25/255, green: 138/255, blue: 173/255, alpha: 1.0)
        let secondColor = UIColor(red: 27/255, green: 163/255, blue: 184/255, alpha: 1.0)

        let colours = [firstColor, secondColor]

        gradientLayer.colors = colours.map { $0.cgColor }

        gradientLayer.shadowColor = UIColor.black.cgColor
        gradientLayer.shadowOffset = CGSize(width: 0.0, height: 1.0)
        gradientLayer.shadowRadius = 2.0
        gradientLayer.shadowOpacity = 0.5

        gradientLayer.masksToBounds = false

    }

}

Градиентные слои в iOS по умолчанию идут сверху вниз, поэтому вам нужно только определить верхний и нижний цвета.Этот подход также включает вашу тень (как показано на выходном изображении вашего эскиза).И он будет поддерживать градиент и тень при использовании пользовательского вида с автоматическим макетом:

    let v = MyGradientView()
    view.addSubview(v)

    v.translatesAutoresizingMaskIntoConstraints = false

    v.topAnchor.constraint(equalTo: view.topAnchor, constant: 100.0).isActive = true
    v.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -100.0).isActive = true
    v.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40.0).isActive = true
    v.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40.0).isActive = true

Результат:

Answer 2

В соответствии с документацией CAGradientLayer (https://developer.apple.com/documentation/quartzcore/cagradientlayer) для указания местоположения цветов вы можете использовать свойство местоположений (в вашем случае [0, 0,68, 1]):

var locations: [NSNumber]? { get set }

но, как написал @Alladinian в комментарии к вашему примеру, похоже, что ваш градиент нарисован снизу вверх и начинается перед просмотром и заканчивается далеко после просмотра, поэтому вы видите только часть