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

Question

I'm trying to mimic the look of UINavigationBar as used by the Apple Music App (the date is shown above the large title).

I know that the Apple Music App doesn't use the standard UINavigationBar of ios11 but a header view is UICollectionView.

I also want to use the standard UINavigationBar of ios11 because of the resizing feature for title text.

I'm able to add the custom date label to view hierarchy of the large title view, my code as shown below:

    self.title = "Large Title"
    navigationController?.navigationBar.prefersLargeTitles = true

    guard let navigationBar = navigationController?.navigationBar else { return }

    // Create label
    let label = UILabel()
    label.text = "Small Title"

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

    // Add label constraints
    label.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        label.leftAnchor.constraint(equalTo: navigationBar.leftAnchor, constant: 16.0),
        label.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor, constant: -50.0),
        label.heightAnchor.constraint(equalToConstant: 20.0),
        label.widthAnchor.constraint(equalToConstant: 200.0)
        ])

The custom date label is placed correctly but I'm unable to set the height of UINavigationBar to additional height of the label.

Since ios11 UINavigationBar uses Auto-layout, so setting the frame wont work anymore as like the previous iOS versions.

The Auto-layout constraints added by the system. by default it have a priority of 1000, so adding the additional constraints to the label didn't give any effect or result in the Auto-layout conflict.

Any hints to show the "Small Title" above the "Large Title" without scrolling?

score 0 · Accepted Answer · answered Mar 16 '18 at 17:10

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:

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

1 Answers1

Linked