ios Title and Subtitle in Navigation Bar centered

Question

I'm trying to have two UILabels in my navigation bar instead of just one.

I followed this link to have informations on how to do that: iPhone Title and Subtitle in Navigation Bar

It works well, but I can't get my texts to be centered properly. It is centered between the buttons, but the default title behaviour is to center itself right under the time.

I had a look here, same question, but no answer: UINavigationBar TitleView with subtitle

What am I missing? Here is my code:

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

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

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

self.navigationItem.titleView = _headerTitleSubtitleView;

Eades

It will help you all existing scenario #37409760 – Dentilingual

Answer 1

You should adjust the width of both frames. It should be below 200. try this.

CGRect titleFrame = CGRectMake(0, 2, 160, 24);
CGRect subtitleFrame = CGRectMake(0, 24, 160, 44-24);

Edit : Your backbutton on the left is wider, and the titleview is shifted to the right.

Please look the image with width 200px

And the image with width 160px

I suggest you to adjust the width of titleview and label accordingly.

If you want to know more about backbutton width, then please refer the discussion here. SO Post 1.

SO Post 2.

Toddtoddie

Thanks a lot! It works now. But I don't get it. Why is it not centered when given dimensions are higher? – Eades

It is not working for all the different cases. Although it works for this back button, my back button on the left can be wider, and the title is shifted to the right. – Eades

Always the text will be centered to the label. so you should adjust the label width accordingly. if set backgroundcolor for the label for testing, thenyou will get the clear idea. Also it will be highly appreciable, if you can accept and upvote the answer as it helped you. – Toddtoddie

I'll check the answer as validated when it will be solved, so that we can still find the proper solution to the problem. If I understand, I need to know what size the back button will be before the view loads. Any idea about that? – Eades

OK, my problem is actually here: "I suggest you to adjust the width of titleview and label accordingly." But I managed to find a fixed width that fits. It's more like a hot fix though. – Eades

Answer 2

you may like this property in UINavigationItem class.

@property (nonatmic,copy) NSString *prompt

It's elegant.

Woodpile

But this increases height of the whole navbar. And it's on top of the title, not underneath it. – Ada