CODEWITHSUNDEEP
iosswift
Anuran Barman
Anuran Barman

Reputation: 1676

Round UIBarButtonItems in Swift

I am trying to make round (sort of notification counter which you see on most of the apps) UIBarButtonItem in Swift. I know how to do it but the thing is it is actually being round only when I am setting the width as 34 and height as 24. Are these magic numbers for UIBarButtonItems ? If I set the width or height (same , my desired frame is 30 x 30) for something else and calculate the cornerRadius based on the width then it is not perfect circle rather rounded rectangle. What is I am doing wrong ? My code is below : 

        let button = UIButton(type: .custom)
        button.frame = CGRect(x: 0, y: 0, width: 34, height: 24)
        button.backgroundColor = DarkModeUtil.isDarkMode() ? UIColor.white : UIColor.black
        button.setTitle("\(self.pickedAppActions.count > 9 ? "9+" : "\(self.pickedAppActions.count)")", for: .normal)
        button.setTitleColor(DarkModeUtil.isDarkMode() ? .black : UIColor.white, for: .normal)
        button.contentHorizontalAlignment = .center
        button.titleLabel?.fitSize()
        button.layer.cornerRadius = button.bounds.size.width / 2
        button.clipsToBounds = true
        button.addTarget(self, action: #selector(counterTapped(_:)), for: [.touchUpInside])

        let doneItem = UIBarButtonItem(image: UIImage(named: "done")?.withRenderingMode(.alwaysTemplate), style: .plain, target: self, action: #selector(doneButtonClicked(_:)))
        doneItem.tintColor = DarkModeUtil.isDarkMode() ? .white : .black

        let counterButton = UIBarButtonItem(customView: button)
        let buttons:[UIBarButtonItem] = [doneItem,counterButton]
        self.navigationItem.rightBarButtonItems = buttons

If I set same width and height for example 30 x 30 I get button like this:

rounded rectangle rather than perfect circle

Upvotes: 2

Views: 1292

Answers (3)

Aditya
Aditya

Reputation: 823

You can set corner radius of the Button using 

    button.frame = CGRect(x: 0, y: 0, width: 84, height: 40)

    button.layer.cornerRadius = button.bounds.size.height / 2

Note: Button Maximum height: 44 and Minimum height: 34 in UINavigationBar as checked from view hierarchy.

enter image description here

Upvotes: 1

Tushar Moradiya
Tushar Moradiya

Reputation: 2128

Please try with this code :

For Round button you need to make height and width same value :

    let button = UIButton(type: .custom)
    button.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    button.backgroundColor = UIColor.black
    button.setTitle("999", for: .normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 12.0)
    button.titleLabel?.minimumScaleFactor = 0.5
    button.titleLabel?.numberOfLines = 0
    button.titleLabel?.adjustsFontSizeToFitWidth = true
    button.layer.cornerRadius = button.frame.size.height/2
    button.clipsToBounds = true

    let counterButton = UIBarButtonItem(customView: button)
    let buttons:[UIBarButtonItem] = [counterButton]
    self.navigationItem.rightBarButtonItems = buttons

Upvotes: 0

Ruchi Makadia
Ruchi Makadia

Reputation: 1083

make height and width 34 work for me. here is a code. also no need to change button.frame.size.width / 2.

enter image description here

 let button = UIButton(type: .custom)
    button.frame = CGRect(x: 0, y: 0, width: 34, height: 34)
    button.backgroundColor = DarkModeUtil.isDarkMode() ? UIColor.white : UIColor.black
    button.setTitle("\(self.pickedAppActions.count > 9 ? "9+" : "\(self.pickedAppActions.count)")", for: .normal)
    button.setTitleColor(DarkModeUtil.isDarkMode() ? .black : UIColor.white, for: .normal)
    button.contentHorizontalAlignment = .center
    button.titleLabel?.fitSize()
    button.layer.cornerRadius = button.bounds.size.width / 2
    button.clipsToBounds = true
    button.addTarget(self, action: #selector(counterTapped(_:)), for: [.touchUpInside])

    let doneItem = UIBarButtonItem(image: UIImage(named: "done")?.withRenderingMode(.alwaysTemplate), style: .plain, target: self, action: #selector(doneButtonClicked(_:)))
    doneItem.tintColor = DarkModeUtil.isDarkMode() ? .white : .black

    let counterButton = UIBarButtonItem(customView: button)
    let buttons:[UIBarButtonItem] = [doneItem,counterButton]
    self.navigationItem.rightBarButtonItems = buttons

Upvotes: 1

Related Questions