在视图中创建渐变使用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，你会发现很多解释它的材料，以及关于使用 Sketch 为 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 { $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

结果：