使用resizableImageWithCapInsets：image for button仅适用于状态集，其他状态显示“gap”。 [英] Using resizableImageWithCapInsets: image for button only works for the state set, other states show a "gap"

问题描述

当使用resizableImageWithCapInsets：为UIButton创建图像时，只有正常状态（使用setBackgroundImage设置图像的状态：forState :)才有效。所有其他状态显示间隙而不是绘制的图像。 UIButton表示如果没有为特定状态设置图像，则正常状态图像将与覆盖一起用于禁用和选择状态。

When using resizableImageWithCapInsets: to create an image for a UIButton only the normal state (the state set the image with using setBackgroundImage:forState:) works. All other states show a gap instead of the drawn image. UIButton says that if no image is set for a particular state, the normal state image will be used with an overlay for disabled and selected states.

这是正常状态：

以下是选定状态：

这是源图像：

它显然正在使用可调整大小的图像我提供了，但图像没有绘制调整大小的区域。 （你可以看到左边和右边，但是没有绘制正在拉伸的中间区域。）

It clearly is using the resizable image I provided, but the image is not drawing the resized area. (You can see the left and right edges but the middle area that is to be stretched just isn't drawn).

有趣的是，stretchableImageWithLeftCapWidth：topCapHeight：确实有效。现在这是iOS 5中不推荐使用的方法，但由于新API中显示了差距，我可能会被卡住使用。

Interestingly, stretchableImageWithLeftCapWidth:topCapHeight: does work. Now this is a deprecated method in iOS 5, but with the gap being shown in the new API, I may be stuck using it.

我确实认识到我可以提供每个州都有更多的图像，但是这样做的目的是为了减少内存占用，并且增加了对我想要避免的图形设计器的依赖。

I do recognize that I can provide more images for each state but that defeats the purpose I'm trying to achieve of reducing memory footprint plus adds extra dependency on my graphics designer which I'd like to avoid.

// This is the gist of the code being used
UIImage* image = [UIImage imageNamed:@"button.png"];
UIEdgeInsets insets = UIEdgeInsetsMake(image.size.height/2, image.size.width/2, image.size.height/2, image.size.width/2);
image = [image resizableImageWithCapInsets:insets];
[self.button setBackgroundImage:image forState:UIControlStateNormal];
// Even doing the following results in the same behaviour
[self.button setBackgroundImage:image forState:UIControlStateSelected];

推荐答案

您没有为图像正确创建插图封盖。我已经复制了你的问题，并使用正确的插图来纠正它。

You aren't creating your insets properly for the image capping. I've reproduced your issue and corrected it by using the correct insets.

使用当前代码，你创建的图像高度和宽度的一半 - 这留下你有一个0x0像素的可伸缩区域 - 所以你不会在中间得到任何东西。

With your current code, you are creating caps of half of the image height and width - this leaves you with a "stretchable" area of 0x0 pixels - so you get nothing in the middle.

为什么在按钮的正常状态下没有显示错误我不确定 - 如果你不提供可伸缩的图像，也许UIButton内置一些优化来修复内容或自动拉伸，这并不适用于其他状态。

Why this isn't showing up as wrong in the normal state of the button I'm not sure - perhaps there is some optimisation built in to UIButton to fix things or auto-strectch if you don't supply a stretchable image, and this is not applied to the other states.

上限应该定义不得拉伸的图像区域。对于button.png图像，左侧和右侧为6像素，顶部和底部为16像素。这不是很标准，你应该告诉你的图形设计师（至少左右，这是最常见的拉伸）你应该只在中心有1px区域，但这不会影响结果。如果你有一个1px的可伸缩区域，那么你可以通过从你在你的问题中尝试的图像大小中获取大写来标准化你的代码（每个上限是（image.size.height - 1 ）/ 2 顶部/底部，相同但左/右宽度。）

The caps are supposed to define the area of the image that must not be stretched. In the case of your button.png image, this is 6 pixels on the left and right sides, and 16 pixels in from the top and bottom. This isn't quite standard, you should tell your graphics designer that (at least for left-right which is the most common stretching) you should only have a 1px area in the centre, however this does not affect the outcome. If you do have a 1px stretchable area then you can standardise your code by deriving the caps from the image size as you have tried to do in your question (each cap is then (image.size.height - 1) / 2 for top/bottom, same but with width for left/right).

要在按钮上获得正确的图像，请使用以下用于创建可伸展图像的代码：

To get the correct images on your button, use the following code for creating the stretchable image:

UIEdgeInsets insets = UIEdgeInsetsMake(16, 6, 16, 6);
image = [image resizableImageWithCapInsets:insets];

这篇关于使用resizableImageWithCapInsets：image for button仅适用于状态集，其他状态显示“gap”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！