将CAShapeLayer添加到UIButton但它出现在边框线下

Posted 2021-04-18

我想在UIButton的边框添加一个红点。我目前添加点的代码是这样的：

required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUp()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUp()
    }

    override func setUp() {
        super.setUp()
        layer.borderWidth = borderWidth
        layer.borderColor = normalBorderColor.cgColor

        let redDotLayer = CAShapeLayer()
        redDotLayer.path = CGPath(ellipseIn: CGRect(x: 30, y: -3.5, width: 8, height: 8), transform: nil)
        redDotLayer.fillColor = UIColor.red.cgColor
        layer.addSublayer(redDotLayer)
    }

但是，当我添加红点时，它会出现在边框线下方。我需要它在边界线的顶部。

我在这做错了什么？

答案

CALayers最后可能只画出自己的边框。我认为最简单的解决方案就是在单独的图层中绘制边框，以便控制排序。

override func setUp() {
  super.setUp()

  let borderLayer = CALayer()
  borderLayer.borderWidth = borderWidth
  borderLayer.borderColor = normalBorderColor.cgColor
  layer.addSublayer(borderLayer)

  let redDotLayer = CAShapeLayer()
  redDotLayer.path = CGPath(ellipseIn: CGRect(x: 30, y: -3.5, width: 8, height: 8), transform: nil)
  redDotLayer.fillColor = UIColor.red.cgColor
  layer.addSublayer(redDotLayer)
}

另一答案

你的方法没有错。

1. 例如，只考虑将子视图添加到父UIView，子视图始终保留在父视图中，它不能添加到父视图上方。
2. 同样的情况适用于CALayer。你不能addSublayer上面的父层。
3. 作为例外，

与视图不同，超级图层不会自动剪切位于其边界矩形之外的子图层的内容。相反，超级层允许其子层默认显示为完整。但是，您可以通过将图层的masksToBounds属性设置为YES来重新启用剪切。

根据apple文档，子图层可以超出父可见区域，但不能超出父级。

3. 即使是以下方法也无济于事。 - insertSublayer:atIndex: - insertSublayer:above: - insertSublayer:below:

• addSublayer：将图层追加到图层的子图层列表中。

Solution

在按钮周围画另一个CAShapeLayer。