Add title and subtitles to navigation bar similar to Apple Music in iOS 11

Question

This is a question IOS 11. I'm not sure if we can talk about this, iOS is in beta.

But I watched this navigation bar in Apple Music:

I know that they have introduced large headers with IOS 11:

navigationController?.navigationBar.prefersLargeTitles = true

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

At first I thought it was a property prompt, but it sets the text still in the center and top.

Interestingly, this is some kind of special API IOS 11, or they just used a two-label view.

Answer 1

WWDC 2017 301 - 10:30, , , , UINavigationBar ( ). , AppStore, , , Music.

: -

Answer 2

, , LargeTitle:

1

:

1. (Main.storyboard).

2. .

3. ""> ""> " ".

2

:

1. " "> ""> " ".

2. " " .

3

:

 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

    }

viewDidLoad():

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