使用来自 zeplin 的位置在视图中创建渐变

Question

我正在做一个需要对视图应用渐变的项目。我有草图文件和颜色，我将使用这些颜色对位置进行渐变，但我无法获得准确的视图。

任何人都可以帮助如何获得它？

我创建了一个应用渐变的函数：-

func applyGradient(colours: [UIColor]) -> Void {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = colours.map { [=10=].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 数组是要使用的颜色组合，我用了所有三种颜色，但仍然没有得到与草图中相同的颜色

我创造了什么：-

草图文件中的渐变颜色：-

sketch文件中的视图是这样的：-

Answer 1

根据 CAGradientLayer (https://developer.apple.com/documentation/quartzcore/cagradientlayer) 的文档来指定颜色的位置，您可以使用位置属性（在您的情况下为 [0, 0.68, 1]）：

var locations: [NSNumber]? { get set }

但是正如@Alladinian 在您示例的评论中所写，看起来您的渐变是从下到上绘制的，在视图之前开始，在视图之后很远的地方结束，所以您只看到一部分

Answer 2

夫妻问题...

1) 您的 "Gradient colors in sketch file:" 图片与您的 Sketch 文件输出图片不匹配。无论您在 sketch 中应用渐变，它都不是完整的从上到下（或者，在本例中，从下到上）渐变填充。

2) 在不同应用程序 and/or 设备中处理颜色时，您必须注意 "color spaces"。在 google 上快速搜索 sketch colors don't match，您会发现很多 material 的解释，以及使用草图绘制 iOS 目标的提示。

因此，让接近到您想要的输出的一个简单方法是使用 OS X 数字色度计 - 它应该默认安装在您的 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 { [=10=].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

结果：

使用来自 zeplin 的位置在视图中创建渐变

Create Gradient in View With locations from zeplin

gradient

ios

autolayout