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

Question

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. — an0, Dec 10 '09 at 07:26
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: http://stackoverflow.com/questions/2658738/the-simplest-way-to-resize-an-uiimage/2890200#2890200 — iwasrobbed, May 22 '10 at 23:58

score 96 · Accepted Answer · answered Jun 30 '09 at 11:06

96

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

answered Jun 30 '09 at 11:06

teabot

15,088
9
62
78

If I put the image in the background, I get the correct behavior so you solved it, thanks. – willc2 Jun 30 '09 at 11:40
3

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: http://stackoverflow.com/questions/1957317/how-do-i-scale-a-uibuttons-imageview/8179900#8179900 – Chris Nov 18 '11 at 08:59
2

what if you want it to scale to fit? then background image, which scales to fill, would not be appropriate – user102008 Jun 13 '12 at 18:33
This saved my life (at least couple hours of it) – Adam Jun 15 '18 at 09:19
1

ah, so not the image, but the *background image.* I will forget my name before forgetting this. – Daniel Springer Jun 26 '19 at 19:28
Yes, this was the answer I was waiting for, great, thanks! – Miroslav Maksimovic Feb 20 '22 at 22:25

score 69 · Answer 2 · edited Dec 18 '18 at 09:18

69

Try this:

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

In Swift:

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

edited Dec 18 '18 at 09:18

alexjrlewis

2,717
3
24
58

answered Oct 15 '14 at 07:17

Cao Huu Loc

1,509
15
17

You saved my day! Bravo .. Also make sure button type is `custom` – Hyder Jun 12 '17 at 06:50
Worked for me - XCode 8, Swift 3, UIButton created by storyboard, vector/PDF image as button image – xaphod Jul 15 '17 at 17:53
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). – lazarevzubov Dec 13 '21 at 06:50

score 60 · Answer 3 · answered Dec 13 '16 at 16:33

60

Remember to set Control Alignment settings for the button

answered Dec 13 '16 at 16:33

drpawelo

1,980
19
14

score 13 · Answer 4 · answered Jun 17 '13 at 04:11

13

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

answered Jun 17 '13 at 04:11

JP Illanes

3,615
43
56

doesn't work for me :-( My images are still not stretched to fill the button width and height – Orion Edwards Sep 16 '14 at 10:36
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. – Martin Berger Apr 06 '15 at 16:43

score 11 · Answer 5 · answered Sep 11 '15 at 08:26

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. — Joe C, Oct 26 '15 at 16:53

score 10 · Answer 6 · answered Dec 14 '21 at 13:28

10

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

answered Dec 14 '21 at 13:28

Md Imran Choudhury

8,089
4
53
55

This answer helped me today – Dilip Agheda Dec 24 '21 at 08:00
This is the correct answer in 2022, none of the other answers work correctly anymore. – Jon C Feb 02 '22 at 23:31

George Filippakos · Answer 7 · 2017-05-20T01:10:08.700

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

score 2 · Answer 8 · answered Apr 18 '20 at 17:53

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 — Tai Le, Nov 11 '20 at 03:49

score 0 · Answer 9 · answered Jun 30 '09 at 11:33

0

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

Hope that helps.

answered Jun 30 '09 at 11:33

Dshutsi

451
3
8

Alas, that did not. Thanks for trying to help, though. – willc2 Jun 30 '09 at 11:42

score -1 · Answer 10 · answered Feb 05 '16 at 08:11

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.

score -6 · Answer 11 · answered Mar 05 '10 at 11:09

-6

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.

answered Mar 05 '10 at 11:09

Rene

1

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

11 Answers11

From Design

From Code

Linked