iOS 13 Navigation Bar Large Title Issue

Question

I am trying to show a large Title in a Navigation bar, but with clear background. When scrolled up, it will be the Navigation bar with a blur effect.

This looks correct, however, when scrolling, the animation seems to be broken. Also, transition gets stuck from time to time:

My code as follows:

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

   }
}

The UITableView is inside the UINavigationController. Both are from storyboards via a segue way.

The configuration you seem to be describing is the default, so why not just do nothing? Also I can’t recreate any glitches so maybe you have other code that causes it. — matt, Nov 19 '19 at 20:20

score 5 · Answer 1 · answered Nov 27 '19 at 09:26

Instead of UITableview, You can try using UITableViewController. I have tried using UITableViewController and its working fine for me. Please check the following design and code.

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

Output:-

That is how my storyboard is set up. I am starting to find out that this behavior is due to all that contained within a cover vertical type modal view that has a swipe down gesture. — Gizmodo, Nov 27 '19 at 21:59
If you your setup and present it modally with cover vertical style, you will see that you get the behavior I get in the OP. This is also present in Apple's own mail app - New Mail — Gizmodo, Nov 27 '19 at 22:00

DevesH · Answer 2 · 2021-11-29T14:13:12.507

4

In view debugger, check if navigation title goes beyond navigation bar bounds. If that's the case then :

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

edited Nov 29 '21 at 14:13

answered Nov 24 '19 at 07:40

DevesH

486
4
18

Where would this go? – Gizmodo Nov 24 '19 at 13:19

score 3 · Answer 3 · answered Nov 19 '19 at 19:11

3

hey How are you here is your code try to remove this line

    largeStyle.configureWithTransparentBackground()

you have to configure with white background

your code:

    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

  }
 }

answered Nov 19 '19 at 19:11

Nayab Muhammad

90
1
6

Actually I need the background to be transparent when shown as a large title. The Table View I have is using a blur view. That is why I had to use configureWithTransparentBackground(). – Gizmodo Nov 19 '19 at 19:14
1

blur view is in the background of your title or in background of your tableview – Nayab Muhammad Nov 19 '19 at 19:29
background view of the table view behind. – Gizmodo Nov 19 '19 at 19:33
If I do not do transparent background, for large title, the system will make the whole nav bar taller. When transparent, it looks like there is no bar, just the large title at the top of the table view. – Gizmodo Nov 19 '19 at 21:21

score 2 · Answer 4 · answered Nov 24 '19 at 07:50

2

changing properties via storyboard night i’ve some insights. usually when i’m stuck i reflect same changes that i made programmatically to storyboard and the things left in code are usually the ones causing my bug. try this out if possible

answered Nov 24 '19 at 07:50

stack_r

21
5

This seems to happen when the navigation controller is presented modally, in a new swipe down container. I believe swipe down pan gesture is the culprit. You can see this behavior in iOS 13 Mail app, in new mail container. – Gizmodo Nov 24 '19 at 14:42

score 0 · Answer 5 · answered Jun 29 '23 at 08:15

To prevent the navigation bar's large title from changing its default heavy font, we should avoid modifying the font in 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
    }

iOS 13 Navigation Bar Large Title Issue

5 Answers5