在Xcode故事板中使用可伸缩的图像

Question

我正在使用故事板来布置我的视图控制器,我想为我的按钮使用可伸缩的图像(这样我就不需要生成几个不同大小的图像).

这可以直接在故事板中直接进行,而无需编写任何代码吗？我真的很喜欢将故事板用于所有图形内容的可能性,并保持代码清洁UI的东西,但似乎我无法在这里摆脱它.

如果不可能,你会建议什么呢？

Answer 1

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

对于在7之前部署到iOS版本:
这是一个鲜为人知的事实,但您只能使用Interface Builder/Storyboard和属性检查器中的拉伸属性来设置图像的上限.感谢Victor的原始答案.

查看a的属性检查器中的拉伸属性UIImage,X和Y值是拉伸起始点相对于图像的整个宽度和高度的位置.值0.5表示图像中间的一个点.

宽度和高度是可伸展区域相对于图像大小的大小.因此,将宽度设置为1/imageWidth的值会将可伸展区域设置为1px宽.

大多数可伸缩图像将从中间伸展,因此使用X,Y,Width和Height的这些值通常可以起作用:

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不适用于宽度和高度,这意味着您需要使用计算器在IB中设置这些值.但是,我认为这通常比必须以编程方式设置它更好,因为您将能够在IB(WYSIWYG)中看到生成的拉伸图像.

更新:有人指出尽管使用上述建议在Storyboard中拉伸图像仍然有效,但是按钮上的拉伸图像仍然会被破坏,即使是iOS7也是如此.不用担心,通过创建一个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];
    }
}

使用这个类,你可以设置你的拉伸图像通过故事板的按钮,然后轻松地确保它通过调用适当的伸展-setBackgroundImageStretchableForState:你的-viewDidLoad.通过视图层次结构迭代使得即使对于视图中的大量按钮也可以执行此操作:

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因为它是一个类集群而不实用),但它确实给你几乎相同的功能,只需要你的viewDidLoad中的一些样板代码 - - 您可以在故事板中设置所有按钮图像,并仍然可以使它们正确拉伸.

Answer 2

使用Xcode 6(和iOS7 +目标),您可以在处理图像资源时使用切片编辑器.使用编辑器 - >显示切片菜单切换切片模式或在使用编辑器选择特定图像时按下显示切片按钮(如下所示).

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

之后,您可以在Interface Builder中选择此图像.例如,我将它用于UIButton 背景图像(IB按钮的表示可能看起来很糟糕,但运行时应该没问题).

我的按钮看起来很好(运行iOS 7.1模拟器和iOS 8设备).

这个Apple doc 链接可能会有所帮助.

Answer 3

它在XCode的5.0 Interface Builder中可以与资产目录一起使用.创建图像资源(如果您还没有资产目录,可以按如下方式创建一个:

1. File- > New- > File- > Resources- >Asset Catalog
2. 然后Editor- >New Image Set
3. 为每个Idiom&设置图像Scale
4. 然后按下Show Slicing按钮以根据需要设置切片.

在此处查看Apple文档:开发人员Apple:资产目录帮助 然后,您所要做的就是将按钮的背景图像设置为请求的资产.

编辑:我忘了提到它只在iOS7中工作