How to add multiple bar button item navigation bar

 

This tutorial has been updated for X code 7.3 & swift 2.2

Sometimes one navigation bar button on each side is not enough. Some real world apps require more than two buttons on navigation bar. Fortunately its super easy to add multiple bar button

  1. First lets set up the x code project as usual. Create new single view application X code project. Set project name to multiple nav buttons & save it on desktop.

 

new x code project

2. Go to main storyboard, select view controller then go to Editor -> Embed In -> Navigation Controller & set navigation title to More Buttons

 

add navigation controller

 

3. Go to view controller swift file & add following code

override func viewDidLoad() {
    super.viewDidLoad()
    // 1
    var rightAddBarButtonItem:UIBarButtonItem = UIBarButtonItem(title: "Add", style: UIBarButtonItemStyle.Plain, target: self, action: #selector(ViewController.addTapped))
    // 2
    var rightSearchBarButtonItem:UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Search, target: self, action: #selector(ViewController.searchTapped))
    // 3
    self.navigationItem.setRightBarButtonItems([rightAddBarButtonItem,rightSearchBarButtonItem], animated: true)

    // Do any additional setup after loading the view, typically from a nib.
}
// 4
func searchTapped(sender:UIButton) {
    println("search pressed")
}
// 5
func addTapped (sender:UIButton) {
    println("add pressed")
}
  1. Adding text navigation bar button item
  2. Adding system navigation bar button item
  3. Add both buttons to right side of navigation bar
  4. Action of search button
  5. Action of add button

Now build and run app in iPhone 5s & text tapping bar button items.

multiple nav bar button
Download X code file
Challenge 1: Show custom image as left bar button item

Challenge 2: Show another custom image as left bar button item but change its size using code

multiple image nav bar button

You can download icon images from Apple’s Documentation of Navigation Bar Button
Download Challenge Solution

Total 14 Votes
2

Tell us how can I improve this tutorial?

+ = Verify Human or Spambot ?