在保留角落的同时拉伸UIImage

Question

我正在尝试拉伸导航箭头图像,同时保留边缘,以便中间伸展并且末端固定.

这是我试图伸展的图像:

以下iOS 5代码允许在调整大小时图像拉伸UIEdgeInsets定义的图像的中心部分.

[[UIImage imageNamed:@"arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 7, 15, 15)];

这会导致图像看起来像这样(如果图像的帧设置为70像素宽):

这实际上是我想要的,但resizableImageWithCapInsets仅在iOS 5及更高版本上受支持.

在iOS 5之前,唯一类似的方法是stretchableImageWithLeftCapWidth:topCapHeight,但是您只能指定顶部和左侧插图,这意味着图像必须具有相同的形状边缘.

是否有iOS 4方式调整图像大小与iOS 5的resizableImageWithCapInsets方法相同,或其他方式？

Answer 1

你的假设是错误的:

在iOS 5之前,唯一类似的方法是stretchableImageWithLeftCapWidth:topCapHeight,但是您只能指定顶部和左侧插图,这意味着图像必须具有相同的形状边缘.

帽子的计算如下 - 我将逐步穿过左帽,但同样的原则适用于顶帽.

假设您的图像宽度为20px.

• 左帽宽度 - 这是图像左侧无法拉伸的部分.在该stretchableImage方法中,您为此发送值10.
• 可伸缩部分 - 假设宽度为一个像素,因此它将是"11"列中的像素,因为需要更好的描述
• 这意味着图像的剩余9px有一个隐含的右上限 - 这也不会失真.

这取自文档

leftCapWidth

端盖指定图像在拉伸图像时不应调整大小的部分.该技术用于实现按钮和其他可调整大小的基于图像的界面元素.当调整带有端盖的按钮时,调整大小仅发生在按钮的中间,在端盖之间的区域中.端盖本身保持其原始尺寸和外观.

此属性指定左端盖的大小.假设中间(可伸展)部分是1个像素宽.因此,通过将左端盖和中间部分的尺寸相加,然后从图像的宽度中减去该值来计算右端盖:

rightCapWidth = image.size.width - (image.leftCapWidth + 1);

Answer 2

UIImage *image = [UIImage imageNamed:@"img_loginButton.png"];
    UIEdgeInsets edgeInsets;
    edgeInsets.left = 0.0f;
    edgeInsets.top = 0.0f;
    edgeInsets.right = 5.0f; //Assume 5px will be the constant portion in your image
    edgeInsets.bottom = 0.0f;
    image = [image resizableImageWithCapInsets:edgeInsets];
//Use this image as your controls image

Answer 3

stretchableImageWithLeftCapWidth:topCapHeight:左帽上限为15（显然，通过阅读代码即可），您的示例完全可以实现。通过重复中间一列，可以水平拉伸按钮。