ChatGPT解决这个技术问题 Extra ChatGPT

Why does a custom UIButton image does not resize in Interface Builder?

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?

I found that though it doesn't scale the image in IB it does scale the image in runtime.
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/…

t
teabot

While this may not be quite what you're after - the background image does scale.


If I put the image in the background, I get the correct behavior so you solved it, thanks.
If you are unwilling to use the background image (because say you want to use different images for different states), you need set the alignment property. See: stackoverflow.com/questions/1957317/…
what if you want it to scale to fit? then background image, which scales to fill, would not be appropriate
This saved my life (at least couple hours of it)
ah, so not the image, but the background image. I will forget my name before forgetting this.
a
alexjrlewis

Try this:

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

In Swift:

button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill

You saved my day! Bravo .. Also make sure button type is custom
Worked for me - XCode 8, Swift 3, UIButton created by storyboard, vector/PDF image as button image
This should be the accepted answer – setting the image as background gives a different behavior. E.g., it doesn't let you control the touch area (which, in case of a content image can be bigger than the image itself).
d
drpawelo

Remember to set Control Alignment settings for the button

https://i.stack.imgur.com/t4615.png


J
JP Illanes

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

doesn't work for me :-( My images are still not stretched to fill the button width and height
Doesn't work on iOS8. Tried setting it before and after adding image to button. self.button1.imageView.contentMode = UIViewContentModeScaleAspectFill; Tried scaleAscpetFill and scaleToFill, no go. Cao Huu Loc's solution does work.
S
Sandip Patel - SM

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;


Funny, in the XIB viewer it doesn't look scaled. In fact it blows up the button to a larger size, but then at run-time it's scaled to the size it ought to be.
M
Md Imran Choudhury

Inside Attribute Inspector first set Type "Custom" and Style "Default" then Set alignment Horizontal and Vertical both "fill".

https://i.stack.imgur.com/pvqUn.png


This answer helped me today
This is the correct answer in 2022, none of the other answers work correctly anymore.
G
George Filippakos

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

Perfect answer! Thanks.
n
nicksarno

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

button.contentVerticalAlignment = .fill button.contentHorizontalAlignment = .fill does the job, thanks
D
Dshutsi

Try setting the Clip subviews property in Interface Builder to true.

Hope that helps.


Alas, that did not. Thanks for trying to help, though.
M
Menno

The best solution I found so far in Swift 2.1 is the following:

self.imageButton.imageView?.clipsToBounds = true
self.imageButton.imageView?.contentMode = UIViewContentMode.ScaleAspectFit

This will scale the image so it has an aspect fit in the imageView.


R
Rene

Just get a real UIimageview and place a UIbutton on top of it and via layout menu set it to back. Then you can scale your image properly.