Multiple labels in Navigation bar

Question

I would like to create a view similar to the "Now Playing" page on the iPhone and have 3 lines of text in the Navigation bar.

The only way I could find to do this was:

UINavigationBar *bar = [self.navigationController navigationBar];   
label = [[UILabel alloc] initWithFrame:CGRectMake(60, 2, 200, 14)];
label.tag = SONG_TAG;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:14];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.highlightedTextColor = [UIColor blackColor];
[bar addSubview:label];
[label release];

//Create album label
label = [[UILabel alloc] initWithFrame:CGRectMake(60, 17, 200, 12)];
label.tag = ALBUM_TAG;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont systemFontOfSize:12];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.highlightedTextColor = [UIColor blackColor];
label.textColor = HEXCOLOR(0xA5A5A5ff);
[bar addSubview:label];
[label release];

//Create artist label
label = [[UILabel alloc] initWithFrame:CGRectMake(60, 30, 200, 12)];
label.tag = ARTIST_TAG;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont systemFontOfSize:12];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.highlightedTextColor = [UIColor blackColor];
label.textColor = HEXCOLOR(0xA5A5A5ff);
[bar addSubview:label];
[label release];

The problem with this is I have to remove them when the view changes. So, in -viewWillDisappear I have:

UILabel *label;
label = (UILabel *)[self.navigationController.navigationBar viewWithTag:SONG_TAG];
[label removeFromSuperview];
label = (UILabel *)[self.navigationController.navigationBar viewWithTag:ALBUM_TAG];
[label removeFromSuperview];
label = (UILabel *)[self.navigationController.navigationBar viewWithTag:ARTIST_TAG];
[label removeFromSuperview];

I think the way to do this is make a custom view that has the 3 labels in it, and add this to the title view. (here's the catch - you can only add 1 label or view to the title view spot on the nav bar)

self.navigationItem.titleView = newViewIMadeWithThreeLabels

Answer 1

You could try creating a UIViewController with your labels positioned correctly, and then instantiate it, like UIViewControllerSubclass *sub = [[UIViewControllerSubclass alloc] init];

Within the UIViewController subclass, you would have to build up your view in the loadView delegate method and attach each label's view to the view controller's view like [[self view] addSubview:label];

Then attach its view like this:

self.navigationItem.titleView = sub.view;

That might work.

Answer 2

Your later suggestion in the post is correct. Create a UIView that contains your 3 labels and set it as the titleView. Please do NOT attempt to add subviews directly to the UINavigationBar.

Answer 3

I tried adding an entire view.. however, the application kept crashing whenever I added a subview (like a label) to it in the loadView delegate. I'm not all that great at debugging complete crashes, so I found using a button was much more simple. I haven't found any side affects yet...

UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(0, 0, 320, 60);

UILabel *label;
label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 200, 16)];
label.tag = SONG_TAG;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:16];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.text = @"first line";
label.highlightedTextColor = [UIColor blackColor];
[btn addSubview:label];
[label release];

label = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, 200, 16)];
label.tag = SONG_TAG;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:16];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.text = @"second line";
label.highlightedTextColor = [UIColor blackColor];
[btn addSubview:label];
[label release];

self.navigationItem.titleView = btn;

Answer 4

UIView code below works ok for me, you had the same label tag used twice, could have been your crash reason.

UIView *btn = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 60)];

UILabel *label;
label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 200, 16)];
label.tag = 1;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:16];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.text = @"first line";
label.highlightedTextColor = [UIColor blackColor];
[btn addSubview:label];
[label release];

label = [[UILabel alloc] initWithFrame:CGRectMake(0, 30, 200, 16)];
label.tag = 2;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:16];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.text = @"second line";
label.highlightedTextColor = [UIColor blackColor];
[btn addSubview:label];
[label release];

self.navigationItem.titleView = btn;

Answer 5

UINavigationBar *bar = [self.navigationController navigationBar];
CGFloat navBarHeight = 70.0f;    
CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, navBarHeight);
[bar setFrame:frame];
UILabel *label;
label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 320, 10)];
label.tag = 1;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:12];
label.adjustsFontSizeToFitWidth = NO;
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.text = @"Set the details for this event.";
label.highlightedTextColor = [UIColor blackColor];
[bar addSubview:label];
[label release];
[bar release];

Answer 6

A neater way is just to enum your tag:

enum { SONG_TAG, ALBUM_TAG, ARTIST_TAG };

Your code should work then.

Answer 7

Today i was going through the same problem and i did it this way.

1. I created a UIView of size 320*44 at location 0,0 - you can have a different view size based on your requirement.

2. Create an IBOutlet for that custom view named navigationBarTitleView - make necessary connections with your view

3. Add subview to navgiationBar with the following code inside inside viewWillAppear: OR viewDidAppear:

   [[[self navigationController] navigationBar] addSubview:navigationBarTitleView];

4. When you push this view on the navigationcontroller, remove the navigationBarTitleView from the superview.

   [navigationBarTitleView removeFromSuperview];