How to put a badge on customized UIBarButtonItem - ios

Question

I have a navigation bar with two buttons, one is a back button the other a chat symbol.
I write this code like this:
UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:#"back.png"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(goBackToPreviousView)];
self.navigationItem.leftBarButtonItem=_btn;
self.navigationItem.leftBarButtonItem.tintColor = [UIColor blackColor];
UIBarButtonItem *_btn2=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:#"chat.png"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(startChat)];
self.navigationItem.rightBarButtonItem=_btn2;
self.navigationItem.rightBarButtonItem.tintColor = [Utility colorWithHexValue:CyanBlue];
The problem I have is that whenever there is some new messages in the chat that I have not seen, there should be like a badge of some sort, or a customized label over the chat button, to indicate how many new messages you have.
How do I do this?

Answer 1

for Swift 3.0:
Result:
Code:
override func viewDidLoad() {
super.viewDidLoad()
// badge label
let label = UILabel(frame: CGRect(x: 10, y: -10, width: 20, height: 20))
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.font = UIFont(name: "SanFranciscoText-Light", size: 13)
label.textColor = .white
label.backgroundColor = .red
label.text = "80"
// button
let rightButton = UIButton(frame: CGRect(x: 0, y: 0, width: 18, height: 16))
rightButton.setBackgroundImage(UIImage(named: "inbox"), for: .normal)
rightButton.addTarget(self, action: #selector(rightButtonTouched), for: .touchUpInside)
rightButton.addSubview(label)
// Bar button item
let rightBarButtomItem = UIBarButtonItem(customView: rightButton)
navigationItem.rightBarButtonItem = rightBarButtomItem
}
func rightButtonTouched() {
print("right button touched")
}

Answer 2

in iOS 8 - I was able to do it by changing the badgeValue
self.messageButton.badgeValue = #"5";
where message button is a UIBarButton
You have to include these two files to your xcode
UIBarButtonItem+Badge.h
UIBarButtonItem+Badge.m
which can be found here
Github link to files

Answer 3

You can try this piece of code:-
UILabel *badgeLbl = [[UILabel alloc]initWithFrame:CGRectMake(16, -2, 18, 18)];
badgeLbl.backgroundColor = [UIColor whiteColor];
badgeLbl.textColor = [UIColor blackColor];
badgeLbl.textAlignment = NSTextAlignmentCenter;
badgeLbl.layer.cornerRadius = 9.0;
badgeLbl.layer.masksToBounds = true;
badgeLbl.text = #"10";
UIButton *notificationBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 35, 35)];
[notificationBtn setBackgroundImage:[UIImage imageNamed:#"image_name"] forState:UIControlStateNormal];
[notificationBtn setTitle:#"" forState:UIControlStateNormal];
[notificationBtn addTarget:self action:#selector(onClickAction:) forControlEvents:UIControlEventTouchUpInside];
[notificationBtn addSubview:badgeLbl];
UIBarButtonItem *notificationBarBtn = [[UIBarButtonItem alloc]initWithCustomView:notificationBtn];
self.navigationItem.rightBarButtonItem = notificationBarBtn;

Answer 4

Good day!
Here is my version - easy and without any problems:
navBar = [[UINavigationBar alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 64)];
[self.view addSubview:navBar];
navItem = [[UINavigationItem alloc] initWithTitle:NSLocalizedString(#"Meetings", nil)];
[navBar pushNavigationItem:navItem animated:NO];
UIButton *chat = [UIButton buttonWithType: UIButtonTypeRoundedRect];
[chat setTitle:#"Chat" forState: UIControlStateNormal];
UILabel *badge = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 20, 20)];
badge.textColor = [UIColor darkGrayColor];
badge.font = [UIFont fontWithName: fontName size: 15];
badge.text = #"10";
badge.textAlignment = NSTextAlignmentCenter;
badge.layer.cornerRadius = 10.0f;
badge.layer.backgroundColor = [UIColor yellowColor].CGColor;
badge.clipsToBounds = YES;
badge.center = CGPointMake(50, 20);
[chat addSubview: badge];
navItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: chat];
have a nice day!

Answer 5

try custom methods
https://github.com/TanguyAladenise/BBBadgeBarButtonItem
http://yuvarajmanickam.wordpress.com/2012/02/01/add-badges-on-uibarbuttonitem-in-iphone-app/
How to add Badges on UIBarbutton item?
https://www.cocoacontrols.com/controls/mknumberbadgeview

Answer 6

You can try this category
UIBarButtonItem-Badge

Answer 7

Try this customized control - mknumberbadgeview