UIButton上的iOS可伸缩图像显示了不稳定的角落

Question

好的人,

我到处搜索过,似乎无法找到解决问题的方法.

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

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

我尝试过创建几种不同尺寸的图像,但我做的一切似乎都没有用.

我知道帽子应该是均匀的,我加上1像素中间伸展.

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

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

角落只是不匹配,看起来奇怪地拉伸和按钮增长高度!

我知道stretchableImagewithLeftCapWidth已被弃用,但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个切片.如果你想看到这个可能看起来像的图像,请看一下本页的"可缩放区域"部分(注意,它适用于Android,但概念是相同的.Android刚刚开始这样做).你会注意到四条线穿过图像.这些将对应于您的四个插图.所以你的九个部分,从左到右,从上到下将是:

1. X:0 - >左边插入,Y:0 - >顶部插入
2. X:左侧插入 - >(宽度 - 右侧插入),Y:0 - >顶部插入
3. X :(宽度 - 右边插入) - >宽度,Y:0 - >顶部插入
4. X:0 - >左侧插入,Y:顶部插入 - >(高度 - 底部插入)
5. X:左侧插入 - >(宽度 - 右侧插入),Y:顶部插入 - >(高度 - 底部插入)
6. X :(宽度 - 右边插入) - >宽度,Y:顶部插入 - >(高度 - 底部插入)
7. X:0 - >左侧插入,Y :(高度 - 底部插入) - >高度
8. 左侧插入 - >(宽度 - 右侧插入),Y :(高度 - 底部插入) - >高度
9. X :(宽度 - 右边插入) - >宽度,Y :(高度 - 底部插入) - >高度

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