使用UIButton的z顺序将子图层或UIView作为子视图添加到顶部仍在视图后面或看起来透明

时间:2019-03-20 09:52:20

标签: ios swift uibezierpath cashapelayer

我有一个UIButton,我想在上面加上一个圆形徽章,这是它的外观。

public func addCircleBadge(_ width: CGFloat, color: UIColor) {
        let bounds = self.mybtn.bounds
        let layer = CAShapeLayer()
        let radius = width / 2
        layer.path = UIBezierPath(roundedRect: CGRect(x: bounds.width - (radius + 2.0), y: bounds.minY - (radius-2.0), width: width, height: width), cornerRadius: radius).cgPath
        layer.fillColor = color.cgColor
        layer.zPosition = 999
        layer.name = "circleBadge"
        self.mybtn.layer.addSublayer(layer)
    }

viewDidLoad()

override func viewDidLoad() {
    super.viewDidLoad()
    mybtn.layer.borderColor = UIColor.blue.cgColor
    mybtn.layer.cornerRadius = 3.0
    mybtn.layer.borderWidth = 2.0
    mybtn.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    addCircleBadge(20, color: UIColor.red.withAlphaComponent(1.0))
}

但是该层看起来是透明的,所以按钮区域是可见的,我想在按钮顶部有一个不透明的层。是否可以通过图层来完成,还是我需要添加其他视图并将两个按钮和单独的UIView放置在同一视图中?

button with ca layer

1 个答案:

答案 0 :(得分:1)

据我了解,您为borderWidth设置了borderColorbutton.layerbutton.layer托管您添加到其中的所有其他子图层,这就是边框始终位于顶部的原因。

因此,您可以使用其他视图绘制圆或... 只需删除borderWidth的设置borderColorbutton.layer,然后添加另一个将覆盖边界的子图层即可。

例如:

    func addBorder(borderWidth: CGFloat = 1.0, borderColor: UIColor = UIColor.blue) {
        let layer = CALayer()
        let frame = self.mybtn.frame
        layer.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
        layer.borderColor = borderColor.cgColor
        layer.borderWidth = borderWidth
        self.mybtn.layer.addSublayer(layer)
    }

并在ViewDidLoad中:

    override func viewDidLoad() {
        super.viewDidLoad()
        addBorder()
        addCircleBadge(20, color: UIColor.red)
    }

addCircleBadge的一个更新

    public func addCircleBadge(_ width: CGFloat, color: UIColor) {
        ...

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