Customize navigation bar with title view

Question

I am trying to add a custom view in the center of a navigation bar and I am using the following code to test it:

UIView * testView = [[UIView alloc] init];
[testView setBackgroundColor:[UIColor blackColor]];
testView.frame = CGRectMake(0, 0, 100, 35);
[self.navigationController.navigationItem.titleView addSubview:testView];

I am setting this up in the viewDidLoad method of my view controller but when i run my program nothing seems to change in my navigation bar.

Could you help me with this?

Solution 1

This works. Give frame at the time of initialisation

UIView *iv = [[UIView alloc] initWithFrame:CGRectMake(0,0,32,32)];
[iv setBackgroundColor:[UIColor whiteColor]];
self.navigationItem.titleView = iv;

Solution 2

If you want to just customize the title for one view controller you can use

UILabel *lblTitle = [[UILabel alloc] init];
lblTitle.text = @"Diga-nos o motivo";
lblTitle.backgroundColor = [UIColor clearColor];
lblTitle.textColor = [UIColor colorWithRed:77.0/255.0 green:77.0/255.0 blue:77.0/255.0 alpha:1.0];
lblTitle.shadowColor = [UIColor whiteColor];
lblTitle.shadowOffset = CGSizeMake(0, 1);
lblTitle.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:18.0];
[lblTitle sizeToFit];

self.navigationItem.titleView = lblTitle;

or if you want to customize for all view controllers use

[[UINavigationBar appearance] setTitleTextAttributes:
    [NSDictionary dictionaryWithObjectsAndKeys:
        [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0], 
        UITextAttributeTextColor, 
        [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8], 
        UITextAttributeTextShadowColor, 
        [NSValue valueWithUIOffset:UIOffsetMake(0, -1)], 
        UITextAttributeTextShadowOffset, 
        [UIFont fontWithName:@"Arial-Bold" size:10.0], 
        UITextAttributeFont, 
        nil]];

Solution 3

Replace

[self.navigationController.navigationItem.titleView addSubview:testView];

to

self.navigationItem.titleView = testView;

Edit:

Note: You cannot add subviews to titleView cause it's default value is nil, you need to set a new view as the titleView.

Solution 4

Swift 3/4

You may set i.e. UILabel as a titleView. Call it in viewDidLoad():

private func setNavigationTitle(_ title: String) {
    navigationItem.title = nil // clear the default title
    let titleLabel = UILabel() // you don't need to specify a frame, it will be centred in the navbar
    titleLabel.font = ...
    titleLabel.textColor = ...
    titleLabel.text = title
    titleLabel.backgroundColor = .clear
    navigationItem.titleView = titleLabel
    navigationTitleView = titleLabel // you may create a property if you want to manipulate the title view later
}

Note navigationItem.title = nil, otherwise title may override titleView.

Solution 5

CustomLabel *titleLabel = [CustomLabel initWithLabelFrame:labelFrame textFont:[UIFont fontWithName:@"Helvetica" size:[UIFont systemFontSize]] textColor:[UIColor blackColor] labelText:@"Add as" textAlignment:NSTextAlignmentCenter labelOnView:reference.view labelTag:62];

[self.navigationItem setTitleView:titleLabel]; // titleLabel set in navigationItem

View more solutions

Comments

[Julian Osorio]

Yes that was exactly it! Thanks a lot! can i ask you why i can't access to the navigation item using: "self.navigationController.navigationItem.titleView" is it wrong to access the navigation item from the navigation controller. Thanks a lot @virata

[Kjuly]

@JulianOsorio It's not the problem about self.navigationItem.titleView and self.navigationController.navigationItem.titleView, it's the different between addSubview and setTitleView. :)

[virata]

u r welcome Julian,navigationItem is your class's own property. Don't try to access it through navigationController's property.

[Julian Osorio]

Excellent I get it now! Thanks to you two.

[Van Du Tran]

Weird, it doesn't work on iOS 7.. I added a searchBar.. and I get complaints about autolayout stuffs..

[Raphael Oliveira]

You can favourite the question @MusiGenesis :)

[Kyle Clegg]

But you can add a subview to self.navigationController.navigationBar.

[Kjuly]

@KyleClegg um.. I don't like to add subviews on navigation bar, except button items. ;)

[Kyle Clegg]

@Kjuly agreed, I was just trying to get a UIPageControl in the nav bar similar to the Twitter app and that's how I was able to do it easily. Depending on how you want to customize the titleview it can be useful.

[kidsid49]

But adding titleview is not covering the full navigation bar. Looks like comes with its own default insets :-(

[Anders]

Hello and welcome to Stack Overflow! Please edit your answer to put the code inside a code block to make it more readable. This can be done by putting four spaces at the start of each line, or marking the code and pressing the {} button.