iOS >> UIButton ImageView Property >> How to set Content Mode?

ios uiimageview uibutton contentmode
Ohad Regev picture Ohad Regev · Jan 3, 2014 · Viewed 8.5k times · Source

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...

Answer

Matt picture Matt · Jan 29, 2015

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!

Related questions

Using Tint color on UIImageView

I have my own subclass of UIButton. I add UIImageView on it and add an image. I would like to paint it over the image with a tint color but it doesn't work. So far I have: - (id)initWithFrame:(…

Read More
How do I prevent a button's background image from stretching?

I'm allocating a UIButtonTypeCustom UIButton to a UIView with a background image that is smaller than the button's frame. Reason why the image is smaller is because I'm trying to add more of a "target area" for the UIButton. However, …

Read More
UIButton inside UIImageView does not respond to taps

I have a scroll view, which has an image view with an image as a subview, and the image view has a UIButton as one of its subviews. The problem is, I am not able to click on the button. …

Read More