使用自动布局将渐变颜色应用于故事板视图

如何解决使用自动布局将渐变颜色应用于故事板视图

我在情节提要中添加了一个 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])

但这会创建双渐变层。 see the image

我尝试为 GradientLayer 添加一个类，如here 所述。但这不允许从故事板设置视图。给出弱变量的警告。

解决方法

这是制作 @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() 的方法

,

这是@IBDesignable渐变视图的代码。您可以从 Storyboard 使用从上到下和从左到右。

private var startGradientColorAssociatedKey : UIColor = .black
private var endGradientColorAssociatedKey : UIColor = .black
private var observationGradientView: NSKeyValueObservation?

extension UIView {


@IBInspectable var startGradientColor: UIColor {
    get {
        if let color = objc_getAssociatedObject(self,&startGradientColorAssociatedKey) as? UIColor {
            return color
        } else {
            return .black
        }
    } set {
        objc_setAssociatedObject(self,&startGradientColorAssociatedKey,newValue,.OBJC_ASSOCIATION_RETAIN)
    }
}

@IBInspectable var endGradientColor: UIColor {
    get {
        if let color = objc_getAssociatedObject(self,&endGradientColorAssociatedKey) as? UIColor {
            return color
        } else {
            return .black
        }
    } set {
        objc_setAssociatedObject(self,&endGradientColorAssociatedKey,.OBJC_ASSOCIATION_RETAIN)
    }
}


@IBInspectable
var isTopToBottomGradient: Bool {
    get {
        return self.isTopToBottomGradient
    }
    set {
        DispatchQueue.main.async {
            if newValue {
                self.setGradientBackground(colorTop: self.startGradientColor,colorBottom: self.endGradientColor)
            } else {
                self.setGradientBackground(colorLeft: self.startGradientColor,colorRight: self.endGradientColor)
            }
        }
    }
}


func setGradientBackground(colorLeft: UIColor,colorRight: UIColor) {
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [colorLeft.cgColor,colorRight.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0,y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0,y: 0.5)
    gradientLayer.locations = [0,1]
    gradientLayer.frame = bounds
    observationGradientView = self.observe(\.bounds,options: .new) { [weak gradientLayer] view,change in
        if let value =  change.newValue {
            gradientLayer?.frame = value
        }
    }
    
    layer.insertSublayer(gradientLayer,at: 0)
}
}

Use from Storyboard : 如果你想设置从上到下的渐变，那么设置 ON isTopToBottomGradient 键。默认值为 OFF