ios - 自定义 BarButtonItem 项目 : Add red dot on top right corner, Swift 4 IOS

Question

我想在 UIbarButtonItem 上添加/设置未读标记为右上角的红点，请参见附图

我应该如何在条形按钮项目上添加/设置红点？一旦用户点击项目然后我想删除红点。

Answer 1

UIButton 子类

好的，让我们开始创建自定义 UIButton 子类

class ButtonWithBadge: UIButton {
}

现在让我们创建代表红点的UIView

let badgeView: UIView = {
    let view = UIView()
    view.layer.cornerRadius = 3
    view.backgroundColor = .red
    return view
}()

然后为该子类重写 init 并在内部将此 badgeView 添加到按钮的右上角:设置其约束(右侧和顶部等于按钮的 anchor 和宽度以及badgeView 的 cornerRadius 值的两倍的高度)

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

    addSubview(badgeView)
    badgeView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        badgeView.rightAnchor.constraint(equalTo: rightAnchor, constant: 3),
        badgeView.topAnchor.constraint(equalTo: topAnchor, constant: 3),
        badgeView.heightAnchor.constraint(equalToConstant: badgeView.layer.cornerRadius*2),
        badgeView.widthAnchor.constraint(equalToConstant: badgeView.layer.cornerRadius*2)
    ])
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

接下来创建代表按钮当前状态的变量:

var isRead: Bool = false

现在让我们创建一些方法来根据 isRead 值隐藏或取消隐藏 badgeView

func setBadge() {
    badgeView.isHidden = isRead
}

现在我们有了函数，对吧？所以让我们在 init 的末尾和 isRead 变量的 didSet 中调用这个函数

class ButtonWithProperty: UIButton {

var isRead: Bool = false {
    didSet {
        setBadge()
    }
}

override init(frame: CGRect) {
    ...
    setBadge()
}

添加到 View Controller

首先为按钮和 View 创建变量

lazy var barButton: ButtonWithProperty = {
    let button = ButtonWithProperty()
    ... // set color, title, target, etc.
    return button
}()

现在例如在 viewDidLoad 中将此 barButton 添加到 UINavigationBar 并将其放置在您想要的位置:

override func viewDidLoad() {
    super.viewDidLoad()
    ...
    guard let navigationBar = self.navigationController?.navigationBar else { return }

    navigationBar.addSubview(barButton)
    barButton.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        barButton.rightAnchor.constraint(equalTo: navigationBar.rightAnchor, constant: -20),
        barButton.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor, constant: -6)
    ])

}

现在，当您需要时，您可以轻松更改 barButton 的 isRead 变量，红点消失或出现

barButton.isRead = true

---

class ButtonWithProperty: UIButton {

    var isRead: Bool = false {
        didSet {
            setBadge()
        }
    }

    lazy var badgeView: UIView = {
        let view = UIView()
        view.layer.cornerRadius = 3
        view.backgroundColor = .red
        return view
    }()

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

        addSubview(badgeView)
        badgeView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            badgeView.rightAnchor.constraint(equalTo: rightAnchor, constant: 3),
            badgeView.topAnchor.constraint(equalTo: topAnchor, constant: 3),
            badgeView.heightAnchor.constraint(equalToConstant: badgeView.layer.cornerRadius*2),
            badgeView.widthAnchor.constraint(equalToConstant: badgeView.layer.cornerRadius*2)
        ])

        setBadge()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setBadge() {
        badgeView.isHidden = isRead
    }

}

内部 View Controller :

class ViewController: UIViewController {

    lazy var barButton: ButtonWithProperty = {
        let button = ButtonWithProperty()
        ... // color, title, target, etc.
        return button
    }()

    ...

    override func viewDidLoad() {
        super.viewDidLoad()
        ...
        guard let navigationBar = self.navigationController?.navigationBar else { return }

        navigationBar.addSubview(barButton)
        barButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            barButton.rightAnchor.constraint(equalTo: navigationBar.rightAnchor, constant: -20),
            barButton.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor, constant: -6)
        ])

    }
    ...
}