Multiline Navigationbar Title

Question

I am trying to set the title label in my navigation bar to allow multiple lines. I have custom navigation controller code that I am placing the multiline code into. I know that the code already there works, but my multiline part is not working.

let titleLabel = UILabel()
titleLabel.frame = CGRectMake(0, 0, self.navigationBar.frame.width, self.navigationBar.frame.height * 2)
titleLabel.numberOfLines = 0
titleLabel.lineBreakMode = .ByWordWrapping

navigationItem.titleView = titleLabel

But the text still runs off at the end. I've also tried putting this into the individual view controller itself, adding self.navigationController?. in front of navigationItem with the same results.

Is there something I'm missing in my code that would keep the title label from using multiple lines?

Lavern

Your navigationBar.frame.width was maybe not yet sized to fit the screen. You may want to override viewDidLayoutSubviews to detect the right frame. – Arcane

Answer 1

Here is a code example of how you can create a multiline navigationBar title

let label: UILabel = UILabel(frame: CGRectMake(0, 0, 400, 50))
label.backgroundColor = UIColor.clearColor()
label.numberOfLines = 2
label.font = UIFont.boldSystemFontOfSize(16.0)
label.textAlignment = .Center
label.textColor = UIColor.whiteColor()
label.text = "This is a\nmultiline string for the navBar"
self.navigationItem.titleView = label

Swift 5.x:

let label = UILabel()
label.backgroundColor = .clear
label.numberOfLines = 2
label.font = UIFont.boldSystemFont(ofSize: 16.0)
label.textAlignment = .center
label.textColor = .white
label.text = "This is a\nmultiline string for the navBar"
self.navigationItem.titleView = label

Richma

Gonna require some tweaking to get it to behave more like how I want it to, but this did help. – Lavern

I used navigationItem.titleView without setting the frame explicitly and it is working just fine. – Gustavo

@Rashwan L if you are define the frame of UILabel it will lead to the label to the left align so just leave the frame part and use as just a "let label = UILabel()". and it will work perfect and set its own self in the center aligned. – Fingerprint

Why width 400points? – Pretense

let label = UILabel() this is the best solution to centre title! – Born

Answer 2

This is doable in a storyboard. Just drag a UIView into the Navigation bar, then drag a UILabel onto it in the document outline, set lines to 2 and alignment to center.

Hoenack

Answer 3

Add below code into your ViewController

navigationItem.setValue(1, forKey: "__largeTitleTwoLineMode")

Gown

private API probably isn't the best way to go – Lettuce

Answer 4

Use this to get the label position exactly as you want it:

let labelWidth = navBar.bounds.width - 110

    let label = UILabel(frame: CGRect(x:(navBar.bounds.width/2) - (labelWidth/2), y:0, width:labelWidth, height:navBar.bounds.height))
    label.backgroundColor = UIColor.clear
    label.numberOfLines = 0
    label.font = UIFont.boldSystemFont(ofSize: 13.0)
    label.textAlignment = .center
    label.textColor = UIColor.black
    label.lineBreakMode = .byWordWrapping

    label.text = loadedName
    navBar.topItem?.title = nil
    navBar.addSubview(label)

the 110 value in the top line is the spacing you want either side of the label.

Emogene

any hints on doing this in swiftui? – Mitman

Answer 5

swift 5+ very easy solution

func titleMultiLine(topText: String, bottomText: String) {
    //            let titleParameters = [NSForegroundColorAttributeName : UIColor.white,
    //                                   NSFontAttributeName : UIFont.<Font>]
//            let subtitleParameters = [NSForegroundColorAttributeName : UIColor.<Color>(),
    //                                      NSFontAttributeName : UIFont.<Font>]
    let titleParameters = [NSAttributedString.Key.foregroundColor : UIColor.white]
    
    let subtitleParameters = [NSAttributedString.Key.foregroundColor : UIColor.white]
    
    let title:NSMutableAttributedString = NSMutableAttributedString(string: topText, attributes: titleParameters)
    let subtitle:NSAttributedString = NSAttributedString(string: bottomText, attributes: subtitleParameters)
    
    title.append(NSAttributedString(string: "\n"))
    title.append(subtitle)
    
    let size = title.size()
    
    let titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))
    titleLabel.attributedText = title
    titleLabel.numberOfLines = 0
    titleLabel.textAlignment = .center
    
    navigationItem.titleView = titleLabel
}

Function Calling

self.titleMultiLine(topText: "I am top text Title", bottomText: "bottom text")

Rendering