UIButton背景图片stretchableImageWithLeftCapWidth:topCapHeight问题

Question

我有一个指定宽度为200的UIButton。它的autoresizingMask属性设置为UIViewAutoresizingFlexibleWidth。一个UIImage被应用到这个按钮的backgroundImage属性上。这个UIImage的定义如下:

[[UIImage imageNamed:@"buttonimage.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0]

buttonimage.png的宽度为400px（由于视网膜分辨率是按钮宽度的两倍），代表一个圆角矩形。在竖屏模式下，一切都很好。但是当用户旋转设备并iPhone进入横屏模式时，UIButton被拉伸了。由于这种行为，图像的左侧圆角边框保持不变（使用stretchableImageWithLeftCapWidth:），但右侧角也被拉伸了。是否有任何我忘记设置的属性，可确保只有指定像素（例如第十个像素）被拉伸，其他任何东西都保留其尺寸？

提前致谢！

编辑：如果我使用一个更小的图像，在纵向模式下已经被拉伸，那么两个边框似乎都会扩展。

问题已解决！ 如果您的图像名为“myImage.png”，并且它是视网膜版本，只需将其命名为“[e-mail]”即可。

- fscheidl

---

你应该提供非Retina尺寸的buttonimage.png，以及一个名为[e-mail]的Retina尺寸的第二个版本。也许这可以解决你的问题。 - Nick Weaver

这种行为在非Retina和支持Retina分辨率的设备上都会发生。如果我理解正确，[e-mail]文件是仅由具有Retina分辨率的设备访问的唯一文件，因此这不会有任何区别。如果我错了，请纠正我。 - fscheidl

好的。我尝试了一个简单的例子，发现有一个有趣的效果，当我将左侧的帽子设置为像3px这样的小量时，它会沿着整个按钮涂抹这一部分，而其余部分则正确地对齐到右侧。在横向模式下也是如此。我的按钮图像大小为50x50，当我将左侧的帽子设置为21px时，正好在圆角之后，即使在横向模式下也看起来不错。也许需要一些尝试和错误？ - Nick Weaver

我现在添加了一个非视网膜版本的按钮，突然它就可以工作了。谢谢。 - fscheidl

Answer 1

请问我是否忘记设置某个属性，以确保只有一个指定的像素（例如第十个像素）被拉伸，而其他所有像素保留其尺寸？

实际上没有这样的属性，但考虑到您的图像大小，您应该重新阅读leftCapWidth属性。

可拉伸图像的工作原理是：您提供左端点，下一个像素被拉伸，图像的右侧宽度为 width = (total width - left cap + 1) 保持不变。由于您将左端点设置为10，而原始图像的宽度为400，因此您告诉iOS您的图像的右侧不可拉伸部分为400-10-1=389px。垂直方向也是同样的道理。请检查是否在没有@2x后缀的普通设备上使用了@2x图像，或者2x版本的像素数量不是正好两倍，或者存在大小写差异。您可以通过nslog加载的图像大小来找出这一点。

我不知道为什么你的图片右侧被拉伸了。考虑到你设置了height=0，如果按钮高度发生变化，整张图片可以在竖直方向上被拉伸，但这很少会导致只有右侧出现扭曲。

- Jano

---

我现在添加了一个非视网膜版本的按钮，突然间它就起作用了。你指引了我走向了正确的方向。 - fscheidl

Answer 2

据我所知，你的代码没有问题，不应该导致图片右侧被裁剪。下面是我使用的确切代码，我知道它可以产生你想要的效果。

UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 245, 51)];
button.autoresizingMask=UIViewAutoresizingFlexibleWidth;
[button setBackgroundImage:[[UIImage imageNamed:@"userbubble.png"] stretchableImageWithLeftCapWidth:40 topCapHeight:0] forState:UIControlStateNormal];
[self.view addSubview:button];

我的猜测是你使用的png格式可能出了问题，或者是你项目中的压缩PNG文件设置有误。另外，由于你使用的图片过大，请尝试将左侧的裁剪位置向外放置，比如说40或50像素。

- Sam

---

这是我使用的确切代码。我刚刚尝试了一下较小的图像，奇怪的是，两个边框都稍微被拉伸了。（无论是横向还是纵向模式） - fscheidl

尝试给左侧留出更大的空白（比如说图片的50%），如果仍然看起来奇怪，请检查应用程序目标和项目设置下的“压缩PNG文件”选项。关闭它并查看是否有所不同。 - Sam

尝试了两个选项。仍然没有区别。我上传了我的按钮图像。也许你能发现你的userbubble.png和我的图片之间的区别。(微笑) - fscheidl

我已经将你的按钮添加到我的Xcode项目中，并且它完美地工作了，所以问题一定是来自其他地方。UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(10, 10, 91, 86)]; [button setBackgroundImage:[[UIImage imageNamed:@"buttonImage.png"] stretchableImageWithLeftCapWidth:40 topCapHeight:0] forState:UIControlStateNormal]; - Sam

你只使用了@2x按钮吗？很奇怪。正如我之前所添加的，我现在使用非Retina和@2x版本的按钮，它可以工作。我感谢你的努力。非常感谢！ - fscheidl

如果您使用 UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(10, 10, 91, 43)];，并且图像文件的高度是框架大小的两倍，则显然您还需要一个非Retina版本。嗯... - fscheidl