ios - 角标(Badge)显示在 UIButton 后面

Question

我创建了一个自定义类，用于向 UIButton 添加角标(Badge)。角标(Badge)本身是一个 UIImageView。该按钮可以针对每个状态具有不同的 UI；当按钮被禁用时，它有一个清晰的背景，它显示一个边框和标题，如下图所示。

如您所见，角标(Badge)显示在边框后面，但我希望角标(Badge)位于边框之上。我试图通过将其设置为例如来调整角标(Badge)层的 zPosition 9999. 我还尝试使用 bringSubviewToFront 方法将角标(Badge)置于最前面。两种方法都不起作用。我将角标(Badge)添加到按钮的代码是这样的:

private func addBadgeImageToButton() {
    // badgeImage is a string containing the imageName
    guard badgeImage != nil else {
        return
    }

    badgeImageView = UIImageView(image: UIImage(named: badgeImage!))

    // This line merely adjusts the position of the UIImageView
    badgeImageView!.frame = adjustedRectangleForBadge(initialSize: badgeImageView!.frame.size)

    badgeImageView!.layer.zPosition = 9999
    addSubview(badgeImageView!)

    // This line does not seem to work
    //self.bringSubviewToFront(badgeImageView!)

    // Adding these two lines won't do the trick either
    self.setNeedsLayout()
    self.layoutIfNeeded()
}

谁能帮我解决这个小问题？非常感谢任何帮助!

Answer 1

这是预期的行为。边框应该始终位于所有 subview 之上。您可以通过在 UIButton 上添加带边框的 UIView 然后在其后添加图标来获得所需的效果。

let borderView = UIView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)
borderView.layer.cornerRadius = self.layer.cornerRadius
borderView.layer.borderColor = self.layer.borderColor

// Remove the border color from the button its self
self.layer.borderColor = UIColor.clear.cgColor

// Add the border view to fake the border being there
addSubview(borderView)

// Then add the imageView on top of that border view
addSubview(badgeImageView)