Why does a custom UIButton image not resize with the button?
I set its view mode to Scale to Fill in Interface Builder, but unlike a UIImageView image, it doesn't respect that setting.
Am I looking in the wrong place or is it not possible?
50
votes
I found that though it doesn't scale the image in IB it does scale the image in runtime.
– an0
that's not necessarily true... if you have 80x80pixel img with a 60x60 pixel button, it will scale the button to match the image size whereas a lot of people want the opposite (scale the image to match the smaller button size)... see my reply to this post for proper code to do this: stackoverflow.com/questions/2658738/…
– iwasrobbed
10 Answers
67
votes
Try this:
[button setImage:image forState:UIControlStateNormal];
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
In Swift:
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
13
votes
I know this is old, but I think that the correct answer is that you should set the content mode to the "hidden" UIImageView that is inside the UIButton:
button.imageView.contentMode = UIViewContentModeScaleAspectFill;
This will change the content mode for the images views of the images set with:
[button setImage:yourAwesomeImage forState:UIControlStateNormal];
//Or any other state
11
votes
Just do (From Design OR From Code):
From Design
- Open your xib OR Storyboard.
- Select button
- Inside Attribute Inspector (Right side) > In "Control" section > select last 4th option for both Horizontal and Verical.
[For Point#3: Change Horizontal and vertical Align to UIControlContentHorizontalAlignmentFill and UIControlContentVericalAlignmentFill]
From Code
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill; button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;
8
votes
Interface Builder
To get images in UIButtons to scale the same way as UIViews in interface Builder follow these steps:
Select your UIButton and from the Identity Inspector add the following to User Defined Runtime Attributes:
imageView.contentMode Number 1
Where number is the enum number of contentMode, eg:
0 = Scale to fill
1 = Aspect Fit
2 = Aspect Fill
etc..
Then open the Attributes editor for your UIButton and under Control set the Alignment to Fill (last button on right) for both horizontal and vertical.
SWIFT 3
Note you can also do this in code with the following:
button.imageView?.contentMode = .scaleAspectFit
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
2
votes
Updating this post will full answer for Swift 5:
//Set button's image
let image = UIImage(systemName: "heart.fill") //Your image here
button.setImage(image, for: .normal)
//Optional: Remove background image if you added one on accident
button.setBackgroundImage(nil, for: .normal)
//Optional: Set button's title (displayed next to button's image)
button.setTitle(nil, for: .normal)
//The button's "content" includes the title label and image
//So we set the button's content to fill the button
//If title label is nil, the content will only show the image
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
//Set button's image to desired content mode (aspectFit avoids distortion)
//This restricts the image from resizing to fill the entire content area
button.imageView?.contentMode = .scaleAspectFit
-1
votes
