在情节提要板上创建颜色渐变

大家好，我叫Egor Sakhabaev，这是我在这里的第一篇文章🙂

今天，我将教您如何在情节提要上创建颜色渐变视图。

因此，让我们创建一个GradientView类：

  @IBDesignableclass GradientView：UIView {@IBInspectable var firstColor：UIColor = UIColor.clear {didSet {updateView（）}} @IBInspectable var secondColor：UIColor = UIColor.clear {didSet {updateView（）}}
      func updateView（）{}} 

好的，我们创建了UIView类的GradientView子类，该子类具有2个属性：firstColor和secondColor。 当@IBDesignable指定应用于UIView或NSView子类时，它使Interface Builder知道它应直接在画布中呈现视图。 这样一来，您无需更改每次构建后即可运行您的应用，即可查看自定义视图的显示方式。

因此，我们需要在视图上应用颜色。 这就是为什么我们创建了updateView（）函数。 让我们继续：

 覆盖类var layerClass：AnyClass {get {返回CAGradientLayer.self
    }
 } func updateView（）{让layer = self.layer为！  CAGradientLayer layer.colors = [firstColor，secondColor] .map {$ 0.cgColor}} 

在这里，我们说我们的图层是CAGradientLayer.self，然后设置我们的颜色。

让我们在Storyboard文件中添加新的View，然后选择GradientView作为类，定义第一和第二种颜色。 开始了：

现在我们有一个垂直渐变视图。 让我们添加新属性isHorizo​​natal并更改我们的updateView函数，如下所示：

  @IBInspectable var isHorizo​​ntal：Bool = true {didSet {updateView（）}} func updateView（）{让layer = self.layer为！  CAGradientLayer layer.colors = [firstColor，secondColor] .map {$ 0.cgColor} if（sef.isHorizo​​ntal）{layer.startPoint = CGPoint（x：0，y：0.5）layer.endPoint = CGPoint（x：1，y： 0.5）} else {layer.startPoint = CGPoint（x：0.5，y：0）layer.endPoint = CGPoint（x：0.5，y：1）}}
 } 

现在，如果isHorizo​​ntal为false，我们的渐变将从视图顶部的中间开始，到底部的中间结束。 如果isHorizo​​ntal为true，则渐变将从中间的左边缘开始，到中间的右边缘结束。 外观如下：

希望我的文章对您有用。 您可以在此处找到完整的源代码：

https://gist.github.com/Banck/18a20901bcd6fb872a85b56ed71fcd12

感谢您的关注！