Navigation bar Items

Question

I am trying to customize the navigation bar like this:

I tried many way but I could not do it. I can remove the back button name and added image next to it.

My problems:

• My image is far to back button. I want it more closer.
• And I want to add titles next to my image.

How can I do it?

Answer 1

Actually, the UINavigationBar support only UINavigationItem objects, and you can add left middle and right of the bar. | left Item | Title | right Item |

But, the trick is on add multi-view on the left and leave the title empty

navigationItem.setLeftBarButtonItems([backButton, profileImageView, profileNameView], animated: true)

Before that, you need to customize a UIBarButtonItem for the profileImageView (for example)

let profileImage = UIImageView(...)

create your UIBarButtonItem with that custom view

let profileImageView = UIBarButtonItem(customView: profileImage)

Important Note Sometimes (almost often) you need to fix the frame of that view because is custom. Ever check the width of NavigationBar and then check how many rightButtons (in your case) are present on the rightItem.

1. set the initial width of the view using the frame of "NavigationBar - sideLeft (back button for example)"

   CGRectMake(0, 0, self.navigationBar.frame.width - backButton.frame.widht, 25)

2. For any rightButtons calculate the width

3. set again the frame with the new value

|back button width | custom view width | right Button 1 width |... right Button N widht |

| <----------------------------------------- UINavigationBar width ---------------------------------> |