在Xcode Storyboard中使用可拉伸的图像

我正在使用故事板布局我的视图控制器,我想为我的button使用可拉伸图像(以便我不需要生成具有不同大小的几个图像)。

这可能直接在故事板上做,而不写任何代码? 我真的很喜欢使用故事板的所有graphics的东西的可能性,并保持代码从UI的东西干净,但似乎我不能在这里摆脱它。

如果不可能的话,你会有什么build议呢?

iOS 7+更新
iOS 7+现在通过资产目录本地支持可伸缩图像。 使用资产目录,您现在可以指定图像如何切片以及如何缩放(拉伸或平铺)。 这些图片的资产目录属性将立即反映在故事板中。 伟大的新的改进。 有关更多信息,请参阅资产目录上的Apple文档

在7之前部署到iOS版本:
这是一个鲜为人知的事实,但是您可以使用Interface Builder / Storyboard和属性检查器中的拉伸属性来绝对地设置图像的大小写。 感谢维克多原来的答案。

查看UIImage属性检查器中的拉伸属性,X和Y值是拉伸起点的位置,相对于图像的整个宽度和高度。 0.5的值将意味着图像中间的一个点。

宽度和高度是相对于图像尺寸的可拉伸区域的尺寸。 因此,将宽度设置为1 / imageWidth的值会将可拉伸区域设置为1px宽。

大多数可拉伸的图像将从中间伸展,因此使用这些X,Y,宽度和高度的值通常会起作用:

 X = 0.5 Y = 0.5 Width = 1/imageWidth Height = 1/imageHeight 

注意:除非您有一个非常小的图像,否则这意味着宽度和高度属性将非常小(例如0.008),可以使用0.0。 所以,实际上0.5,0.5,0.0,0.0几乎总是适用于X,Y,宽度和高度。

在0.0对宽度和高度不起作用的less数情况下,这意味着您需要使用计算器来在IB中设置这些值。 不过,我认为这通常比以编程方式进行设置要好,因为您可以在IB(所见即所得)中看到生成的拉伸图像。

可伸缩的图像属性

更新:有人指出,虽然使用上述build议拉伸图像在故事板中起作用,但是button上的图像拉伸仍然被破坏,即使是iOS7也是如此。 不用担心,这可以通过创build一个UIButton类来解决,这个类可以为控制状态设置cap insets:

 @implementation UIButton (Stretchable) /* Automatically set cap insets for the background image. This assumes that the image is a standard slice size with a 1 px stretchable interior */ - (void)setBackgroundImageStretchableForState:(UIControlState)controlState { UIImage *image = [self backgroundImageForState:controlState]; if (image) { CGFloat capWidth = floorf(image.size.width / 2); CGFloat capHeight = floorf(image.size.height / 2); UIImage *capImage = [image resizableImageWithCapInsets: UIEdgeInsetsMake(capHeight, capWidth, capHeight, capWidth)]; [self setBackgroundImage:capImage forState:controlState]; } } 

使用这个类别,你可以通过Storyboard为你的button设置可拉伸的图像,然后通过在你的-viewDidLoad调用-setBackgroundImageStretchableForState:来轻松确保它的伸展。 迭代您的视图层次结构,即使对于视图中的大量button,也可以做到这一点。

 NSPredicate *predicate = [NSPredicate predicateWithFormat:@"self isKindOfClass:%@",[UIButton class]]; NSArray *buttons = [self.view.subviews filteredArrayUsingPredicate:predicate]; for (UIButton *button in buttons) [button setBackgroundImageStretchableForState:UIControlStateNormal]; 

虽然这不像有一个UIButton子类会自动为你做这样的事情(子类化UIButton是不实际的,因为它是一个类集群),它只是给你几乎相同的function,只是在你的一些样板代码viewDidLoad – 你可以在Storyboard中设置你的所有button图像,并且仍然可以让它们正确拉伸。

使用Xcode 6(和iOS7 +目标)时,可以在处理图像资源时使用切片编辑器。 使用编辑器切换切片模式– >显示切片菜单,或者在使用编辑器select特定图像时按下显示切片button(如下所示)。

显示切片按钮

然后,您可以select特定显示比例的图像并拖动规则或手动编辑插入值。

规则

之后,您可以在Interface Builder中select这个图像。 例如,我用它的UIButton 背景图像 (IBbutton的表示可能看起来不好,但它应该是正常运行时)。

我的button看起来不错(运行iOS 7.1模拟器和iOS 8设备)。

在这里输入图像说明

这个苹果文档链接可能会有所帮助。

在XCode的5.0界面生成器中使用资产目录是可行的。 创build图片资源(如果您还没有资产目录,则可以创build一个资源目录,如下所示:

  1. File – > New – > File – > Resources – > Asset Catalog
  2. 然后Editor – > New Image Set
  3. 为每个IdiomScale设置图像
  4. 然后点击“ Show Slicingbutton,根据需要设置切片。

检查苹果文档在这里: 开发人员苹果:资产目录帮助然后,所有你需要做的是设置button的背景图像作为请求的资产。

编辑:我忘了提及,它只适用于iOS7中的工作

这是我做的:我为button设置了一个sockets并将其连接,然后在viewDidLoad中执行此操作:

 [self.someButton setBackgroundImage:[[self.someButton backgroundImageForState:UIControlStateNormal] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 4, 3)] forState:UIControlStateNormal]; 

这样就可以重复使用在故事板中设置的图像,所以如果将其从一种颜色更改为另一种颜色,则只要插入内容不会改变,就会起作用。

对于有许多这些东西的观点,我这样做了:

 for (UIView * subview in self.view.subviews) { if ([subview isKindOfClass:[UIImageView class]] && subview.tag == 10) { UIImageView* textFieldImageBackground = (UIImageView*)subview; textFieldImageBackground.image = [textFieldImageBackground.image stretchableImageWithLeftCapWidth:7 topCapHeight:5]; } else if([subview isKindOfClass:[UIButton class]] && subview.tag == 11) { UIButton * button = (UIButton*)subview; [button setBackgroundImage:[[button backgroundImageForState:UIControlStateNormal] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 4, 3)] forState:UIControlStateNormal]; } } 

请注意,我为所有需要拉伸的标签设置了标签。

我和你在同一条船上,我希望能够在故事板上设置这些非常基于UI的东西。

使用“Xcode切片”function可以指定图像的可resize的中心区域的尺寸,并可以select指定结束图像,即图像中不应被可resize的区域填充的区域。 请参阅关于资产目录