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

Question

This is an IOS 11 question. I am not sure if we can talk about this, IOS being in beta.

But I was looking at this navigation bar in Apple Music:

I know they introduced large titles with IOS 11:

navigationController?.navigationBar.prefersLargeTitles = true

The "For You" text looks like the title, but how did they add the date ? Is it an API for this ?

At first I thought that is the prompt property, but that sets the text still in the center and on the top.

I wonder if that is some special IOS 11 API or they just used a view with two labels.

Answer 1

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

Answer 2

For all who search how set subtitle for LargeTitle:

Step 1

Add a Navigation Controller to your scene:

1. Open your storyboard(Main.storyboard).

2. Select scene.

3. Choose Editor > Embed In > Navigation Controller.

Step 2

Turn on Large Titles:

1. Select Item Scene > Item > Navigation Bar.

2. Tick "Prefers Large Titles" on attribute inspector.

Step 3

Add this function to your code:

 func setTitle(title:String, subtitle:String) -> UIView {

        //Get navigation Bar Height and Width
        let navigationBarHeight = Int(self.navigationController!.navigationBar.frame.height)
        let navigationBarWidth = Int(self.navigationController!.navigationBar.frame.width)

        //Y position for Title and Subtitle
        var y_Title = 0.0
        var y_SubTitle = 0.0

        //Set Y position
        if UIDevice().userInterfaceIdiom == .phone {
            switch UIScreen.main.nativeBounds.height {
            //If screen height equal iPhone 5S and SE
            case 1136:
                y_Title = 46
                y_SubTitle = 36
                print("iPhone 5S and SE")
            //If screen height equal iPhone 6, 6+, 6S, 6S+, 7, 7+, 8, 8+ and X
            case 1334, 1920, 2208, 2436:
                y_Title = 48
                y_SubTitle = 38
                print("iPhone 6, 6+, 6S, 6S+, 7, 7+, 8, 8+ and X")
            default:
                y_Title = 46
                y_SubTitle = 36
                print("Default")
            }
        }

        //Set Font size and weight for Title and Subtitle
        let titleFont = UIFont.systemFont(ofSize: 33, weight: UIFont.Weight.bold)
        let subTitleFont = UIFont.systemFont(ofSize: 12, weight: UIFont.Weight.semibold)

        //Title label
        let titleLabel = UILabel(frame: CGRect(x: 8.5, y: y_Title, width: 0, height: 0))
        titleLabel.backgroundColor = UIColor.clear
        titleLabel.textColor = UIColor.black
        titleLabel.font = titleFont
        titleLabel.text = title
        titleLabel.sizeToFit()

        //SubTitle label
        let subtitleLabel = UILabel(frame: CGRect(x: 8.5, y: y_SubTitle, width: 0, height: 0))
        subtitleLabel.backgroundColor = UIColor.clear
        subtitleLabel.textColor = UIColor.gray
        subtitleLabel.font = subTitleFont
        subtitleLabel.text = subtitle
        subtitleLabel.sizeToFit()

        //Add Title and Subtitle to View
        let titleView = UIView(frame: CGRect(x: 0, y: 0, width: navigationBarWidth, height: navigationBarHeight))
        titleView.addSubview(titleLabel)
        titleView.addSubview(subtitleLabel)

        return titleView

    }

And then call this function in viewDidLoad():

override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.titleView = setTitle(title: "Title", subtitle: "SUBTITLE")
    }