How to add Badges on UIBarbutton item?

Question

Hi friends am new to iphone developing. Am struggle with add badge values on UIBarbutton item on right side. I have tried but i can\'t solve this problem. Can anyone help me

Answer 1

After searching too many solutions I found this best solution for Objective-C

Goto Following Link and download two files "UIBarButtonItem+Badge.h" and "UIBarButtonItem+Badge.m" and add to your project :

https://github.com/mikeMTOL/UIBarButtonItem-Badge

Then import in your class :

#import "UIBarButtonItem+Badge.h"

And write down following line to add badge :

self.navigationItem.rightBarButtonItem.badgeValue = @"1"; //your value 

Hope it will Work !!!

Answer 2

Updated for Swift 3:

use below simple code to add the badge on UIBarButtonItem;

// Variable Declartion

var badgeCount = Int()

// Instance Method

    func setUpBadgeCountAndBarButton() {
        // badge label
        let label = UILabel(frame: CGRect(x: 10, y: -05, width: 25, height: 25))
        label.layer.borderColor = UIColor.clear.cgColor
        label.layer.borderWidth = 2
        label.layer.cornerRadius = label.bounds.size.height / 2
        label.textAlignment = .center
        label.layer.masksToBounds = true
        label.textColor = .white
        label.font = label.font.withSize(12)
        label.backgroundColor = .red
        label.text = "\(self.badgeCount)"

        // button
        let rightButton = UIButton(frame: CGRect(x: 0, y: 0, width: 35, height: 35))
        rightButton.setBackgroundImage(UIImage(named: "notification_dash"), for: .normal)
        rightButton.addTarget(self, action: #selector(notificationBarButtonClick), for: .touchUpInside)
        rightButton.addSubview(label)

        // Bar button item
        let rightBarButtomItem = UIBarButtonItem(customView: rightButton)
        navigationItem.rightBarButtonItem = rightBarButtomItem
    }

// Call To Method

self.badgeCount = 11
self.setUpBadgeCountAndBarButton()

//Note: Increase your badge as per you received notification.You have to write your code as per your decided your logic i.e. how to maintain that badge count number in database.

Enjoy..!

Answer 3

Finally i found the way to add badges on UIBarbutton item. I searched lot but not found the correct answer. So i created UIButton and add it as a Custom view on rightbarbutton item. Add add the MKNumberBadgeView for display the badge number. Below i have add my code for you.

// Initialize NKNumberBadgeView...
MKNumberBadgeView *number = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(60, 00, 30,20)];
number.value = 10;

// Allocate UIButton
UIButton *btn = [UIButton  buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 0, 70, 30);
    btn.layer.cornerRadius = 8;
    [btn setTitle:@"Button" forState:UIControlStateNormal];
    [btn addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
    //[btn setBackgroundColor:[UIColor blueColor]];
    [btn setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.1 alpha:0.2]];
    btn.font = [UIFont systemFontOfSize:13];
    //[btn setFont:[UIFont systemFontOfSize:13]];
    [btn addSubview:number]; //Add NKNumberBadgeView as a subview on UIButton

// Initialize UIBarbuttonitem...
UIBarButtonItem *proe = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.leftBarButtonItem = proe;

Thanks.

Answer 4

phyzalis has a good answer, there's a categorized version of his solution here:

UIBarButtonItem+Badge

Here's how you can use it:

// Build your regular UIBarButtonItem with Custom View
UIImage *image = [UIImage imageNamed:@"someImage"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0,0,image.size.width, image.size.height);
[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchDown];
[button setBackgroundImage:image forState:UIControlStateNormal];

// Make BarButton Item
UIBarButtonItem *navLeftButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = navLeftButton;

// this is the key entry to change the badgeValue
self.navigationItem.leftBarButtonItem.badgeValue = @"1";

Answer 5

Here is a simple Swift 4 solution for it (with some customisation) https://github.com/Syngmaster/BadgedBarButtonItem

Just drag and drop the class into your project and you can use it like that:

class ViewController: UIViewController {

    let btn = BadgedButtonItem(with: UIImage(named: "your_image"))

    override func viewDidLoad() {
        super.viewDidLoad()

        btn.badgeTextColor = .black
        btn.badgeTintColor = .yellow
        btn.position = .right
        btn.hasBorder = true
        btn.borderColor = .red
        btn.badgeSize = .medium
        btn.badgeAnimation = true

        self.navigationItem.rightBarButtonItem = btn

        btn.tapAction = {
            self.btn.setBadge(with: 4)
        }

    }

}

Answer 6

It's simple and the best way !

MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(230, -51, 40, 40)];
numberBadge.value = 5;

self.navigationController.navigationBar.layer.zPosition = -1;
[self.view addSubview:numberBadge];