iOS 13 导航栏大标题问题

Question

我正在尝试在导航栏中显示一个大的“标题”，但是要有清晰的背景。当向上滚动时，它将成为带有模糊效果的“导航栏”。

这看起来是正确的，但是在滚动时，动画似乎出现了问题。此外，过渡有时会卡住：

我的代码如下：

UINavigationController：

override func viewDidLoad() {
   super.viewDidLoad()

   if #available(iOS 13.0, *) {

      self.navigationBar.prefersLargeTitles = true

      let style = UINavigationBarAppearance()
      style.configureWithDefaultBackground()

      style.titleTextAttributes = [.font: UIFont.systemFont(ofSize: 18)]

      self.navigationBar.standardAppearance = style
      self.navigationBar.compactAppearance = style


      //Configure Large Style
      let largeStyle = UINavigationBarAppearance()
      largeStyle.configureWithTransparentBackground()

      largeStyle.largeTitleTextAttributes = [.font: UIFont.systemFont(ofSize: 28)]

      self.navigationBar.scrollEdgeAppearance = largeStyle

   }
}

UITableView在UINavigationController中。两者都是通过故事板的segue方式创建的。

- Gizmodo

---

你所描述的配置是默认值，为什么不仅仅什么都不做呢？而且我无法重现任何故障，也许是其他代码导致的。 - matt

你是使用UITableViewController还是UITableView？ - Manikandan

Answer 1

您可以尝试使用UITableViewController而不是UITableview。我已经使用了UITableViewController并且对我来说效果很好。请检查以下设计和代码：

class ViewController: UITableViewController
{
    override func viewDidLoad() {
        super.viewDidLoad()
          if #available(iOS 13.0, *) {
                  self.navigationController?.navigationBar.prefersLargeTitles = true
                  let style = UINavigationBarAppearance()
                  style.configureWithDefaultBackground()
                  style.titleTextAttributes = [.font: UIFont.systemFont(ofSize: 18)]
                  self.navigationController?.navigationBar.standardAppearance = style
                  self.navigationController?.navigationBar.compactAppearance = style
                  //Configure Large Style
                  let largeStyle = UINavigationBarAppearance()
                  largeStyle.configureWithTransparentBackground()
                  largeStyle.largeTitleTextAttributes = [.font: UIFont.systemFont(ofSize: 28)]
                  self.navigationController?.navigationBar.scrollEdgeAppearance = largeStyle
              }
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        // Do any additional setup after loading the view.
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        1
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        10
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = "\(indexPath.row)"
        return cell
    }
}

输出：-

- Manikandan

---

这就是我的故事板设置。我开始发现，这种行为是由于所有包含在垂直类型模态视图中的内容所致，该视图具有向下滑动手势。 - Gizmodo

如果您使用垂直覆盖样式设置并以模态方式呈现它，您将看到您在 OP 中看到的行为。这也存在于苹果自己的邮件应用程序 - 新邮件。 - Gizmodo

Answer 2

在视图调试器中，检查导航标题是否超出导航栏边界。

如果是这样，则：

let titleHeight = UIFont.systemFont(ofSize: 28).lineHeight
if titleHeight > self.view.frame.size.height {
   self.navigationController.navigationBar.frame = CGRectMake(0, 0, self.view.frame.size.width, titleHeight + topAndBottomPadding)
}

- DevesH

---

这应该放到哪里？ - Gizmodo

Answer 3

嗨，你好吗？这里是你的代码，请尝试移除这一行。

    largeStyle.configureWithTransparentBackground()

您需要配置白色背景

您的代码：

    override func viewDidLoad() {
    super.viewDidLoad()

    if #available(iOS 13.0, *) {

  self.navigationBar.prefersLargeTitles = true

  let style = UINavigationBarAppearance()
  style.configureWithDefaultBackground()

  style.titleTextAttributes = [.font: UIFont.systemFont(ofSize: 18)]

  self.navigationBar.standardAppearance = style
  self.navigationBar.compactAppearance = style


  //Configure Large Style
  let largeStyle = UINavigationBarAppearance()
  largeStyle.configureWithTransparentBackground()

  largeStyle.largeTitleTextAttributes = [.font: UIFont.systemFont(ofSize: 28)]

  self.navigationBar.scrollEdgeAppearance = largeStyle

  }
 }

- Nayab Muhammad

---

实际上，当作为大标题显示时，我需要背景是透明的。我使用的表视图正在使用模糊视图。这就是为什么我不得不使用configureWithTransparentBackground()的原因。 - Gizmodo

模糊视图可以放在你的标题或表格视图的背景中。 - Nayab Muhammad

表视图背后的背景视图。 - Gizmodo

如果我不使用透明背景，对于大标题，系统会使整个导航栏变得更高。当使用透明背景时，它看起来就像没有导航栏，只有位于表视图顶部的大标题。 - Gizmodo

Answer 4

在故事板中通过更改属性，我有一些见解。通常当我卡住时，我会反思我以编程方式进行的相同更改，并且代码中剩下的部分通常是导致错误的原因。如果可能，请尝试这样做。

- stack_r

---

当导航控制器以模态方式在新的下拉容器中呈现时，似乎会出现这种情况。我相信下拉手势是罪魁祸首。您可以在iOS 13邮件应用程序中的新邮件容器中看到此行为。 - Gizmodo

Answer 5

为了防止导航栏的大标题改变其默认的粗体字体，我们应该避免在UINavigationBarAppearance中修改字体。

 // Fix the issue of transparent navigation when pushing
    if #available(iOS 13.0, *) {
        self.navigationController?.navigationBar.prefersLargeTitles = true
        let style = UINavigationBarAppearance()
        style.configureWithDefaultBackground()
        self.navigationController?.navigationBar.standardAppearance = style
        self.navigationController?.navigationBar.compactAppearance = style
        //Configure Large Style
        let largeStyle = UINavigationBarAppearance()
        largeStyle.configureWithTransparentBackground()
        self.navigationController?.navigationBar.scrollEdgeAppearance = largeStyle
    }

- Giang