CODEWITHSUNDEEP
iosswiftuinavigationbar
Nikesh Hyanju
Nikesh Hyanju

Reputation: 190

Adding multiple buttons in NavigationBar

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

enter image description here

How do i achieve this type of design?

Upvotes: 4

Views: 3665

Answers (5)

Mike Mertsock
Mike Mertsock

Reputation: 12025

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.

Upvotes: 5

Basir Alam
Basir Alam

Reputation: 1358

Try this:

let callImage   = UIImage(named: "call")!
let videoImage   = UIImage(named: "video")!
let searchImage = UIImage(named: "search")!

let callButton   = UIBarButtonItem(image: callImage,  style: .plain, target: self, action: #selector(didTapCallButton))
let videoButton = UIBarButtonItem(image: searchImage,  style: .plain, target: self, action: #selector(didTapVideoButton))
let searchButton = UIBarButtonItem(image: searchImage,  style: .plain, target: self, action: #selector(didTapSearchButton))

navigationItem.rightBarButtonItems = [callButton, videoButton, searchButton]

Selector methods

func didTapCallButton(sender: AnyObject){
    ...
}

func didTapVideoButton(sender: AnyObject){
    ...
}

func didTapSearchButton(sender: AnyObject){
    ...
}

Upvotes: 2

Yogesh Dalavi
Yogesh Dalavi

Reputation: 73

You can Add UIView in navigation bar so that you can add multiple buttons in that view.

Upvotes: 1

Oliver Atkinson
Oliver Atkinson

Reputation: 8029

UINavigationItem has a property called rightBarButtonItems, this expects an array of UIBarButtonItem which would in your case be each of your buttons.

You can use the initialiser on UIBarButtonItem to specify the image and style:

init(image: UIImage?, style: UIBarButtonItemStyle, target: Any?, action: Selector?)

Initializes a new item using the specified image and other properties.

On your view controller you can access the navigation item through the accessor navigationItem, if you embed your view controller inside a UINavigationController you will need to access the navigationItem on that instance and not the view controller.

Upvotes: 1

David Kadlcek
David Kadlcek

Reputation: 476

You can create your own view and put down your Images, Labels, etc... After that, you write:

self.navigationItem.titleView = yourView

Upvotes: 1

Related Questions