iPhone Title and Subtitle in Navigation Bar

Question

In my application, I'd like to have the navigation bar display a title and subtitle.

To that extent, I added the following code to my view controller:

// Replace titleView
CGRect headerTitleSubtitleFrame = CGRectMake(0, 0, 200, 44);    
UIView* _headerTitleSubtitleView = [[[UILabel alloc] initWithFrame:headerTitleSubtitleFrame] autorelease];
_headerTitleSubtitleView.backgroundColor = [UIColor clearColor];
_headerTitleSubtitleView.autoresizesSubviews = YES;

CGRect titleFrame = CGRectMake(0, 2, 200, 24);  
UILabel *titleView = [[[UILabel alloc] initWithFrame:titleFrame] autorelease];
titleView.backgroundColor = [UIColor clearColor];
titleView.font = [UIFont boldSystemFontOfSize:20];
titleView.textAlignment = UITextAlignmentCenter;
titleView.textColor = [UIColor whiteColor];
titleView.shadowColor = [UIColor darkGrayColor];
titleView.shadowOffset = CGSizeMake(0, -1);
titleView.text = @"";
titleView.adjustsFontSizeToFitWidth = YES;
[_headerTitleSubtitleView addSubview:titleView];

CGRect subtitleFrame = CGRectMake(0, 24, 200, 44-24);   
UILabel *subtitleView = [[[UILabel alloc] initWithFrame:subtitleFrame] autorelease];
subtitleView.backgroundColor = [UIColor clearColor];
subtitleView.font = [UIFont boldSystemFontOfSize:13];
subtitleView.textAlignment = UITextAlignmentCenter;
subtitleView.textColor = [UIColor whiteColor];
subtitleView.shadowColor = [UIColor darkGrayColor];
subtitleView.shadowOffset = CGSizeMake(0, -1);
subtitleView.text = @"";
subtitleView.adjustsFontSizeToFitWidth = YES;
[_headerTitleSubtitleView addSubview:subtitleView];

_headerTitleSubtitleView.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |
                                      UIViewAutoresizingFlexibleRightMargin |
                                      UIViewAutoresizingFlexibleTopMargin |
                                      UIViewAutoresizingFlexibleBottomMargin);

self.navigationItem.titleView = _headerTitleSubtitleView;

And also implemented a method:

-(void) setHeaderTitle:(NSString*)headerTitle andSubtitle:(NSString*)headerSubtitle {
    assert(self.navigationItem.titleView != nil);
    UIView* headerTitleSubtitleView = self.navigationItem.titleView;
    UILabel* titleView = [headerTitleSubtitleView.subviews objectAtIndex:0];
    UILabel* subtitleView = [headerTitleSubtitleView.subviews objectAtIndex:1];
    assert((titleView != nil) && (subtitleView != nil) && ([titleView isKindOfClass:[UILabel class]]) && ([subtitleView isKindOfClass:[UILabel class]]));
    titleView.text = headerTitle;
    subtitleView.text = headerSubtitle;
}

Things work beautifully, thanks.

Except that when rotating the iPhone to Landscape, the title+subtitle don't downsize in an automatic manner like the default title of the navigation item.

Any pointers?

Thanks!

Bedcover

Your code works well and is nicely written, thanks for posting. When exactly are you calling setHeaderTitle? I've tried doing it when the pushed viewcontroller calls viewWillAppear but then it switches too early and viewDidAppear switches too late. – Caressa

I call it in the init methods. – Bedcover

Answer 1

Make the titleView and subtitleView labels into properties of the view controller, so that you can access them from any method. Then, on rotation of the view controller, resize the labels:

- (void) willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
    [self adjustLabelsForOrientation:toInterfaceOrientation];
}

- (void) adjustLabelsForOrientation:(UIInterfaceOrientation)orientation {
    if (orientation == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight) {
        titleView.font = [UIFont boldSystemFontOfSize:16];
        subtitleView.font = [UIFont boldSystemFontOfSize:11];
    }
    else if (orientation == UIInterfaceOrientationPortrait || orientation == UIInterfaceOrientationPortraitUpsideDown) {
        titleView.font = [UIFont boldSystemFontOfSize:20];
        subtitleView.font = [UIFont boldSystemFontOfSize:13];
    }
}

Recede

Thanks - this works. (I still need to play around with the landscape font sizes, but the direction works) – Bedcover

Answer 2

Instead of this authoresizing mask

_headerTitleSubtitleView.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |
                                      UIViewAutoresizingFlexibleRightMargin |
                                      UIViewAutoresizingFlexibleTopMargin |
                                      UIViewAutoresizingFlexibleBottomMargin);

you should use

_headerTitleSubtitleView.autoresizingMask = UIViewAutoresizingFlexibleWidth |
                                      UIViewAutoresizingFlexibleHeight;

titleView.autoresizingMask = UIViewAutoresizingFlexibleWidth |
                                          UIViewAutoresizingFlexibleHeight;
subtitleView.autoresizingMask = UIViewAutoresizingFlexibleWidth |
                                          UIViewAutoresizingFlexibleHeight;

Charlottcharlotta