时间戳

首页 > 解决方案 > 使用自动布局将渐变颜色应用于情节提要视图

ios - 使用自动布局将渐变颜色应用于情节提要视图

问题描述

我在情节提要中添加了一个 UIView 并希望使用渐变颜色设置其背景。这是我的代码

extension UIView {
    func setGradientBackground(colors: [CGColor]) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = colors
        gradientLayer.locations = [0.0, 1.0]
        gradientLayer.frame = self.bounds
        self.layer.insertSublayer(gradientLayer, at:0)
    }
}

在视图控制器中，

viewSocial.setGradientBackground(colors: [UIColor.gradientBottomColor.cgColor, UIColor.gradientTopColor.cgColor])

但这会创建双梯度层。 看图片

我已经尝试为 GradientLayer 添加一个类，如此处所述。但这不允许从情节提要中设置视图。给出弱变量的警告。

标签： iosswiftautolayoutcagradientlayer

解决方案

这是制作@IBDesignable渐变视图的一种方法。它使用默认的从上到下的渐变方向：

@IBDesignable
class MyGradientView: UIView {
    
    @IBInspectable var color1: UIColor = .red {
        didSet { setNeedsDisplay() }
    }
    @IBInspectable var color2: UIColor = .yellow {
        didSet { setNeedsDisplay() }
    }

    private var gradientLayer: CAGradientLayer!
    
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        // use self.layer as the gradient layer
        gradientLayer = self.layer as? CAGradientLayer
        gradientLayer.colors = [color1.cgColor, color2.cgColor]
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        gradientLayer.colors = [color1.cgColor, color2.cgColor]
    }
    
}

它具有@IBInspectable“color1”和“color2”的变量......在属性检查器中更改它们将反映在情节提要中。

不需要任何额外的代码，例如您当前的方法setGradientBackground()

推荐阅读