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

Posted 2023-02-23

【中文标题】使用滑块实时更改 CAGradientLayer 的颜色

【英文标题】：Change the colors of CAGradientLayer with slider in realtime

【发布时间】：2019-03-28 17:49:00

【问题描述】：

我希望能够使用我在主ViewController 中收到的超过@IBAction 的值实时更改CAGradientLayer 的颜色。 UISlider 移动，背景颜色变化。我要求的是一种理论方法。

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

子类化 UIView 并在其中添加 gradientLayer ？然后用传入的值观察变量，让 KVO 用cgColor 值更新数组条目（颜色集）？

在主ViewController 中实例化gradientLayer 并在通过@IBAction 进入值更改时更新其颜色属性？

代码有帮助，但在这里是次要的。我要求更多的理论解决方案。我尝试遵循 MVC，但我几乎不混淆应该在哪里实例化渐变层，动态更改颜色等的最佳方法是什么…… 开放输入，谢谢

【参考方案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 并使用滑块操作它们的值。希望对你有帮助

【讨论】：

这是我需要的输入。谢谢@Galo Torres 塞维利亚。我在 Xcode 10.2 中将它与 Swift 5 一起使用，它可以正常工作。我不需要所有滑块的东西，因为我是通过故事板来做的。

【参考方案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)
    

【讨论】：

我的ViewController 在@Gallo Torres Sevilla 的回答之后。作品。我使用了UIView扩展而没有修改。