1

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)

Nolan Ranolin
  • 409
  • 3
  • 16

1 Answers1

2

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.

TomQDRS
  • 875
  • 1
  • 7
  • 20
  • Yeah but doesn’t it restrict you to just that area at the top for title images? – Nolan Ranolin Oct 14 '18 at 09:24
  • @NolanRanolin I'll experiment with it myself and get back to you. Haven't used the large NavBar yet. – TomQDRS Oct 14 '18 at 09:26
  • @NolanRanolin please take a look at my updated answer. – TomQDRS Oct 14 '18 at 10:17
  • Thanks it’s working good so far. The only issue is that the logo disappears if I push to a view with a small title bar and then go back to the view with the large title bar – Nolan Ranolin Nov 12 '18 at 20:12
  • @NolanRanolin Where in your code did you call the functions? Sounds like you're calling it in "viewDidLoad". Try moving it to "viewWill/DidAppear". – TomQDRS Nov 12 '18 at 20:16
  • I initially had it in viewDidLoad but moving it to ViewDidAppear or ViewWillAppear didn’t make a difference, still getting the same result – Nolan Ranolin Nov 12 '18 at 20:43
  • I tried setting it in viewWillDissapear as well so the logo is added to the titleBar of both views but the logo still goes away – Nolan Ranolin Nov 13 '18 at 16:53