Center UIButton image with UIBarButtonItem on UIToolbar

2
votes

I'm trying (everything in XCode with Interface Builder) to create a UIButton with image adding it to UIToolbar, which makes it UIBarButtonItem (when click twice it shows the UIButton properties).

I have a [email protected] image with size 64x88 (height is 88, because in Retina it's the toolbar height). I'm not interested in non-retina screens. I added this image to UIButton setting Mode in View properties to Center (or Aspect Fit, it shouldn't really matter here; tried both, aswell).
Set its size to 32x44 (44 height in builder). Then, dragged it to UIToolbar.

Now, I want to change the width of my button to make it larger, because I want to give user some more space to tap, also, I planned the toolbar background for that. And I want the image on this button to remain the same, but centered. But, when I try to resize the UIBarButtonItem, it actually scales the image, no matter what Mode is set.

That's what happens (I'm showing an actual dragging process):

However, if I change image real size to height 44, it works well. But 44 height looks ugly in Retina devices, so, what should I do?

1
iosobjective-cxcodeuibuttonuibarbuttonitem
I have a hard time following you. Some screenshots of what's going on would be really helpful. - Scott Berrevoets
@Scott, added the screenshot of what happens with its image - dreamzor

1 Answers

2
votes

I've seen this happen. For the sake of argument, create two images, image.png and [email protected], and when setting the image of the button, select image.png in Xcode.

Alternatively, you can create a UIView-based UIBarButtonItem and have a UIImageView and a UIButton. This way, you have a more precise control over the image sizing.