ios - 使用来自 zeplin 的位置在 View 中创建渐变

Question

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

谁能帮忙弄到那个？

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

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 是要使用的颜色组合，我使用了所有三种颜色，但仍然没有得到与草图中相同的颜色

我创建的:-

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

sketch文件中的 View 是这样的:-

Answer 1

几个问题...

1) 您的“草图文件中的渐变颜色:” 图像与您的草图文件输出图像不匹配。无论您在草图中应用渐变，它都不是完整的从上到下(或者，在本例中，从下到上)的渐变填充。

2) 在不同的应用程序和/或设备中使用颜色时，您必须了解“颜色空间”。在 google 上快速搜索 sketch colors don't match，您会发现很多解释它的 Material ，以及针对 iOS 目标使用 sketch 的提示。

因此，接近您想要的输出的一种简单方法是使用 OS X 数字色度计 - 它应该默认安装在您的 Mac 上(如果没有，很容易找到) .该工具允许您将鼠标悬停在图像上的一个点上，并根据不同的颜色空间获取 RGB 值。 SRGB应该是匹配的。

此外，还有一种更好的方法来编写自定义 View 以供重用。看看这个方法:

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 中的渐变层从上到下，因此您只需要定义顶部和底部颜色。这种方法还包括您的阴影(如您的草图输出图像所示)。当使用带有自动布局的自定义 View 时，它将保持渐变和阴影:

    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

结果: