iOS 11 navigationItem.titleView Width Not Set

Question

Seeing a behavior on iOS11 with a navigationItem.titleView where the width of the titleView is not the full width of the screen.

I have a custom view that I set as the titleView. Previous to iOS11 the view would fill the navigation bar area. But iOS 11 it is not resizing to fill the width of the screen.

I've tried setting the frame of the view before setting titleView but no luck. I've tried to force the titleViews superview to layout constraints as well but no luck.

Screenshots attached:

iOS10:

iOS11:

Anyone else experience this?

Solution 1

I figured it out. I had to override the intrinsicContentSize getter for the view, and the text field.

I set the width to CGFloat.greatestFiniteMagnitude so it'll always be as wide as the screen.

Update:

Since I've spent couple of hours on this issue, hope that some else will catch up faster by having all things tight up together

I've created a custom sub class of TitleView, called CustomTitleView, here's the code:

import UIKit

class CustomTitleView: UIView {

  override var intrinsicContentSize: CGSize {
    return UIView.layoutFittingExpandedSize
  }
}

and the most important part which I missed from the start was this:

Solution 2

Using @falkon's answer here's the code:

Add this code to the view that is used as titleView

override var intrinsicContentSize: CGSize {
    return UILayoutFittingExpandedSize
} 

Solution 3

Fixed it by creating a subclass of UIView and assigned it to a title view of UINavigationController

Objective-C:

#import "FLWCustomTitleView.h"

@implementation FLWCustomTitleView

- (CGSize )intrinsicContentSize {
  return UILayoutFittingExpandedSize;
}

@end

Solution 4

setting intrinsicContentSize to UILayoutFittingExpandedSize works fine as well

Solution 5

I had to fit an UIImageView as navigationItem.titleView. The aspect ratio did fit but the intrinsicContentSize made it to large. Scaling the image led to poor image quality. Setting layout anchors worked for me:

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 30)];
[imageView setImage:image];
[imageView.widthAnchor constraintEqualToConstant:80].active = YES;
[imageView.heightAnchor constraintEqualToConstant:30].active = YES;
[imageView setContentMode:UIViewContentModeScaleAspectFit];
self.navigationItem.titleView = imageView;

View more solutions

Comments

[mangerlahn]

As an explanation: the titleView is now laid out with Auto Layout. Since it looks for the intrinsicContentSize, this is what worked.

[Arco]

Can be the title view showed below the large title view? I assigned a segmentedControl for title view, and it always showed upon the large title.

[el.severo]

@Arco: Have you solved your issue? I have the same issue with UISegmentedControl placed inside TitleView and the touch doesn't responds, re-attached & subclassed the UIView class of the TitleView which overrides the intrinsicContentSize property as João Nunes mentioned in below answer.

[Arco]

@el.severo I don't solve my question because I think there is no public api for us to assign a custom view on large title view place. Maybe you can see the navigation bar subviews structure and try to use Objective-C runtime to solve your problem.

[el.severo]

@Arco: Thanks but I've managed to solve it, I just edited this answer and provided extra info, hope some else will benefit from it.

[Paulo Sigales]

Do you know why need be less then 44? I try bigger without success.

[Lumialxk]

Fixed, but sometimes title view will move under status bar after wield animation.

[RealNmae]

The problem is that it also pushes away from the screen left and right nav buttons

[rafalkitta]

I had to also add translatesAutoresizingMaskIntoConstraints = false to that view.

[Naman Vaishnav]

imageView.frame = CGRectMake(0, 100, 150, 27); is it possible to change Y in its frame ?

[Mutawe]

You can put the UIImageView inside a UIView and change the UIImageView frame

[Yaroslav Dukal]

how did you add a custom view there ?

[Michael McKenna]

How/where did you set the width? By resetting the frame?

[iOS Blacksmith]

Interesting. It works! 👍 I was trying to include a "spacer" view as the last arranged subview that would have a width constraint to CGFloat.greatestFiniteMagnitude and the stackview distribution as .fill in order to fill up any remaining space. In my case it stopped working when there were more than 1 right bar button items.

[Keyhan Kamangar]

Man you saved my life!!!. This solution works perfectly on iOS 14 as well.