How to Use Image as title on large Navigation Bar?

Question

I'm trying to set an image as the title on a large navigation bar. So far I can just get it to display the logo in the top centre like it would if it was a standard navigation bar.

I'm trying to replace “All Inboxes” with an image.

At the moment I'm getting something like this by using self.navigationItem.titleView = UIImageView(image #i ageLiteral(resourceName: “logo pic”))

Note - the title text “settings” does not appear but the logo/image is in that place shown as “The logo” . (I want the image/logo to be lower and to the left as in the first pic)

Answer 1

Well, you can already place the image in the bar, so now it's just a matter of resizing the view so it fits to your desired position.

Do this by resizing the frame of the UIImage , as resizing the UIImageView alone doesn't work in the navigation bar (see here ).

Edit: After some experimentation, I managed to do what you want. It's a bit hack-y and you might need to figure out the correct size values for yourself, but I managed to achieve this view:

This was done by adding a UIView titled "container" as the titleView , which then contained a UIImageView . While "container" is mostly restricted to the "top" part of the bar, the contained UIImageView is able to move freely inside the Navigation Bar now. You can see how this is a bit hack-y:

In this image you can see that the container UIView has a black background color. It can't grow past a certain size as the titleView . Inspecting the view hierarchy shows you how the logo is positioned:

This was achieved through the following code:

let logo = UIImage(named: "logo")

let container = UIView(frame: CGRect(x: 0, y: 0, width: 182, height: 132))
container.backgroundColor = UIColor.clear

let imageView = UIImageView(frame:  CGRect(x: -132, y: 2, width: 182, height: 132))
imageView.contentMode = .scaleAspectFit
imageView.image = logo

container.addSubview(imageView)

self.navigationItem.titleView = container

As I said, this is hack-y and certainly not intended by Apple. This solution might not work in future versions of iOS.

You can also set width and height of container to 0 and experiment from there. It's all about manually finding the right frame values through trial and error.

Answer 2

I'm trying to replace “All Inboxes” with an image

Well, you can't. The large title is a title; it's text. It cannot be an image. The title view can be an image, but it goes in the center of the navigation bar. The screen shot you showed is correct; that's how it should look. The end. Stop trying to misuse the framework.