代码之家 › 专栏 › 技术社区 › wj313

iOS 11:大标题的UINavigationBar高度(模仿苹果音乐应用程序)

ios11 uinavigationbar ios

wj313 · 技术社区 · 7 年前

我试着模仿 UINavigationBar 苹果音乐应用程序使用的日期(日期显示在大标题上方)。

我知道苹果音乐应用程序不使用标准 导航栏 属于 ios11 但标题视图是 UICollectionView 。

我还想使用标准 导航栏 属于 ios11 因为标题文本的大小调整功能。

我可以添加 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)
        ])

这个 自定义日期标签 位置正确,但我无法设置 导航栏 至其他 height 标签的。

自从 ios11 导航栏 使用自动布局,因此设置框架不再像以前的iOS版本那样有效。

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

有没有提示可以在“大标题”上方显示“小标题”而不滚动?

1 回复 | 直到 7 年前

garanda 7 年前

你可以玩一下 UILabel 内部 UINavigationBarLargeTitleView 与更改其插入内容和减小字体大小一样,下面是一个示例:

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

结果如下所示: