CAGradientLayer不显示

Question

我已经查看了许多其他类似问题的答案，但是这些答案似乎都无法解决我的问题，因此需要一点帮助。

我正在尝试将垂直渐变应用于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

感谢您的帮助！

Answer 1

“自动布局”不会影响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)
}

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

Reference

Answer 2

子层是从后到前的顺序。在索引0处插入图层会将其放置在任何其他子图层的后面。我从未尝试使用按钮来做到这一点，但怀疑它至少有一个子图层覆盖了您要添加的渐变。

尝试使用addSublayer()代替，这会将图层置于子图层数组的顶部。

编辑：

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

Answer 3

对于已经花费数小时进行搜索的人（就像我一样）：

确保您的颜色数组包含 df.groupby('userId').filter(lambda x: x['preference'].nunique()>1) 而不是 userId | preference 1 2 | cake 2 2 | tea 6 4 | apple 7 4 | tea ，根据文档：

<块引用>

颜色

CGColorRef 对象数组，定义每个对象的颜色 梯度停止。可动画。

https://developer.apple.com/documentation/quartzcore/cagradientlayer/1462403-colors