How to convert Navbar Large title to Multi-line, centre aligned

Question

I'm trying to design view controller with Multi-lined centred Large title text exactly like Ask Siri by apple (Settings->General->Keyboards->About Ask Siri, Dictation and Privacy...).

I can able to achieve centred text using:

let paragraph = NSMutableParagraphStyle()
paragraph.alignment = .center
navigationController?.navigationBar.largeTitleTextAttributes = [.paragraphStyle: paragraph]

I did set Navigation title from Storyboard and tried these to achieve multi-lined large title:

• https://mcmap.net/q/402757/-how-to-set-multi-line-large-title-in-navigation-bar-new-feature-of-ios-11
• https://mcmap.net/q/746741/-how-to-line-break-long-large-title-in-ios-11

But none of them are worked on iOS 13.

Grapple

Answer 1

You can achieve this by adding a multiline label to your scrollView and then show/hide your navigation item title in the scrollViewDidScroll delegate method of the scrollView depending on the vertical scrollView offset.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.y > myLabelHeight && navigationItem.title == "" {
        setTitle(hidden: false)
    } else if scrollView.contentOffset.y <= myLabelHeight && navigationItem.title == "MyTitleString" {
        setTitle(hidden: true)
    }
}

I've added a layer transition to achieve the fade effect.

func setTitle(hidden: Bool) {
    let animation = CATransition()
    animation.duration = 0.25
    animation.type = .fade

    navigationController?.navigationBar.layer.add(animation, forKey: "fadeText")

    if hidden {
        navigationItem.title = ""
    } else {
        navigationItem.title = "MyTitleString"
    }
}

Don't forget to set the navigation item title to an empty string in viewDidLoad.

Trista

Actually I need the exact behaviour of UINavigationbar large titles. (I've added the screenshots). Its already handled by the system. But currently it doesn't support open way to enable multi lines. Some of the answer on Stackoverflow got it covered, but it not working on iOS 13. – Grapple

Since it's not supported through the provided APIs I would go with my solution - you can achieve the desired outcome with just a few lines of code. Otherwise loop through the view hierarchy and alter the large title label. The reason that the solutions from the other StackOverflow posts don't work could be that Apple changed the view hierarchy of the navigation bar in iOS 13. You can use Xcode's UI debugger to look where the label is in the hierarchy and then alter the for loop. – Trista

I've checked that too. Large title labels UIView has fixed height of 52. I tried adding constraint programatically, and changing its frame. None worked. – Grapple

Answer 2

There is not any such kind of property that you can set and title became multiline. You need to manipulate it.

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

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

Galenism

This isn't the one I asked for. It shows small in navigation title always. imgur.com/a/5JMoZNr – Grapple