Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 350
Ohad Regev Avatar asked Jan 03 '14 13:01

Ohad Regev


People also ask

What is the Mode content?

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.

What is the difference between UIImage and UIImageView?

UIImage contains the data for an image. UIImageView is a custom view meant to display the UIImage . Save this answer.

What is UIImageView in Swift?

A view that displays a single image or a sequence of animated images in your interface.

How do you center an image in UIButton?

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 .


2 Answers

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!

like image 197
Matt Avatar answered Sep 19 '22 06:09

Matt


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];
        }
    }
like image 20
Hemant Chittora Avatar answered Sep 18 '22 06:09

Hemant Chittora