iOS 16 additional empty space in navigation item

Question

When I creatе the simplest titleView with iOS 16 and add it to the navigationItem I see an additional space that I cannot remove in any way. I did not have this issue on iOS 15, does anybody know what can be done?

The issue I am trying to solve is that the titleView contains a label which gets misaligned on iOS 16. The label is on the most left side of the titleView and

on iOS 15 the titleView itself is on 12 points from the left and right corner of the screen
but on iOS 16 the titleView is on 20 points from the left and right corner of the screen and this unfortunately breaks the desired design

I'm attaching a screenshot from iPhone 13 Pro Max - on the left is iOS 16 and on the right is iOS 15:

I have a view controller wrapped in a navigation controller and this is the only code in the view controller

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.titleView =  UIView(frame: CGRect(x: 0, y: 0, width: 404, height: 40)) 

        view.backgroundColor = .lightGray
        titleView.backgroundColor = .red
    }
}

The frame of the navigationItem.titleView:

iOS 15: iPhone 13 Pro Max: <UIView: 0x7f85fda14d10; frame = (0 0; 404 40);>
iOS 16: iPhone 13 Pro Max: <UIView: 0x7f7894f157e0; frame = (0 0; 388 40);>

I've tried removing insets, margins, changing the width, changing the place where I set the view, nothing works and I am out of ideas

What problem are you trying to solve? Why does it matter that the titleView is 16 points narrower under iOS 16 than iOS 15? If you explain what your actual needs are, someone can offer an appropriate solution. — HangarRash, Mar 10 '23 at 17:23
Then it would be best to update your question with real code that fully demonstrates your issue with the label getting misaligned. — HangarRash, Mar 10 '23 at 17:40
The titleView contains a label which gets missaligned on iOS 16 - the label should be on the most left side of the titleView and on iOS 15 it works as expected, but on iOS 16 this additional empty space breaks the desired design because of this additional empty space — s1321222, Mar 10 '23 at 17:44
If the label is supposed to be at the far left side of the title view, then how can it be misaligned if it's still at the far left side of the title view? If you want the label at the far left side of the nav bar, use the `leftBarButtonItem`, not the `titleView`. — HangarRash, Mar 10 '23 at 17:49
No, unfortunately not. I've discussed it with several developers and nobody knows what we can do besides setting a negative inset of your view. In our case is a button and we adjust the contentEdgeInsets.left. Not a great solution, but the only workaround so far. Please, let me know if you find something else — s1321222, Apr 20 '23 at 22:04
Thing is, we seem to have noticed that they appear occasionally, and I cannot predict whether I need negative inset or not. — Konstantin, Apr 21 '23 at 06:27
Oh I have something for you here - it was strange for us as well but what we saw is the nav bar layouts its components in respect of the layoutMargins, some phones has leading/trailing layoutMargin 16 (iPhone 14) and other 20 (iPhone 14 pro max). Which was causing the titleView to be aligned correctly for some phones and misaligned for others. In our case we extend the UINavigationController and check view.layoutMargins.left,eg: let padding = view.layoutMargins.left == 16 ? 6 : 2, with the new iOS 16 will be let padding = view.layoutMargins.left == 16 ? -4 : -8 or whatever number works for you — s1321222, Apr 21 '23 at 10:35

score 0 · Accepted Answer · answered Aug 22 '23 at 15:16

I also had a problem with it, but I found a solution:

You need to make your own class for TitleView
You need to override intrinsicContentSize

override var intrinsicContentSize: CGSize {
    return CGSize(width: UIScreen.main.bounds.width - (left/right margin),
                  height: (fixed height) )
}

So you will rely not on UIView.layoutFittingExpandedSize width/height but on your specific width/height.

And if you just want to have it full width (like your screenshot) you can use UIScreen.main.bounds.width.

If you want to have the same left/right margins on iOS 15 and iOS 16+ you can make UIScreen.main.bounds.width - (left/right margin).

Here is the UI overview with issue Before and After fix:

iOS 16 additional empty space in navigation item

1 Answers1