如何将分段控件添加到导航栏？ （IOS）

Question

我想将分段控件添加到这样的导航栏中

但是当我将分段控件拖到导航栏时，大标题就消失了。如何创建上述UI？

Answer 1

您应该将分段控件添加为导航栏的titleView。 以下是示例代码：

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

Answer 2

您可以尝试以下简单代码

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

Answer 3

如果要使用XIB添加UISegmentControl，则可以按照以下简单步骤进行操作：

1. 在XIB中设计您的自定义视图（请参考XIB以供参考https://i.stack.imgur.com/AJDCo.png）

2. 将代码放入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)
       }
   
    }