how to make UIBarButtonItem class from UI Button?

Question

I am a beginner I want to make a top bar button that has badge like the picture above, after searching on the internet, I can make the badge on the button by implementing the SSBadgeButton like the code below

import UIKit

class SSBadgeButton: UIButton {

    var badgeLabel = UILabel()

    var badge: String? {
        didSet {
            addBadgeToButon(badge: badge)
        }
    }

    public var badgeBackgroundColor = UIColor.red {
        didSet {
            badgeLabel.backgroundColor = badgeBackgroundColor
        }
    }

    public var badgeTextColor = UIColor.white {
        didSet {
            badgeLabel.textColor = badgeTextColor
        }
    }

    public var badgeFont = UIFont.systemFont(ofSize: 12.0) {
        didSet {
            badgeLabel.font = badgeFont
        }
    }

    public var badgeEdgeInsets: UIEdgeInsets? {
        didSet {
            addBadgeToButon(badge: badge)
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        addBadgeToButon(badge: nil)
    }

    func addBadgeToButon(badge: String?) {
        badgeLabel.text = badge
        badgeLabel.textColor = badgeTextColor
        badgeLabel.backgroundColor = badgeBackgroundColor
        badgeLabel.font = badgeFont
        badgeLabel.sizeToFit()
        badgeLabel.textAlignment = .center
        let badgeSize = badgeLabel.frame.size

        let height = max(18, Double(badgeSize.height) + 5.0)
        let width = max(height, Double(badgeSize.width) + 10.0)

        var vertical: Double?, horizontal: Double?
        if let badgeInset = self.badgeEdgeInsets {
            vertical = Double(badgeInset.top) - Double(badgeInset.bottom)
            horizontal = Double(badgeInset.left) - Double(badgeInset.right)

            let x = (Double(bounds.size.width) - 10 + horizontal!)
            let y = -(Double(badgeSize.height) / 2) - 10 + vertical!
            badgeLabel.frame = CGRect(x: x, y: y, width: width, height: height)
        } else {
            let x = self.frame.width - CGFloat((width / 2.0))
            let y = CGFloat(-(height / 2.0))
            badgeLabel.frame = CGRect(x: x, y: y, width: CGFloat(width), height: CGFloat(height))
        }

        badgeLabel.layer.cornerRadius = badgeLabel.frame.height/2
        badgeLabel.layer.masksToBounds = true
        addSubview(badgeLabel)
        badgeLabel.isHidden = badge != nil ? false : true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.addBadgeToButon(badge: nil)
        fatalError("init(coder:) has not been implemented")
    }
}

as we can see the SSBadgeButtonis UIButton, and I need to convert that SSBadgeButton to UIBarButtonItem. the purpose of this is to make the UIBarButtonItem class to be accessible in the Interface builder as the custom class like the picture below

You need to add your custom button as customView in your UIBarButtonItem — Reinier Melian, Mar 20 '18 at 09:01
Anyway you can add a UIButton as navigationBar button simply dragging it in the storybord, to your navigation navigation bar and changing the button class to your class — Reinier Melian, Mar 20 '18 at 09:04
Possible duplicate of [UIBarButtonItem in navigation bar programmatically?](https://stackoverflow.com/questions/30022780/uibarbuttonitem-in-navigation-bar-programmatically) — Nikunj Damani, Mar 20 '18 at 09:04

score 2 · Accepted Answer · answered Mar 20 '18 at 09:04

You don't need to convert the UIButton to UIBarButtonItem, you can always create UIBarbuttonItem using UIButton as shown below

    let button = UIButton()
    button.setTitle("ABCD", for: .normal)
    let uiBarButtonItem = UIBarButtonItem(customView: button)
    self.navigationItem.leftBarButtonItems = [uiBarButtonItem]

Instead of UIButton you will use your SSBadgeButton thats all

Hope it helps

score 1 · Answer 2 · answered Mar 20 '18 at 09:04

1

you can create UIBarButtonItem with custom button

let button = SSBadgeButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30)
let barBtnItem = UIBarButtonItem(customView: button)

answered Mar 20 '18 at 09:04

Quoc Nguyen

2,839
6
23
28

how to make UIBarButtonItem class from UI Button?

2 Answers2