如何将导航栏大标题转换为多行，居中对齐

Posted 2023-03-09

【中文标题】如何将导航栏大标题转换为多行，居中对齐

【英文标题】：How to convert Navbar Large title to Multi-line, centre aligned

【发布时间】：2020-06-26 05:09:12

【问题描述】：

我正在尝试设计具有多行居中大标题文本的视图控制器，就像苹果的 Ask Siri (Settings->General->Keyboards->About Ask Siri, Dictation and Privacy...)。

我可以使用以下方法实现居中文本：

let paragraph = NSMutableParagraphStyle()
paragraph.alignment = .center
navigationController?.navigationBar.largeTitleTextAttributes = [.paragraphStyle: paragraph]

我确实从情节提要中设置了导航标题并尝试了这些以实现多行大标题：

https://***.com/a/51295457/4061501 https://***.com/a/48388588/4061501

但它们都不适用于 ios 13。

【参考方案1】：

您可以通过向您的滚动视图添加多行标签来实现此目的，然后根据垂直滚动视图偏移量在滚动视图的scrollViewDidScroll 委托方法中显示/隐藏您的导航项标题。

func scrollViewDidScroll(_ scrollView: UIScrollView) 
    if scrollView.contentOffset.y > myLabelHeight && navigationItem.title == "" 
        setTitle(hidden: false)
     else if scrollView.contentOffset.y <= myLabelHeight && navigationItem.title == "MyTitleString" 
        setTitle(hidden: true)
    

我添加了一个图层过渡来实现淡入淡出效果。

func setTitle(hidden: Bool) 
    let animation = CATransition()
    animation.duration = 0.25
    animation.type = .fade

    navigationController?.navigationBar.layer.add(animation, forKey: "fadeText")

    if hidden 
        navigationItem.title = ""
     else 
        navigationItem.title = "MyTitleString"
    

不要忘记在viewDidLoad 中将导航项标题设置为空字符串。

【讨论】：

其实我需要 UINavigationbar 大标题的确切行为。 （我已经添加了截图）。它已经由系统处理。但目前它不支持开放的方式来启用多行。 *** 上的一些答案涵盖了它，但它不适用于 iOS 13。

由于提供的 API 不支持它，因此我将采用我的解决方案 - 您只需几行代码即可实现所需的结果。否则遍历视图层次结构并更改大标题标签。其他 *** 帖子中的解决方案不起作用的原因可能是 Apple 更改了 iOS 13 中导航栏的视图层次结构。您可以使用 Xcode 的 UI 调试器查看标签在层次结构中的位置，然后更改 for循环。

我也检查过。大标题标签 UIView 的固定高度为 52。我尝试以编程方式添加约束，并更改其框架。没有工作。

【参考方案2】：

没有任何可以设置的此类属性，title 变成了多行。你需要操纵它。

这是一个如何创建多行导航栏标题的代码示例：

label.backgroundColor = .clear
label.numberOfLines = 2
label.font = UIFont.boldSystemFont(ofSize: 16.0)
label.textAlignment = .center
label.textColor = .white
label.text = "This is a\nmultiline string for the navBar"
self.navigationItem.titleView = label```

【讨论】：

这不是我要的。它总是在导航标题中显示小。 imgur.com/a/5JMoZNr