How to add a segmented control to a navigation bar ? (iOS)

Question

I would like to add a segmented control to a navigation bar like this

but when i drag the segmented control to the navigation bar the large title is gone. How can create the above UI ?

Volturno

Answer 1

You should add the segmented control as the titleView of the navigation bar. Below is the sample code:

let titles = ["All", "Missed"]
segmentControl = UISegmentedControl(items: titles)
segmentControl.tintColor = UIColor.white
segmentControl.backgroundColor = UIColor.blue
segmentControl.selectedSegmentIndex = 0
for index in 0...titles.count-1 {
    segmentControl.setWidth(120, forSegmentAt: index)
}
segmentControl.sizeToFit()
segmentControl.addTarget(self, action: #selector(segmentChanged), for: .valueChanged)
segmentControl.selectedSegmentIndex = 0
segmentControl.sendActions(for: .valueChanged)
navigationItem.titleView = segmentControl

Epileptoid

It works for me, thank you. Do you know a solution that doesn't requires to add the SegmentedControl programmatically? – Amphipod

Answer 2

You can try the below simple code,

var segmentedController: UISegmentedControl!

let items = ["Label A", "Label B"]
segmentedController = UISegmentedControl(items: items)
navigationItem.titleView = segmentedController
navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Edit", style: .plain, target: self, action: #selector(handleSignOut))
navigationItem.rightBarButtonItem?.tintColor = UIColor.black

All

Answer 3

If you want to add UISegmentControl by using XIB then you can do that by following these simple steps:

1. Design your custom view in XIB (Refer XIB for your reference https://i.sstatic.net/AJDCo.png)

2. Put the code in your ViewController

   class ViewController: UIViewController {
   
       lazy var navSegmentedView: YourCustomView = {
           guard let aView = Bundle.main.loadNibNamed("\(YourCustomView.self)", owner: self, options: nil)?.first as? YourCustomView else { return YourCustomView() }
   
           aView.backgroundColor = .clear
           aView.frame = CGRect(x: 0, y: 0, width: 160, height: 40)
           aView.segmentControl.addTarget(self, action: #selector(segmentChanged(_:)), for: .valueChanged)
   
           return aView
       }()
   
       override func viewDidLoad() {
           super.viewDidLoad()
           setupNavBar()
       }
   
       func setupNavBar() {
           navigationItem.titleView = navSegmentedView
           navigationItem.titleView?.backgroundColor = .clear
       }
   
       @objc func segmentChanged(_ sender: UISegmentedControl) {
           print(sender.selectedSegmentIndex)
       }
   
    }
   

Montanez