When UIButton content mode is "center," background image is pixelated - iphone

Question

Here's how I'm setting the background image and content mode:
[btn setBackgroundImage:[UIImage imageNamed:#"dots_game_horiz_blue.png"]
forState:UIControlStateNormal];
[btn setContentMode:UIViewContentModeCenter];
Is there a reason that the background image would be pixelated? The frame is slightly larger than the image size, and I just want the image to be centered.

Answer 1

I guess a background image is not considered to be "content" by the UIButton, so the content mode did not apply to the background image. Instead, I set the image of the button and it worked just fine:
[btn setImage:[[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"dots_game_horiz_blue" ofType:#"png"]] forState:UIControlStateNormal];
[btn setContentMode:UIViewContentModeCenter];

Answer 2

In your xib / storyboard, in the Attributes inspector, you need to:
Set your UIButton type to Custom
Set your image in the property Image, not Background
Validating step 2, you can see the button frame changed according to the image set. Set the frame as you want it to be, the image will resize itself to fit in
Select Image for the property Edge in order to apply inset to the button image
Enter inset values you need. If you set 5 to Top, Bottom, Left, Right, the image will be centered inside the button, with a border of 5
You can see the changes in the xib / storyboard view, no need to launch a debug.
Tip: Inset is the same for every images of the button (State Config)

Answer 3

You could also implement - (CGRect)backgroundRectForBounds:(CGRect)bounds to control how the background is drawn.

Answer 4

The correct solution is to change the type from System to Custom. Then the background image will honor the content type instead of just centering. In my case I set it to Aspect Fill and apply a 45 degree corner radius to round it. Simple and works perfectly.

Answer 5

I needed to create rounded buttons for avatar photos and found the answers to this question to help but they did not get me all of the way there. I implemented the backgroundRectForBounds method and scaled the image to fit and it works well.
I have the code on GitHub.
https://github.com/brennanMKE/CircleButton
The method is also listed below. It is important to set the background image and not the image for the button which does not work with this method.
- (CGRect)backgroundRectForBounds:(CGRect)bounds {
UIImage *backgroundImage = [self backgroundImageForState:self.state];
if (backgroundImage) {
CGFloat maxWidth = CGRectGetWidth(self.frame);
CGFloat xDelta = maxWidth / backgroundImage.size.width;
CGFloat yDelta = maxWidth / backgroundImage.size.height;
CGFloat delta = xDelta > yDelta ? xDelta : yDelta;
CGFloat x = floorf((self.bounds.size.width - (backgroundImage.size.width * delta)) / 2);
CGFloat y = floorf((self.bounds.size.height - (backgroundImage.size.height * delta)) / 2);
return CGRectMake(x, y, backgroundImage.size.width * delta, backgroundImage.size.height * delta);
}
else {
return [super backgroundRectForBounds:bounds];
}
}