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...
The content mode specifies how the cached bitmap of the view's layer is adjusted when the view's bounds change. This property is often used to implement resizable controls.
UIImage contains the data for an image. UIImageView is a custom view meant to display the UIImage . Save this answer.
A view that displays a single image or a sequence of animated images in your interface.
You must set the content mode for the image inside the UIButton. The solution is to update the contentMode of the Image when you are using a foreground image inside a button along with the contentMode of the UIButton .
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!
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];
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With