How to Set Multi Line Large Title in Navigation Bar? ( New Feature of iOS 11)

How to set large title on navigation bar for iOS 11?

Here is code snippet to display large title on left side of navigation bar for iOS 11 or later.

Objective C:

  self.title = @"Your title";
    if (@available(iOS 11, *)) {
        self.navigationController.navigationBar.prefersLargeTitles = true;
         self.navigationController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAlways;
    }

Swift:

       self.title = "Your title"
        if #available(iOS 11, *) {
            self.navigationController?.navigationBar.prefersLargeTitles = true
            self.navigationController?.navigationItem.largeTitleDisplayMode = .always
        } 

You need to put check condition for iOS 11 before building application.

Requirement to test large title:

• Xcode 9.0,
• Mac OSX - 10.12.6 or later,
• iPhone/iPad or Xcode 9 simulator with iOS 11.

How to line break long large title in iOS 11?

Try this:

for navItem in (self.navigationController?.navigationBar.subviews)! {
    for itemSubView in navItem.subviews {
        if let largeLabel = itemSubView as? UILabel {
            largeLabel.text = self.title
            largeLabel.numberOfLines = 0
            largeLabel.lineBreakMode = .byWordWrapping
        }
    }
}

It worked for me.

Multiline Navigationbar Title

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

iOS 11: Height of UINavigationBar for large title (mimic Apple Music App)

You can play a little bit with the UILabel inside the UINavigationBarLargeTitleView like change its Insets and reduce font size, here is an example:

        // Create label
        labelSubtitle.text = "Small Title"
        labelSubtitle.backgroundColor = UIColor.clear
        labelSubtitle.textColor = UIColor.searchBarTextColor(dark: theme)
        labelSubtitle.font = UIFont.systemFont(ofSize: 14)

        // Add label to subview hierarchy
        for subview in self.navigationController!.navigationBar.subviews {
            let stringFromClass = NSStringFromClass(subview.classForCoder)
            if stringFromClass.contains("UINavigationBarLargeTitleView") {

                let largeSubViews = subview.subviews
                for sbv in largeSubViews
                {
                    if let lbl = sbv as? UILabel
                    {
                        lbl.padding = UIEdgeInsets(top: 4, left: 0, bottom: 0, right: 0)
                        lbl.setNeedsLayout()
                    }
                }
                subview.addSubview(labelSubtitle)
            }
        }

        self.navigationController!.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 30, weight: .bold)]

        labelSubtitle.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            labelSubtitle.leftAnchor.constraint(equalTo: self.navigationController!.navigationBar.leftAnchor, constant: 20.0),
            labelSubtitle.bottomAnchor.constraint(equalTo: self.navigationController!.navigationBar.bottomAnchor, constant: -37.0),
            labelSubtitle.heightAnchor.constraint(equalToConstant: 20.0),
            labelSubtitle.widthAnchor.constraint(equalToConstant: 200.0)
            ])

To change the insets I'm using an extension published on in this post: Adding space/padding to a UILabel

The result looks like:

Add title and subtitle to navigation bar similar to Apple Music in IOS 11

According to WWDC 2017 Session 301 - Introducing the New App Store around 10:30, right when the Today interaction is displayed, it's just the section header of the collection view and not part of the UINavigationBar (there is none). Again, this is for the AppStore but It'd appear that's the same UI as Music.

Another interesting read about recreating the UI: Re-building the new app store app – today view

NavigationBar large title not collapse when I have custom image/view under tableView iOS 13

So, after a long search and a lot of tries, finally I figure out in a different way:

tblSettings.backgroundView = UIImageView(image: UIImage(named: "yourImageName"))

Setting backgroundView to UITableView it will allow navigation bar to animate properly to large and normal titles.

Hope this will someone!

---

Related Topics