Displaying notification badge like counter in UINavigationbar

Question

I have a requirement to display number of pending notifications in iPhone navigation bar. The appearance should be like that of notification badge - but these are not APNS notifications. They are the ones sent from private server with similar purpose.

I tried adding a right/left button (UIBarButtonItem) in my UINavigationbar but it seems like it is very rigid in appearance. I can't set its width, fonts etc. See my code:

  self.notifButton = [[UIBarButtonItem alloc] initWithTitle:@"0" style:
                    UIBarButtonItemStyleBordered target:self action:@selector(TouchNotif)];

 NSMutableArray *items = [[NSMutableArray alloc] init];

 [items addObject:self.notifButton];
 self.navigationItem.rightBarButtonItems = items;

Because of other 2 items also added to items array, navbar is cluttered. Their fonts, width etc I cannot play with, or maybe I don't know how should I create them.

My questions:

1) What is proper way to accommodate at least 3 items in navbar right area? I am asking this because I don't find a way to play with width and font of the UIButtons I use.

2) If I want to have custom appearance for my notification button (just like notification badge) - are there any pointers how do I make it? Which control to use, how to set its frame and font which will be allowed within UINavigationBar?

Please help.

Answer 1

You need to create a UIBarButtonItem that contains a custom view using initWithCustomView. The custom view could be a custom UIButton with a number badge as subview. With this custom view you can also control the width of the buttons.

There is no public API to create a notification badge directly. In case of a tab bar item you could set a badge using the property badgeValue - but not with UIBarButtonItem. Here you need to use this open source control: MKNumberBadgeView.

Note that the property rightBarButtonItems is available since iOS 5. If you only need one item set the rightBarButtonItem instead.

Answer 2

UIButton * buttton = [UIButton buttonWithType:UIButtonTypeCustom];
[buttton setFrame:CGRectMake(285, 20, 20, 20)];
[buttton.layer setCornerRadius:10];
[buttton setTitle:@"23" forState:UIControlStateNormal];
[buttton.titleLabel setFont:[UIFont systemFontOfSize:12]];
[buttton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[buttton setBackgroundColor:[UIColor whiteColor]];
[self.navigationController.view addSubview:buttton];

Answer 3

First get the respective barbuttonitem in navigationController by

let baritem = navigationItem.right/leftBarButtonItem
baritem.badgeValue = "\(correspondingValues)"