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

Posted

技术标签:

【中文标题】iOS 11:大标题的 UINavigationBar 高度(模仿 Apple Music 应用)【英文标题】:iOS 11: Height of UINavigationBar for large title (mimic Apple Music App) 【发布时间】:2018-03-16 07:43:19 【问题描述】:

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

我知道 Apple Music 应用不使用标准的 UINavigationBarios11,但标题视图是 UICollectionView

由于标题文本的大小调整功能,我还想使用ios11 的标准UINavigationBar

我可以添加custom date label 来查看大title view 的层次结构,我的代码如下所示:

    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)
        ])

custom date label 放置正确,但我无法将UINavigationBar 的高度设置为标签的额外height

由于 ios11 UINavigationBar 使用自动布局,因此设置框架将不再像以前的 iOS 版本那样工作。

系统添加的自动布局约束。默认情况下,它的优先级为 1000,因此向标签添加额外的约束不会产生任何影响或导致自动布局冲突。

在“大标题”上方显示“小标题”而不滚动的任何提示?

【问题讨论】:

【参考方案1】:

您可以在UINavigationBarLargeTitleView 中使用UILabel,例如更改其插图并减小字体大小,这是一个示例:

        // 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)
            ])

要更改我正在使用此帖子中发布的扩展程序的插图:Adding space/padding to a UILabel

结果如下:

【讨论】:

完美运行.. Tnx.

以上是关于iOS 11:大标题的 UINavigationBar 高度(模仿 Apple Music 应用)的主要内容,如果未能解决你的问题,请参考以下文章

iOS 11 中 UINavigationBar 大标题的默认字体?

如何在 iOS 11 的导航栏上设置大标题?

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

iOS 11 - 使用大标题模式时的 UINavigationItem titleView

如何隐藏大标题 iOS 11 搜索控制器

带有 iOS 11 大标题的 UISplitViewController 破动画