iOS 11:用于大标题的UINavigationBar的高度(模仿Apple Music App)

问题描述

限时删除！！

我正在尝试模仿Apple Music App使用的 UINavigationBar 的外观(日期显示在大标题上方).

我知道Apple Music App不使用

因为

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?

解决方案

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:用于大标题的UINavigationBar的高度(模仿Apple Music App)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..