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

Question

我试图设计一个视图控制器，其中包含多行居中大标题文本，就像苹果公司的Ask Siri一样(设置->通用->键盘->关于Ask Siri、语音输入和隐私...)。

我可以使用以下代码来实现居中文本：

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

我曾尝试从Storyboard设置导航栏标题，并使用以下方法来实现多行大标题：

• https://dev59.com/oFYN5IYBdhLWcg3wJFNm#51295457
• https://dev59.com/6aXja4cB1Zd3GeqPSH9o#48388588

但是它们在iOS 13上都无法正常工作。

- Lal Krishna

Answer 1

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

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中将导航项标题设置为空字符串。

- Jan

---

实际上，我需要与UINavigationbar大标题完全相同的行为。（我已经添加了截图）。它已经由系统处理。但目前它不支持启用多行的开放方式。一些Stackoverflow上的答案已经涵盖了这个问题，但在iOS 13上无法正常工作。 - Lal Krishna

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

我也检查过了。大标题标签UIView的高度固定为52。我尝试通过编程添加约束和更改其框架，但都没有成功。 - Lal Krishna

Answer 2

没有任何属性可以设置使得title成为多行，您需要进行操作。

以下是创建多行navigationBar标题的代码示例：

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

- bestiosdeveloper

---

这不是我要求的那一个。它在导航标题中总是显示得很小。 https://imgur.com/a/5JMoZNr - Lal Krishna