13

Is there a way to set a UIButton Image, BackgroundImage or ImageView Properties Content Mode Property?

I've tried the direct approach (it didn't work, of course...):

self.imageButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

It's nice to have a button with an image, but if there's no way to set it properly, it's not very handy...

Ohad Regev
  • 5,641
  • 12
  • 60
  • 84
  • "The value of the property is nil for system buttons." from Apple Development library. – KudoCC Jan 03 '14 at 13:54
  • 1
    Another way I have approached such problems in the past is to create a UIImageView, add my picture in it and then on top of UIImageView I add a custom blank UIButton. When user touches the image, he's actually touching the button. That way I have more control over image and its properties. – Sam B Jan 03 '14 at 14:35

3 Answers3

32

Using iOS7/8 with auto-layout, button.imageView doesn't get scaled when button is laid out, e.g. for iPhone 6:

(lldb) po button
<UIButton: 0x7fb4f501d7d0; frame = (0 0; 375 275); opaque = NO; autoresize = RM+BM; tag = 102; layer = <CALayer: 0x7fb4f501d160>>

(lldb) po button.imageView
<UIImageView: 0x7fb4f51d21f0; frame = (0 0; 0 0); clipsToBounds = YES; hidden = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fb4f5152860>>

After setting button's image, button.imageView assumed the size of the image, e.g. for a 320x240 image:

(lldb) po button.imageView
<UIImageView: 0x7fb4f51d21f0; frame = (27.5 17.5; 320 240); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fb4f5152860>>

It looks like button.imageView does not respect its content mode, but actually, it is the size of the button.imageView that is the problem.

The answer is to set button's content alignment as well.

The following sets button's image, sets button.imageView's content mode, and makes button.imageView fit the size of button:

[button setImage:image forState:UIControlStateNormal];
button.imageView.contentMode = UIViewContentModeScaleAspectFill;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;

Now, button.imageView is the same size as button, and has the desired content mode.

(lldb) po button.imageView
<UIImageView: 0x7faac219a5c0; frame = (0 0; 375 275); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7faac219a6c0>>

The desired result is thereby achieved. Very handy!

Matt
  • 4,261
  • 4
  • 39
  • 60
  • This doesn't seem to work when setting a separate image for UIControlStateHighlighted – richy Jun 10 '15 at 12:19
  • set content mode to 'scale to fill' on image view and h & v alignments to 'fill' on the button. works in xamarin as well. – lnaie Jan 30 '16 at 18:27
2

if you don't want to subclass UIButton than you can try this,

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    for (UIView *view in button.subviews) {
        if ([view isKindOfClass:[UIImageView class]]) {
            [view setContentMode:UIViewContentModeScaleAspectFit];
        }
    }
Hemant Chittora
  • 3,152
  • 3
  • 19
  • 25
0

Every UIButton has one hidden UIImageView of its own. So we have to set the content mode like the way given below...

[[btn imageView] setContentMode: UIViewContentModeScaleAspectFit];
emraz
  • 1,563
  • 20
  • 28