Search code examples
iosswiftuinavigationbartitlebarlarge-title

How to Use Image as title on large Navigation Bar?

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.

enter image description here

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

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)

Solution

  • 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:

    the logo positions at the correct point

    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:

    the logo is right over the usual title text, the container is black

    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:

    view hierarchy

    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.