Adding multiple buttons in NavigationBar

Question

My app requires me to add multiple buttons in my navigation bar. Here is an image of what my nav bar looks like

How do i achieve this type of design?

Answer 1

You can configure your view controller's navigationItem in various ways to achieve this design.

Left side

To allow additional buttons next to the system "back button" on the left:

navigationItem.leftItemsSupplementBackButton = true

This allows you to add a left bar button item for the circular image:

navigationItem.setLeftBarButtonItem(imageItem, animated: trueOrFalse)

imageItem would be a UIBarButtonItem initialized with a customView or image, as discussed in some of the other answers here.

For the back button itself, to achieve a simple "<" without showing the title of the previous view or showing "< Back", you can open the storyboard and set the Back Button text of the previous view controller to a single space, as described in this post.

Title area

For the title area, as discussed in the other answers:

navigationItem.titleView = (a custom view)

Right side

For the right side, you can add multiple buttons:

navigationItem.setRightBarButtonItems([button1, button2, button3, button4], animated: trueOrFalse)

Here, button1, button2, button3, and button4 are each UIBarButtonItems. You would likely initialize these buttons with images.

Looks like you also will want to set the tintColor of the navigation bar to black, so that the bar buttons are rendered in black:

navigationController?.navigationBar.tintColor = .black

All of this code would be done in the view controller, usually in viewDidLoad, unless you need to dynamically change which buttons are shown as the content of your view controller changes.