1

Problem

After upgrading to XCode 9 and migrating my code to Swift 4, I've come across a few problems that I wasn't expecting. One of them is that the navigation bar in my app contains a button in the top left bar button item slot with an image, and now the image (and button) is stretched halfway across the screen for all view controllers (some have autolayout and some don't). Before XCode 9, it was working perfectly fine, and this problem only popped up after I updated XCode.

What I've tried

From this old SO post someone posted a recent answer that seems to suggest my problem stems from the different sizes for images in Assets.xcassets, but I don't understand why that would be a problem. I tried duplicating the image for the button and renaming it with "@2x" at the end (not sure what difference that makes...) and dragging it into the 2x slot in Assets.xcassets, and that somehow made the button slightly less stretched (about a third of the screen instead of about half). Overall, I'm just confused at why I have this problem, and would appreciate a solution that can fix my problem and explain why it worked before, but now doesn't.

Thanks in advance.

RPatel99
  • 7,448
  • 2
  • 37
  • 45

2 Answers2

3

You have to set image view for bar button like this :

imageView is your bar button ImageView.

let widthConstraint = imageView.widthAnchor.constraint(equalToConstant: 32)
let heightConstraint = imageView.heightAnchor.constraint(equalToConstant: 32)
heightConstraint.isActive = true
widthConstraint.isActive = true
Vini App
  • 7,339
  • 2
  • 26
  • 43
  • I would like to keep everything in storyboard... In the past version of XCode I just dragged a Button into the navigation bar's left barButtonItem and set the Button's image to the image I wanted, and then I could resize it to what I wanted from storyboard. So is there any way to do it with storyboard? Because the button and the barbuttonitem are both created in storyboard and I don't want to unnecessarily create more `@IBOutlet`s where I don't need to. – RPatel99 Oct 10 '17 at 02:49
  • This worked for me! The issue was that starting from iOS 11, `UIBarButtonItem`s are laid out using the Auto layout engine (more info: https://developer.apple.com/videos/play/wwdc2017/204/) – mineralwasser Jul 23 '18 at 21:29
1

Hi RPatel99,

I faced the same issue. But I found a solution, set the image of your button to this sizes:
- image@1x: 22x22px
- image@2x: 44x44px
- image@3x: 66x66px

Unfortunately, I can't post photos because of my reputation.

Note: I try many different ways like change the frame of my button image but it doesn't work. If someone have an other solution, tell me, I'm interested.

JMax
  • 11
  • 1
  • My image's 1x isn't 22x22px, but I tried doubling its size for 2x and tripling for 3x but that just stretches the image even more... – RPatel99 Oct 10 '17 at 02:54
  • Changing the sizes of all of them to being much smaller fixes the stretched image, but the left barbutton is still for some reason aligned much farther to the right than it should be... changing the image size seems to change the button's size as well (even though before the button's size determined how much the image should scale, not vice versa), but then the barbutton doesn't scale with the button like it should... – RPatel99 Oct 10 '17 at 03:18