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

Solution 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]; 

Solution 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)];