How do I prevent a button's background image from stretching?

Question

I'm allocating a UIButtonTypeCustom UIButton to a UIView with a background image that is smaller than the button's frame. Reason why the image is smaller is because I'm trying to add more of a "target area" for the UIButton. However, the image is being scaled to the full size of the frame, rather than just being the image's size.

I have tried setting the UIButton and UIButton's imageView contentMode property to "UIViewContentModeScaleAspectFit", but no luck, the image still gets stretched out.

Is there a way to do what I'm trying to do programmatically?

Thanks in advance!

Answer 1

A lot of people make the same mistake you do in regards to button images and then jump through hoops trying to make the button behave as they expect it to. Let's clear this up once and for all:

A UIButton has two types of images it can display -- a foreground image and a background image. The background image for a button is expected to replace the button's background texture. As such, it makes sense that it stretches to fill the entire background. However, the button's foreground image is expected to be an icon that may or may not display alongside text; it will not stretch. It may shrink if the frame is smaller than the image, but it will not stretch. You can even set the alignment of the foreground image using the Control alignment properties in Interface Builder.

A button's foreground and background image can be set in code like this:

// stretchy [self setBackgroundImage:backgroundImage forState:UIControlStateNormal];    // not stretchy [self setImage:forgroundImage forState:UIControlStateNormal];  

Answer 2

You don't have access to the background imageView, but there is fully working workaround:

EDIT: There is an even better workaround then what I posted originally. You can create a UIImage from any color, and call -setBackgroundImage:forState.

See bradley's answer, here: https://stackoverflow.com/a/20303841/1147286

---

Original answer:

Instead of calling -setBackgroundImage:forState:, create a new UIImageView and add it as a subview of the button.

UIImageView *bgImageView = [[UIImageView alloc] initWithImage:img]; bgImageView.contentMode = UIViewContentModeScaleAspectFit; [bgImageView setFrame:CGRectMake(0, 0, videoButton.frame.size.width, videoButton.frame.size.height)]; bgImageView.tag = 99; [yourButton addSubview:bgImageView]; [yourButton bringSubviewToFront:yourButton.imageView]; 

1. Create the imageview
2. Set the content mode and frame
3. I also set a recognizable tag, so that when the screen rotates I can easily find my custom imageView in the button's subviews and reset its frame
4. Add it as a subview to the button
5. Bring the frontal imageView of the button to the front so our custom imageView doesn't overlap it

When the button needs to rotate just find the imageView by its tag and reset its frame:

UIImageView *bgImageView = (UIImageView *)[button viewWithTag:99]; [bgImageView setFrame:CGRectMake(0, 0, newWidth, newHeight)];