Centering Label Vertically in UINavigationBar TitleView

Question

I'm not having much luck centering vertically the label I'm adding to the TitleView on the UINavigationBar. You can see what it looks like below.

This is how I'm adding the label:

UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.text = NSLocalizedString(@"activeSessionsTitle",@"");
titleLabel.font = [Util SETTING_NEO_HEADER_FONT];
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.textAlignment = UITextAlignmentCenter;
titleLabel.shadowColor = [UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.25f];
titleLabel.shadowOffset = CGSizeMake(0.0f, -1.0f);
[titleLabel sizeToFit];

super.navigationItem.titleView = titleLabel;

I think the reason why it's doing this is there is something weird with the actual font I'm using -- as I've had to do a lot of repositioning inside of buttons and such. I've been able to solve the issue everywhere but the navigation bar.

Answer 1

Opening up an old Question, but I found this to be very useful.

iOS 5 allows your to use [UINavigationBar appearance] which is great for changing the Title bar's title view without the need for a custom UIView:

[[UINavigationBar appearance] setTitleTextAttributes:
         [NSDictionary dictionaryWithObjectsAndKeys:
          [UIColor redColor],
          UITextAttributeTextColor,
          [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],
          UITextAttributeTextShadowColor,
          [NSValue valueWithUIOffset:UIOffsetMake(0, -1)],
          UITextAttributeTextShadowOffset,
          [UIFont fontWithName:@"HelveticaNeue" size:25.0f],
          UITextAttributeFont,
          nil]];

Sometimes, depending on the UIFont that you use, the title view may be vertically off.

To fix this, you can use:

[self.navigationBar setTitleVerticalPositionAdjustment:(float) forBarMetrics:UIBarMetricsDefault];

(float) being a positive value to push the titleView down, and a negative value to push the titleView up.

I hope this helps.

Answer 2

I ended up using a combination of the answer RPM left and one of the comments on my question. This is what ultimately fixed it for me:

UIView *customTitleView = [[UIView alloc] init];
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 3.0f, 200.0f, 30.0f)];
titleLabel.text = titleString;
titleLabel.font = [Util SETTING_NEO_HEADER_FONT];
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.textAlignment = UITextAlignmentCenter;
titleLabel.shadowColor = [UIColor colorWithRed:0.0f/255.0f green:0.0f/255.0f blue:0.0f/255.0f alpha:0.25f];
titleLabel.shadowOffset = CGSizeMake(0.0f, -1.0f);
[titleLabel sizeToFit];

customTitleView.frame = CGRectMake(self.navigationItem.titleView.frame.size.width/2 - titleLabel.frame.size.width/2, self.navigationItem.titleView.frame.size.height/2 - titleLabel.frame.size.height/2, titleLabel.frame.size.width, titleLabel.frame.size.height);

[customTitleView addSubview:titleLabel];
[titleLabel release];

[self.navigationItem setTitleView:customTitleView];
[customTitleView release];

If you're using this chunk of code, you may have to play with the "y" value on the title label's initWithFrame: call. I have it set to 3.0f, but you may have to adjust it a bit for your own usage.

The reason the other solutions didn't seem to work for me is they would go off-center horizontally depending if I had one barbutton (left or right). If there were no bar buttons it was fine, and if there were two it was fine. But one would cause it to go off-center.

Answer 3

I dont think this has anything to do with your font. I have also used titleView and I think the way it lays out the view in a weird way and doesnt take into consideration what your view size is.

You could also set the frame of your label view as such

titleLabel.frame = CGRectMake(self.navigationItem.titleView.frame.size.width/2 - titleLabel.frame.size.width/2, self.navigationItem.titleView.frame.size.height/2 - titleLabel.frame.size.height/2, titleLabel.frame.size.width, titleLabel.frame.size.height);

self.navigationItem.titleView = titleLabel;