CAGradientLayer 不适用于以编程方式创建的完整视图 UI

Question

我正在开发一个 iOS 项目，该项目以编程方式创建其所有 UI。不是故事板。

我想为 UIViewController 的 UIView 的背景添加渐变。

我创建了以下扩展方法。

extension UIView {
    
    func addGradient(colors: [UIColor]) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.bounds = bounds
        gradientLayer.colors = colors.map { [=11=].cgColor }
        layer.insertSublayer(gradientLayer, at: 0)
    }
    
}

然后我在 ViewController 的 viewDidLoad 中添加了渐变，就像这样。

let topColor = UIColor(red: 0.28, green: 0.521, blue: 0.696, alpha: 1)
let bottomColor = UIColor(red: 0.575, green: 0.615, blue: 0.692, alpha: 1)
view.addGradient(colors: [topColor, bottomColor])

但是渐变没有应用到屏幕的整个宽度和高度。

我打印了视图的边界，它显示了这些值。

(0.0, 0.0, 375.0, 812.0)

所以我不确定为什么渐变仍然没有覆盖整个视图。

Answer 1

在 addGradient(colors:) 方法中设置 gradientLayer's frame 而不是 bounds，即

func addGradient(colors: [UIColor]) {
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds //here.....

    //rest of the code...
}

此外，按照建议将您的代码移至 viewDidLayoutSubviews() 方法，

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    let topColor = UIColor(red: 0.28, green: 0.521, blue: 0.696, alpha: 1)
    let bottomColor = UIColor(red: 0.575, green: 0.615, blue: 0.692, alpha: 1)
    view.addGradient(colors: [topColor, bottomColor])
}

这是因为，gradient's frame 必须在每次 view's 布局发生任何变化时进行更改。例如，纵向和横向。

Answer 2

当我们将视图边界添加到渐变层框架时，我们必须更新 viewDidLayoutSubviews 中的框架。这对我来说可以以下对我有用

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    self.gradient.frame = containerView.bounds
}

containerView 是我设置渐变层的视图。

CAGradientLayer 不适用于以编程方式创建的完整视图 UI

CAGradientLayer not applying to the full view in programmatically created UI

calayer

bounds

ios

cagradientlayer

swift