UINavigationItem titleView position

Question

I'm using UINavigationItem's titleView property to set a custom UILabel with my desired font size/color. Here's my code:

self.headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 400.0, 44.0)];
self.headerLabel.textAlignment = UITextAlignmentCenter;
self.headerLabel.backgroundColor = [UIColor clearColor];
self.headerLabel.font = [UIFont boldSystemFontOfSize:20.0];
self.headerLabel.textColor = [UIColor colorWithRed:0.259 green:0.280 blue:0.312 alpha:1.0];
self.navigationItem.titleView = self.headerLabel;

In the navigation bar I also have a left bar button. The result is this:

alt text http://cl.ly/41164eec656c96e7c913/content

As you can see, the text isn't properly centered. I've tried setting the x origin of the label, but this has no effect.

Answer 1

If you make the headerLabel a subview of the titleView, you can then set headerLabel's frame to control where it goes within the titleView.

The way you are doing it now, you don't have that control. I think the OS chooses the titleView's frame for you based on the space available.

Hope this helps!

Answer 2

In stead of initWithFrame just use init and put [self.headerLabel sizeToFit] after your last line of code.

Answer 3

I've used custom title labels for my nav bars in every app I have in the app store. I've tested many different ways of doing so and by far the easiest way to use a custom label in a navigation bar is to completely ignore titleView and insert your label directly into navigationController.view.

With this approach, it's easy to have the title label's frame always match the navigationBar's frame -- even if you are using a custom navBar with a non-standard size.

- (void)viewDidLoad {
   [self.navigationController.view addSubview:self.titleLabel];
   [super viewDidLoad];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
             (UIInterfaceOrientation)interfaceOrientation {
   return YES;
}

- (void)didRotateFromInterfaceOrientation:
             (UIInterfaceOrientation)fromInterfaceOrientation {
   [self frameTitleLabel];
}

- (UILabel *) titleLabel {
   if (!titleLabel) {
      titleLabel = [[UILabel alloc]           
          initWithFrame:self.navigationController.navigationBar.frame];

       titleLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:18];
       titleLabel.text = NSLocalizedString(@"Custom Title", nil);
       titleLabel.textAlignment = UITextAlignmentCenter;
       titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
   }
   return titleLabel;
}

- (void) frameTitleLabel {
   self.titleLabel.frame = self.navigationController.navigationBar.frame;
}

The one caveat to this approach is that your title can flow over the top of any buttons you have in the navBar if you aren't careful and set the title to be too long. But, IMO, that is a lot less problematical to deal with than 1) The title not centering correctly when you have a rightBarButton or 2) The title not appearing if you have a leftBarButton.

Answer 4

I have a same problem; I just somehow solved this issue by calculating the title length and set the label frame width accordingly. Although this is not a perfect one but can be manageable. Here is the code.

label = [[UILabel alloc] init];
label.backgroundColor = [UIColor clearColor];
label.font = [ UIFont fontWithName: @"XXII DIRTY-ARMY" size: 32.0 ];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.0f];
label.textAlignment = UITextAlignmentCenter;
label.textColor =[UIColor orangeColor];
//label.text=categoryTitle;
CGFloat verticalOffset = 2; 
NSString *reqSysVer = @"5.0";
NSString *currSysVer = [[UIDevice currentDevice] systemVersion];
if ([currSysVer compare:reqSysVer options:NSNumericSearch] != NSOrderedAscending)           
{
    if (categoryTitle.length > 8)
    {
    label.frame = CGRectMake(0, 0, 300, 44);
    }else {
        label.frame = CGRectMake(0, 0, 80, 44);
    }

    self.navigationItem.titleView = label;  
     self.navigationItem.title=label.text;
    [[UINavigationBar appearance] setTitleVerticalPositionAdjustment:verticalOffset   forBarMetrics:UIBarMetricsDefault];
     [[UIBarButtonItem appearance] setTintColor:[UIColor newBrownLight]];


}

Answer 5

Just calculate exact frame size needed and align to left:

UIFont* font = [UIFont fontWithName:@"Bitsumishi" size:20];
CGSize maximumLabelSize = CGSizeMake(296,9999);
CGSize expectedLabelSize = [title sizeWithFont:font constrainedToSize:maximumLabelSize lineBreakMode:UILineBreakModeCharacterWrap]; 
CGRect frame = CGRectMake(0, 0, expectedLabelSize.width, expectedLabelSize.height);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.font = font;
label.textAlignment = UITextAlignmentLeft;
label.text = title;
self.titleView = label;

Answer 6

UIView *vw = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
lbl.text = @"Home";
lbl.textAlignment = UITextAlignmentCenter;
lbl.backgroundColor = [UIColor clearColor];
lbl.textColor = [UIColor whiteColor];
lbl.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:20];
lbl.shadowColor = [UIColor blackColor];
lbl.shadowOffset = CGSizeMake(0,1);
self.navigationItem.titleView = vw;
[self.navigationItem.titleView addSubview:lbl];

Answer 7

What worked for me was to update the titleView frame in the viewDidAppear method.

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    UIView *titleView = self.navigationItem.titleView;
    CGRect navBarFrame = self.navigationController.navigationBar.frame;
    [titleView setFrame:CGRectMake((CGRectGetWidth(navBarFrame) - TitleWidth) / 2, (CGRectGetHeight(navBarFrame) - TitleHeight) / 2, TitleWidth, TitleHeight)];
}