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

Question

I am trying to add two labels in the place where the title is shown in navigation bar, but I am struggling to do so. It would be very nice if I could achieve this with storyboard but as I can see I cannot do it.

As I have seen I need to use navigationItem but I do not know how exactly to do that. If anyone have any example or if anyone could explain me more specifically how to do so would be wonderful.

And I need to mention that I am completely unfamiliar with Obj-C, so any help would need to be in Swift.

score 35 · Accepted Answer · edited Feb 07 '19 at 15:27

35

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

edited Feb 07 '19 at 15:27

Xavier Lowmiller

1,381
1
15
24

answered Jul 10 '15 at 22:48

vdawg

484
5
6

if u please can help me with an additional question. How can I add constrains to these labels so they will be placed center horizontally and one underneath the other one – Ilir V. Gruda Jul 11 '15 at 10:41
1

@vdawg labels are aligning back to back...plz tell us how to align labels one above another – Bevan Mar 08 '16 at 19:56
1

@Bevan you can just change the firstFrame' and secondFrame properties to adjust the frames of the labels let firstFrame = CGRect(x: 0, y: 0, width: navigationBar.frame.width, height: navigationBar.frame.height/2) let secondFrame = CGRect(x: 0, y: navigationBar.frame.height/2, width: navigationBar.frame.width, height: navigationBar.frame.height/2) – vdawg Mar 09 '16 at 01:07
1

In my case Center Align also did the trick : firstLabel.textAlignment = .Center – ioopl Jul 22 '16 at 22:13

Scott Gardner · Answer 2 · 2018-12-20T00:28:28.540

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
        }
    }
}

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

2 Answers2