4

I have a UIButton in my app, where instead of text I give it an image, as it servers as a thumbnail button that will present the full image upon being tapped.

I saw this answer as seemingly the accepted implementation of this, but with images smaller than the button themselves, the image view doesn't actually fill the button as the contentMode should, or as it would with an image view, as shown below:

enter image description here

As you can see, with the image view it expands properly, but with the button it doesn't. (The button background is set to blue so you can see where it's not showing up.)

The code I'm doing is dead simple:

myButton.setImage(UIImage(named: "pokemon"), forState: .Normal)
myButton.imageView!.contentMode = .ScaleAspectFill

How do I change it so that it fills it properly?

Sample Project: http://cl.ly/0z2T1A1Z3v3m

Community
  • 1
  • 1
Doug Smith
  • 29,668
  • 57
  • 204
  • 388
  • That is the expected behavior of a UIButton. From the document, "Buttons", "The image does not stretch or condense, so make sure to select an image that is the proper size to appear in your button" – rdelmar Dec 11 '14 at 22:19
  • How do I make it stretch or condense then? – Doug Smith Dec 12 '14 at 00:02
  • You need to resize you image. You do that by drawing the image into an image context of the right size. If you search "resize image" on this site, you'll find plenty of answers. – rdelmar Dec 12 '14 at 00:26
  • @rdelmar Actually, `contentVerticalAlignment` and the horizontal counterpart set to `.Fill` did exactly what I need. – Doug Smith Dec 12 '14 at 06:29

2 Answers2

9

Setting contentHorizontalAlignment and contentVerticalAlignment to .Fill on the UIButton makes it extend fully.

Doug Smith
  • 29,668
  • 57
  • 204
  • 388
1

Set the the image as a background of the your button. That will fill the button's frame, and no need to change the content mode. Set image as background of the button using setBackgroundImage() method. Good Luck!

EDIT

Option 1:

How about using UIImageView with UITapGestureRecognizer and desired contentMode on image view?

Option 2:

Crop the image to the button's size, and set it as button's background image.

Hope this helps!

Fahri Azimov
  • 11,470
  • 2
  • 21
  • 29
  • How would I then make it Aspect Fill rather than stretching it? – Doug Smith Dec 12 '14 at 06:29
  • What do you mean? Aspect fill mode will and should stretch the image. – Fahri Azimov Dec 12 '14 at 06:30
  • How do I set that on the backgroundImage? You can only set it on the `imageView`, not the `backgroundImageView`. – Doug Smith Dec 12 '14 at 06:31
  • Set image as background of the button using `setBackgroundImage()` method. I have edited my answer. – Fahri Azimov Dec 12 '14 at 06:33
  • Yes, but by default that stretches the image, there's no way to set the contentMode on the backgroundImage, only the regular image. – Doug Smith Dec 12 '14 at 06:33
  • Yes, that will stretch the image, as the `ScaleAspectFill` content mode does on the `UIImageView`. – Fahri Azimov Dec 12 '14 at 06:34
  • I don't think you're understanding what I'm saying. The background image by default stretches, and there's no way to change that. You can only change the contentMode on the *imageView* not the *backgroundImageView*. There's no way to directly access the `backgroundImageView` property of the `UIButton` as you can with `imageView` on it. – Doug Smith Dec 12 '14 at 06:36
  • I'm understanding you. I'm just answering your question. In your code that's in your question you are trying to stretch the image to the button's bounds by doing: `myButton.imageView!.contentMode = .ScaleAspectFill`. I'm showing you the way how to do that :). If you don't want to stretch the image, and fill the button without changing ratio of your image, then, you should resize/crop the image to the button's size. And could you please edit your question to be more clear?? – Fahri Azimov Dec 12 '14 at 06:40
  • No, while I appreciate your help, your implementation does `UIViewContentModeScaleToFill` which is not what I'm looking for, and is clearly mentioned in the question. I want the image stretched with `UIViewContentModeScaleAspectFill`. I even show an example of what it should look like. – Doug Smith Dec 12 '14 at 06:44
  • oh, I'm sorry, I missed that :) I will edit my answer. – Fahri Azimov Dec 12 '14 at 06:47