Customize navigation bar by adding two labels instead of title in Swift Customize navigation bar by adding two labels instead of title in Swift ios ios

Customize navigation bar by adding two labels instead of title in Swift


I am not sure if you can do it from the storyboard, but if you want to add two title labels, you can do the following in the viewDidLoad() method of the view controller for which you want the two titles:

if let navigationBar = self.navigationController?.navigationBar {    let firstFrame = CGRect(x: 0, y: 0, width: navigationBar.frame.width/2, height: navigationBar.frame.height)    let secondFrame = CGRect(x: navigationBar.frame.width/2, y: 0, width: navigationBar.frame.width/2, height: navigationBar.frame.height)    let firstLabel = UILabel(frame: firstFrame)    firstLabel.text = "First"    let secondLabel = UILabel(frame: secondFrame)    secondLabel.text = "Second"    navigationBar.addSubview(firstLabel)    navigationBar.addSubview(secondLabel)}

In this way you can add as many subviews as you want to the navigation bar


Here's an implementation that uses a stack view instead, which also gives you some versatility with layout of the labels:

class ViewController: UIViewController {    lazy var titleStackView: UIStackView = {        let titleLabel = UILabel()        titleLabel.textAlignment = .center        titleLabel.text = "Title"        let subtitleLabel = UILabel()        subtitleLabel.textAlignment = .center        subtitleLabel.text = "Subtitle"        let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])        stackView.axis = .vertical        return stackView    }()    override func viewDidLoad() {        super.viewDidLoad()        navigationItem.titleView = titleStackView    }    override func viewWillLayoutSubviews() {        super.viewWillLayoutSubviews()        if view.traitCollection.horizontalSizeClass == .compact {            titleStackView.axis = .vertical            titleStackView.spacing = UIStackView.spacingUseDefault        } else {            titleStackView.axis = .horizontal            titleStackView.spacing = 20.0        }    }}

Demonstrates using a stack view to create a custom navigation item's title view