objective-c 当 UIButton 内容模式为“居中”时，背景图像被像素化

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

提问by James Skidmore

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.

背景图像是否有像素化的原因？框架比图像尺寸略大，我只是想让图像居中。

回答by James Skidmore

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:

我猜背景图像不被 UIButton 视为“内容”，因此内容模式不适用于背景图像。相反，我设置了按钮的图像，它工作得很好：

[btn setImage:[[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"dots_game_horiz_blue" ofType:@"png"]] forState:UIControlStateNormal];
[btn setContentMode:UIViewContentModeCenter];

回答by Rémi Belzanti

In your xib / storyboard, in the Attributes inspector, you need to:

在您的 xib / 故事板中，在属性检查器中，您需要：

1. Set your UIButtontype to Custom
2. Set your image in the property Image, not Background
3. 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
4. Select Imagefor the property Edgein order to apply inset to the button image
5. 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

1. 将您的UIButton类型设置为Custom
2. 在属性中设置您的图像Image，而不是Background
3. 验证步骤 2，您可以看到按钮框架根据图像集发生了变化。根据需要设置框架，图像将自行调整大小以适应
4. 选择Image属性Edge以将插图应用到按钮图像
5. 输入您需要的插入值。如果将 5 设置为Top, Bottom, Left, Right，则图像将在按钮内居中，边框为 5

You can see the changes in the xib / storyboard view, no need to launch a debug.

您可以在 xib/storyboard 视图中看到更改，无需启动调试。

Tip: Inset is the same for every images of the button (State Config)

提示：按钮 ( State Config) 的每个图像的插图都相同

回答by Dan Grover

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

您还可以实现- (CGRect)backgroundRectForBounds:(CGRect)bounds控制背景的绘制方式。

回答by emkman

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.

正确的解决方案是将类型从 System 更改为 Custom。然后背景图像将尊重内容类型，而不仅仅是居中。在我的例子中，我将它设置为 Aspect Fill 并应用 45 度角半径来圆它。简单而完美。

回答by Brennan

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 backgroundRectForBoundsmethod and scaled the image to fit and it works well.

我需要为头像照片创建圆形按钮，并找到了这个问题的答案来提供帮助，但他们并没有让我一路走好。我实现了该backgroundRectForBounds方法并缩放图像以适应并且效果很好。

I have the code on GitHub.

我在 GitHub 上有代码。

https://github.com/brennanMKE/CircleButton

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