CAGradientLayer不显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CAGradientLayer不显示相关的知识,希望对你有一定的参考价值。

我已经查看过这样的问题的其他一些答案,但没有一个答案似乎解决了我的问题,所以寻求一些帮助。

我正在尝试将垂直渐变应用于UIButton,但渐变层在我的视图中没有显示。这是相关代码:

let darkPurple = UIColor(displayP3Red: 61.0/255.0, green: 3.0/255.0, blue: 110.0/255.0, alpha: 1.0)
let lightPurple = UIColor(displayP3Red: 90.0/255.0, green: 32.0/255.0, blue: 130.0/255.0, alpha: 1.0)

let addButton = UIButton(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
addButton.title = "Start counting"
addButton.layer.cornerRadius = 30.0
addButton.layer.borderWidth = 1.0
addButton.layer.borderColor = darkPurple.cgColor
addButton.translatesAutoresizingMaskIntoConstraints = false
myView.addSubview(addButton)
addButton.applyGradient(with: [lightPurple, darkPurple], gradientOrientation: .vertical)

...以及应用渐变的代码:

typealias GradientPoints = (startPoint: CGPoint, endPoint: CGPoint)

enum GradientOrientation {
  case topRightBottomLeft
  case topLeftBottomRight
  case horizontal
  case vertical

  var startPoint: CGPoint {
    return points.startPoint
  }

  var endPoint: CGPoint {
    return points.endPoint
  }

  var points: GradientPoints {
    switch self {
    case .topRightBottomLeft:
      return (CGPoint(x: 0.0, y: 1.0), CGPoint(x: 1.0, y: 0.0))
    case .topLeftBottomRight:
      return (CGPoint(x: 0.0, y: 0.0), CGPoint(x: 1.0, y: 1.0))
    case .horizontal:
      return (CGPoint(x: 0.0, y: 0.0), CGPoint(x: 1.0, y: 0.0))
    case .vertical:
      return (CGPoint(x: 0.0, y: 0.0), CGPoint(x: 0.0, y: 1.0))
    }
  }
}

extension UIView {
  func applyGradient(with colors: [UIColor], gradientOrientation orientation: GradientOrientation) {
    let gradient = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colors.map { $0.cgColor }
    gradient.startPoint = orientation.startPoint
    gradient.endPoint = orientation.endPoint
    gradient.borderColor = self.layer.borderColor
    gradient.borderWidth = self.layer.borderWidth
    gradient.cornerRadius = self.layer.cornerRadius
    gradient.masksToBounds = true
    gradient.isHidden = false

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

这就是我得到的:empty button

谢谢你的帮助!

答案

自动布局不会影响UIView对象的图层,因此在计算UIButton的帧之前,过早地应用渐变图层。当指定渐变图层的frame属性时,按钮的边界仍然等于CGRect.zero,并且以后永远不会更新渐变图层帧。

您会发现,如果在计算按钮帧后添加渐变图层,它将按预期工作。例如:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let darkPurple = UIColor(displayP3Red: 61.0/255.0, green: 3.0/255.0, blue: 110.0/255.0, alpha: 1.0)
    let lightPurple = UIColor(displayP3Red: 90.0/255.0, green: 32.0/255.0, blue: 130.0/255.0, alpha: 1.0)

    addButton.applyGradient(with: [lightPurple, darkPurple], gradientOrientation: .vertical)
}

enter image description here

另一种选择是更新frame中渐变图层的viewDidLayoutSubviews()属性或创建自定义UIButton子类,并在按钮框架更新时更新渐变图层框架。

Reference

另一答案

子层按顺序排列。在索引0处插入图层会将其置于任何其他子图层后面。我从来没有试过用按钮做到这一点,但怀疑它至少有一个覆盖你想要添加的渐变的子图层。

尝试使用addSublayer(),这将把图层放在子图层数组的顶部。

编辑:

我构建了一个代码变体,当我将self.layer.insertSublayer(_:at:)更改为addSublayer()时,它可以正常工作。

以上是关于CAGradientLayer不显示的主要内容,如果未能解决你的问题,请参考以下文章

CAGradientLayer 框架未正确显示

为啥我的 CAGradientLayer 没有显示?

CAGradientLayer 在 UITableView backgroundColor 上不起作用

CAGradientLayer 导致子视图不可见

如何增加色彩空间CAGradientLayer

UICollectionViewCell - 将不同的 CAGradientLayer 应用于不同的 UIView