ios - 如何在真实设备上将渐变应用到 iOS 10 中的 UIView

Question

我有这个扩展，可以在 Swift 中向 View 添加渐变:

extension UIView {
    func addGradientWithColor(colorTop: UIColor, colorButton: UIColor){
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = [colorTop.cgColor, colorButton.cgColor]

        self.layer.insertSublayer(gradient, at: 0)
    }
}

然后，我在我的 UIViewController 中使用它:

override func viewDidLoad(){
    self.view.addGradientWithColor(colorTop: UIColor.red, colorButton: UIColor.clear)        
    super.viewDidLoad()
}

我运行模拟器，效果很好。但是当我想在真实设备上使用我的应用程序时，渐变不起作用。

PD:我尝试了很多方法来制作渐变，但在真实设备上都不起作用。

Answer 1

问题是当 View 的大小发生变化时您没有调整层的大小，因此它保持在初始值，这主要取决于 View 是如何创建的。

我建议使用 UIView 子类，并在 layoutSubviews 方法中更新图层大小，该方法总是在 View 调整大小时调用:

@IBDesignable
open class GradientView: UIView {
    @IBInspectable
    public var startColor: UIColor = .white {
        didSet {
            gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
            setNeedsDisplay()
        }
    }
    @IBInspectable
    public var endColor: UIColor = .white {
        didSet {
            gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
            setNeedsDisplay()
        }
    }

    private lazy var gradientLayer: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.colors = [self.startColor.cgColor, self.endColor.cgColor]
        return gradientLayer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        layer.insertSublayer(gradientLayer, at: 0)
    }

    public required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        layer.insertSublayer(gradientLayer, at: 0)
    }

    open override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
}

上面的代码还允许您从 Xcode 调整开始和结束颜色，以便您可以估计部署时 View 的外观。