UINavigationItems Stretching in iOS11

Question

I'm updating an app to ensure that it works as expected in iOS11. The only issue I've run into is that the navigation bar looks quite different in iOS11. The position of the elements and size is not the same between versions. I've looked at my code and i'm explicitly setting frame sizes and edge insets, why are these values are not respected in iOS11?

//-- Create Right Navigation Item Buttons

// create kabob btn
UIButton *kabobBtn =  [UIButton buttonWithType:UIButtonTypeCustom];
[kabobBtn addTarget:self action:@selector(viewUsersClicked:)forControlEvents:UIControlEventTouchUpInside];
kabobBtn.clipsToBounds = YES;    
[kabobBtn setImage:[UIImage imageNamed:@"KabobMenu2_0071bc_Right.png"]
               forState:UIControlStateNormal];
[kabobBtn.imageView setContentMode:UIViewContentModeScaleAspectFit];
[kabobBtn setFrame:CGRectMake(0, 0, 32, 32)];

// create user profile button
UIButton *userBtn =  [UIButton buttonWithType:UIButtonTypeCustom];    
[userBtn setImage:[UIImage imageNamed:@"people.png"]
        forState:UIControlStateNormal];
[userBtn addTarget:self action:@selector(viewUserProfileClicked:)forControlEvents:UIControlEventTouchUpInside];
[userBtn setFrame:CGRectMake(0, 0, 38, 38)];
userBtn.clipsToBounds = YES;

[userBtn.layer setCornerRadius:(38/2)];
[userBtn.layer setMasksToBounds:YES];
[userBtn.layer setBorderColor:[[UIColor blackColor]CGColor]];
[userBtn.layer setBorderWidth:1];


self.userPictureURL = [defaults objectForKey:@"userPicture"];

[userBtn setImage:[UIImage imageNamed:@"defaultUserImage.png"] forState:UIControlStateNormal];
[userBtn setContentMode:UIViewContentModeScaleAspectFill];
[userBtn setBackgroundColor:[UIColor clearColor]];

// add buttons to bar button items
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:kabobBtn];
UIBarButtonItem *barButton2 = [[UIBarButtonItem alloc] initWithCustomView:userBtn];

// add bar button items to right bar button item array
self.navigationItem.rightBarButtonItems = @[barButton,barButton2];

//-- Create Left Hamburger Button
UIButton *customOpen = [UIButton buttonWithType:UIButtonTypeCustom];
[customOpen setFrame:CGRectMake(0, 0, 30, 44)];
[customOpen setImage:[UIImage imageNamed:@"hamburger.png"] forState:UIControlStateNormal];
[customOpen setImageEdgeInsets:UIEdgeInsetsMake(10, -5, 16, 10)];
UIBarButtonItem *openItem = [[UIBarButtonItem alloc] initWithCustomView:customOpen];

if(self.showHamburger){
    self.navigationItem.leftBarButtonItem = openItem;

}else{
    self.navigationItem.leftBarButtonItem = nil;

}

Answer 1

Apparently iOS 11 uses autolayout for nav bar buttons. Use auto layout constraints to set button width and height.

[userBtn.widthAnchor constraintEqualToConstant:38.f].active = YES;
[userBtn.heightAnchor constraintEqualToConstant:38.f].active = YES;

This should fix the stretching issue.

Thanks to this answer