在Xcode故事板上使用可拉伸图像

Question

我正在使用情节提要来布局我的视图控制器，并且我想对按钮使用可拉伸的图像（这样就不必生成多个具有不同大小的图像）。

这可以直接在情节提要中完成而无需编写任何代码吗？ 我真的很喜欢在所有图形内容中使用情节提要并保持UI内容中代码干净的可能性，但是似乎我无法在这里解决它。

如果不可能的话，您有什么建议呢？

Answer 1

适用于iOS 7+的更新
iOS 7+现在通过资产目录原生支持可拉伸图像。 现在，您可以使用资产目录指定如何切片图像以及如何缩放图像（拉伸或平铺）。 这些图像的资产目录属性将立即反映在情节提要中。 巨大的新改进。 有关更多信息，请参阅资产目录上的Apple文档。

对于7之前的iOS版本：
这是一个鲜为人知的事实，但是您可以仅使用Interface Builder / Storyboard以及属性检查器中的Stretching属性来绝对设置图像的大写插入。 感谢Victor的原始答案。

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

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

大多数可拉伸图像将从中间拉伸，因此通常将以下X，Y，Width和Height值使用：

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

注意：除非您要拉伸的图像非常小，否则这意味着width和height属性将非常小（例如0.008），而可以使用0.0。 因此，实际上，对于X，Y，宽度和高度，几乎总是可以使用0.5、0.5、0.0、0.0。

在少数情况下，宽度和高度0.0无效，这的确意味着您需要使用计算器在IB中设置这些值。 但是，我认为通常比以编程方式设置它更可取，因为您将能够在IB（WYSIWYG）中看到生成的拉伸图像。

更新：有人指出，尽管使用上述建议在Storyboard中可以拉伸图像，但是即使在iOS7上，也无法在按钮上拉伸图像。 不用担心，可以通过创建UIButton类别轻松解决此问题，该类别负责设置控件状态的上限插入：

@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设置按钮的可拉伸图像，然后通过在-viewDidLoad调用-setBackgroundImageStretchableForState:轻松确保其正确拉伸。 遍历视图层次结构，即使对于视图中的大量按钮也很容易做到这一点：

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文档链接可能会有所帮助。

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中按需工作

Answer 4

这是我做的：我为按钮设置一个插座并连接它，然后在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为中心的内容。

Answer 5

使用Xcode切片功能可以指定图像可调整大小的中心区域的尺寸，并可以选择指定端盖，它们是图像中不应由可调整大小的区域填充的区域。 请参阅关于资产目录