1

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.

Venk
  • 5,949
  • 9
  • 41
  • 52
Nirav Bhatt
  • 6,940
  • 5
  • 45
  • 89

3 Answers3

9

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.

Felix
  • 35,354
  • 13
  • 96
  • 143
  • thanks and +1 too. InitWithCustomView worked. However after getting desired image I cannot set the title text of UIBarButtonItem. For example in my code when I do self.notifButton.title = @"my title" the debugger shows is correctly but the title is not visible on the image. What to do? – Nirav Bhatt Jan 26 '13 at 17:46
0
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];
Palani Krishnan
  • 11
  • 1
-1

First get the respective barbuttonitem in navigationController by 

let baritem = navigationItem.right/leftBarButtonItem
baritem.badgeValue = "\(correspondingValues)"
No_name_untilRecognised
  • 87
  • 1
  • 7