UIButton上的iOS Stretchable图像显示了不稳定的角落

Question

好的人，

我一直在搜索，似乎找不到解决我问题的方法。

我正在尝试使用相当大的图像作为按钮背景来获取UIButton的自定义外观并减少应用程序的整体大小，因为它似乎是正确的事情。

但是，当我尝试在按钮上设置图像时，按钮会看起来很奇怪，并且角落与常规UIButton的标准角半径不匹配。

我尝试过制作几种不同尺寸的图像，但我所做的一切似乎都无法使用。

我知道帽子应该是均匀的，我有加上1像素的中间位置。

我的UIButton高44。如果我创建的图像高44像素，宽21像素，并且与默认按钮（它喜欢阿司匹林caplet）具有相同的圆角半径，并设置我的背景图像：

UIImage *btnImage = [UIImage imageNamed:@"buttontest1.png"];
UIImage *newImg = [btnImage stretchableImageWithLeftCapWidth:10 topCapHeight:0];

角落不匹配，看起来奇怪地被拉伸，按钮长度增加！

我知道stretchchableImagewithLeftCapWidth已被弃用，但resizableCapWithInsets的使用对我来说更不合理，当我尝试这样做时，按钮图像似乎一遍又一遍地重复。

任何人都可以弄清楚我做错了什么吗？有没有简单解释这个废话的地方？我似乎无法得到它。

谢谢！ -TJ

编辑 - 使用resizableImageCapWithInserts添加图像以显示结果。它们不可能是典型的，因为我看到所有可能有效的例子，但这些例子对我来说都不适用。我只是想出了如何在这里添加图片，所以这可能会有所帮助。

这是PNP文件21px宽39px高

这是使用以下代码设置背景图像的结果：

[self.button1 setBackgroundImage:[[UIImage imageNamed:@"buttontest4.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)] forState:UIControlStateNormal];

根据我的理解，这应该按原样复制我21像素宽图像的左侧10像素和右侧10像素，并将中间的1个像素拉伸过来，看起来这样做但它也使我的按钮垂直变大我得到了这个奇怪的重复。它应该与旁边的BTN大小相同。

这是我的Xcode布局：

无论我使用什么图像，我都会看到类似的结果。

我显然没有在这里找点什么。

到目前为止，我很欣赏这些答案。它的雾度会略微降低。

TJ

EDIT2：使用cap insets方法显示样本，图像为21px×44px。

在故事板中设计时，所有4个按钮均为44px高。

如您所见，橙色按钮都比白色按钮大，用于比例缩放。

顶部按钮是button1，底部是button2。

通过使用UIImageResizingModeStretch的可选resizingMode参数，我找到了一种更接近它的方法。

但是，请注意按钮大于应有的按钮。

以下是设置按钮图像的代码。

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

[self.button1 setBackgroundImage:[[UIImage imageNamed:@"buttontest1a.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)] forState:UIControlStateNormal];

[self.button2 setBackgroundImage:[[UIImage imageNamed:@"buttontest1a.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10) resizingMode:UIImageResizingModeStretch]  forState:UIControlStateNormal];
}

使用（10,10,10,10）执行顶部图像会得到一个图像，它不像以前那样重复图像的顶部。我知道顶部图像没有使用可选的resize参数，因为这是一个测试，看看每个人得到了什么。

现在，让事情变得更复杂。如果我将我的顶部按钮大小设置为43，即比我的图像小一个像素，并使用可选的resize参数进行调用，除了我的按钮尺寸不合适之外，我得到了近乎完美的结果。

这到底是怎么回事？

我感谢所有试图通过厚厚的头骨砸出一些知识的人。 TJ

Answer 1

UIEdgeInsets有点难以理解，但 更现代的用法。我将解释它的工作方式。基本上，使用四个偏移，您将图像分成9个切片。如果你想看到这可能是什么样子的图像，请看this page的“可缩放区域”部分（注意，它适用于Android，但概念是相同的.Android只是这样做第一）。你会注意到四条线穿过图像。这些将对应于您的四个插图。所以你的九个部分，从左到右，从上到下将是：

1. X：0 - ＆gt;左插图，Y：0 - ＆gt;顶部插入
2. X：左侧插图 - ＆gt; （宽度 - 右边插入），Y：0 - >顶部插入
3. X :(宽度 - 右边插图） - ＆gt;宽度，Y：0 - >顶部插入
4. X：0 - ＆gt;左边插图，Y：顶部插图 - ＆gt; （高度 - 底部插图）
5. X：左侧插图 - ＆gt; （宽度 - 右侧插入），Y：顶部插入 - ＆gt; （高度 - 底部插图）
6. X :(宽度 - 右边插图） - ＆gt;宽度，Y：顶部插图 - ＆gt; （高度 - 底部插图）
7. X：0 - ＆gt;左边插图，Y :(高度 - 底部插图） - ＆gt;高度
8. 左侧插图 - ＆gt; （宽度 - 右边插入），Y :(高度 - 底部插入） - ＆gt;高度
9. X :(宽度 - 右边插图） - ＆gt;宽度，Y :(高度 - 底部插入） - ＆gt;高度

第1,3,7和9节已设定且不会拉伸 第2节和第8节仅水平拉伸 第4节和第6节仅垂直伸展 第5节将向两个方向伸展。

iOS 6中的新功能，您可以选择一种模式。您可以拉伸可拉伸的瓷砖，也可以重复它们以获得您想要的效果（颜色等应该拉伸，而纹理应该重复）。

Answer 2

尝试UIEdgeInsets

[button setBackgroundImage:[[UIImage imageNamed:@"buttontest1.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)] forState:UIControlStateNormal];

Answer 3

2016年的方式是在WWDC2016视频213中做到这一点：https://developer.apple.com/videos/play/wwdc2016-213/?time=1084 我们可以扩展资产。很抱歉这次只是一个链接;我稍后会提供更多细节。视频中的说明最多只需一两分钟。简而言之，我们使用Xcode的Asset Slicer工具来定义当图像用作UIButton的背景时图像的哪些部分不应被拉伸。 UIButton可以扩展到任何尺寸而不会扭曲圆边等。