使用滑块实时更改CAGradientLayer的颜色

Question

我想能够改变实时更改CAGradientLayer的颜色与我在@IBAction主要ViewController收到的值。 UISlider移动，背景颜色变化。我要求理论方法。

用于实现此目的的模式或技术是什么？我真的迷路了，强大的互联网没有透露任何可用的帮助。

• 子类化UIView并在那里添加gradientLayer？然后使用传入值观察变量，让KVO用cgColor值更新数组条目（颜色集）？
• 在主要的gradientLayerr中实例化ViewControlle并在价值变化通过@IBAction进入时更新其颜色属性？

代码有帮助，但它在这里是次要的。我要求更多的理论解决方案。我尝试跟随MVC，但我很难混淆gradientLayer应该被实例化的地方，最好的方法是动态地改变颜色等...打开输入，thx

Answer 1

使用非常简单的UIView扩展，您可以获得所需。以下是使用半静态颜色的简单示例，但您可以根据需要进行扩展。

extension UIView {
    /**
     Adds colors to a CAGradient Layer.
     - Parameter value: The Float coming from the slider.
     - Parameter gradientLayer: The CAGradientLayer to change the colors.
     */
    func addColorGradient (value: CGFloat, gradientLayer: CAGradientLayer) {
        let topColor = UIColor(red: value / 255, green: 1, blue: 1, alpha: 1)
        let bottomColor = UIColor(red: 1, green: 1, blue: value / 255, alpha: 1)
        gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
    }
}

用法示例：

import UIKit

class ViewController: UIViewController {

    let slider : UISlider = {
        let slider = UISlider(frame: .zero)
        slider.maximumValue = 255
        slider.minimumValue = 0.0
        return slider
    }()

    var gradientLayer = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(slider)
        slider.translatesAutoresizingMaskIntoConstraints = false
        slider.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        slider.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        slider.widthAnchor.constraint(equalToConstant: 200).isActive = true
        slider.heightAnchor.constraint(equalToConstant: 20).isActive = true
        slider.addTarget(self, action: #selector(sliderValueChanged), for: .valueChanged)
        gradientLayer.bounds = self.view.bounds
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    @objc func sliderValueChanged(sender: UISlider) {
        let currentValue = CGFloat(sender.value)
        self.view.addColorGradient(value: currentValue, gradientLayer: gradientLayer)
    }

}

只需根据需要更改topColor和bottomColor，并使用滑块操作它们的值。希望能帮助到你

Answer 2

class ViewController: UIViewController {

    var gradientLayer = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        gradientLayer.bounds = self.view.bounds
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

    // Slider Input
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        self.view.addColorGradient(value: CGFloat(sender.value), gradientLayer: gradientLayer)
    }
}