Controlling size / position of UINavigationItem titleView

Question

In my app, I have some custom titles (with lettering that isn't a font) stored in pngs that I want to put as the title of my navigation. I want the lettering in the titles all to be the same size for each different view controller, so in illustrator I've worked on making it all the same size and width (affording blank space to account for shorter strings). I do the following:

UIImageView *titleImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"SelectAnAlbumTitleLettering"]];
titleImageView.contentMode = UIViewContentModeCenter;
self.navigationItem.titleView = titleImageView;
[titleImageView release];

And it seems the image is arbitrarily resized and positioned based on the elements included on each navigationBar (i.e. back button, right button etc.).

I'm wondering, how can I gain control of titleView so I can make it implement the size and position that I want and so it isn't arbitrarily resized / repositioned.

Solution 1

Instead of using your image view as the title view, create another view that contains the image view. Set that view as the title view of the navigation item; now you’re free to adjust the image view’s frame within the title view.

Solution 2

You can control size and position of UINavigationbar titleview. Don't set imageview as titleview directly. Instead create a custom UIView and then set its frame as per your requirement and add your titleImageView as its subview.

UIView *backView =[[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 40)];// Here you can set View width and height as per your requirement for displaying titleImageView position in navigationbar 
[backView setBackgroundColor:[UIColor greenColor]];
UIImageView *titleImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"SelectAnAlbumTitleLettering"]];
titleImageView.frame = CGRectMake(45, 5,titleImageView.frame.size.width , titleImageView.frame.size.height); // Here I am passing origin as (45,5) but can pass them as your requirement. 
[backView addSubview:titleImageView];
//titleImageView.contentMode = UIViewContentModeCenter;
self.navigationItem.titleView = backView;

Hope it helps you.

Solution 3

In Swift, you can do it like this:

    var titleView = UIView(frame: CGRectMake(0, 0, 100, 40))
    var titleImageView = UIImageView(image: UIImage(named: "cocolife"))
    titleImageView.frame = CGRectMake(0, 0, titleView.frame.width, titleView.frame.height)
    titleView.addSubview(titleImageView)
    navigationItem.titleView = titleView

Solution 4

Updated Swift4 code:

    var titleView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 40))
    var titleImageView = UIImageView(image: UIImage(named: "headerlogo"))
    titleImageView.frame = CGRect(x: 0, y: 0, width: titleView.frame.width, height: titleView.frame.height)
    titleView.addSubview(titleImageView)
    navigationItem.titleView = titleView

View more solutions

Comments

[rckehoe]

Is there any explanation as to "why" you cannot set the imageView directly? Does the navigation titleView do something funky with it?

[keji]

@rckehoe The system is changing the frame of the titleView but it isn't changing the frames of the titleViews subviews. Remember that we didn't implement UINavigationItem. So there might be checks that readjust the size and position.

[Zorayr]

You will still need to make sure that the container view has the appropriate size to contain the image view

[iKK]

for some reason this does not work in iOS13.3 - especially if the titleView's height shall. be greater than 40 pixels (such as 150 pixels inside a largeTitle NavBar). How would you increase to greater heights ??