CODEWITHSUNDEEP
iosswiftuibarbuttonitem
Agung
Agung

Reputation: 13803

how to make UIBarButtonItem class from UI Button?

enter image description here

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

enter image description here

Upvotes: 0

Views: 611

Answers (2)

Sandeep Bhandari
Sandeep Bhandari

Reputation: 20369

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

Upvotes: 2

Quoc Nguyen
Quoc Nguyen

Reputation: 3007

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)

Upvotes: 1

Related Questions