向圆形按钮添加徽章-Swift

Question

我想将红点下方的徽标始终放置在按钮的右上方。

let badgeView = UIButton (frame: CGRect (x: 20, y: 40, width: 16, height: 16))
self.addsubview (badgeview)

使用此代码，结果是这样并且是错误的：

我该怎么做？

Answer 1

您可以使用约束将视图与Superview的右上角对齐。如下所示将badgeView添加到UIButton。您可以使用常量。

// your button
let buttonSize: CGFloat = 50
let button = UIButton(frame: CGRect(x: 0, y: 0, width: buttonSize, height: buttonSize))
button.layer.backgroundColor = UIColor.black.cgColor
button.layer.cornerRadius = buttonSize / 2

// your badge view (use UIView instead of UIButton)
let badgeSize: CGFloat = 16
let badgeView = UIView()
badgeView.backgroundColor = UIColor(red: 235/255, green: 68/255, blue: 90/255, alpha: 1)
badgeView.layer.cornerRadius = badgeSize / 2
button.addSubview(badgeView)

// set constraints
badgeView.translatesAutoresizingMaskIntoConstraints = false
let constraints: [NSLayoutConstraint] = [
    badgeView.rightAnchor.constraint(equalTo: button.rightAnchor, constant: -4),
    badgeView.topAnchor.constraint(equalTo: button.topAnchor, constant: 0),
    badgeView.widthAnchor.constraint(equalToConstant: badgeSize),
    badgeView.heightAnchor.constraint(equalToConstant: badgeSize)
]
NSLayoutConstraint.activate(constraints)

Answer 2

如果徽章的大小和徽章所在的按钮均不变，则徽章的框架应为：

CGRect(x: radius * cos45 + radius, y: radius - radius * cos45, width: 0, height: 0).insetBy(dx: -8, dy: -8)

其中cos45是sqrt(2) / 2，而radius是黑色按钮的半径。这将绘制徽章，其中心位于按钮的圆周上。

let cos45 = sqrt(2) / 2
let badgeView = UIButton (frame: CGRect(x: radius * cos45 + radius, y: radius - radius * cos45, width: 0, height: 0).insetBy(dx: -8, dy: -8))
// make badgeView look pretty...
self.addSubview (badgeview)

我觉得对徽章使用UIButton有点奇怪，除非点击徽章与点击按钮有所不同。否则，您可以使用常规的UIView。