在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切片功能可以指定圖像可調整大小的中心區域的尺寸，並可以選擇指定端蓋，它們是圖像中不應由可調整大小的區域填充的區域。 請參閱關於資產目錄