如何拉伸UIImageView而不拉伸中心？

Question

我想拉伸上面顯示的圖片的左側和右側，並保持中間的箭頭未拉伸。我怎樣才能做到這一點？

Answer 1

使用Photoshop或其他圖像編輯工具將圖像分成兩部分：邊緣和中心。邊緣圖像可以是一個像素寬，用於左邊緣和右邊緣;然而該中心很多像素寬度可以捕捉箭頭。然後可以將三個UIImageView實例彼此相鄰：左邊緣，中心和右邊緣。左右邊緣被調整到所需的寬度，而中心保持其原始尺寸。

Answer 2

（沒有太大的幫助，但在相反的支持：拉伸圖像的中心和保持邊緣部分相同的尺寸：見Stretching an UIImage while preserving the corners。）

煮了自己的解決方案，你可以可否創建一個包含三個部分的組件：左圖像，中央圖像，右圖像。然後，通過確保中心部分保持相同寬度，同時左/右部分（圖像）伸展，處理組件尺寸更改。

替代策略：創建一個組件，兩個圖像堆疊在一起。下面的圖像是扁平條（無三角形），並水平延伸以填充可用空間。上面的圖像是三角形的中心部分，並以可用空間爲中心。這會產生你正在尋找的效果。

此外，還有一個應用程序（不是免費的！），可幫助您創建具有可伸縮性質的精美組件：PaintCode。

Answer 3

如果你不喜歡打擾Photoshop，如果圖像沒有動態調整大小，你可以在UIImage上使用我的分類方法。

名爲「17maA.png」的示例圖像爲124像素寬。所以，你可以很容易地創建一個300像素寬的版本與此：

UIImage *image = [UIImage imageNamed:@"17maA"]; 
UIImage *newImage = [image pbResizedImageWithWidth:300 andTiledAreaFrom:10 to:20 andFrom:124-20 to:124-10]; 

這是類方法：

- (UIImage *)pbResizedImageWithWidth:(CGFloat)newWidth andTiledAreaFrom:(CGFloat)from1 to:(CGFloat)to1 andFrom:(CGFloat)from2 to:(CGFloat)to2 { 
    NSAssert(self.size.width < newWidth, @"Cannot scale NewWidth %f > self.size.width %f", newWidth, self.size.width); 

    CGFloat originalWidth = self.size.width; 
    CGFloat tiledAreaWidth = (newWidth - originalWidth)/2; 

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(originalWidth + tiledAreaWidth, self.size.height), NO, self.scale); 

    UIImage *firstResizable = [self resizableImageWithCapInsets:UIEdgeInsetsMake(0, from1, 0, originalWidth - to1) resizingMode:UIImageResizingModeTile]; 
    [firstResizable drawInRect:CGRectMake(0, 0, originalWidth + tiledAreaWidth, self.size.height)]; 

    UIImage *leftPart = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(newWidth, self.size.height), NO, self.scale); 

    UIImage *secondResizable = [leftPart resizableImageWithCapInsets:UIEdgeInsetsMake(0, from2 + tiledAreaWidth, 0, originalWidth - to2) resizingMode:UIImageResizingModeTile]; 
    [secondResizable drawInRect:CGRectMake(0, 0, newWidth, self.size.height)]; 

    UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    return fullImage; 
} 

Answer 4

我們可以使用下面的代碼圖像伸展： - 在這裏我們需要的箭頭標記部分必須是相同的大小，所以我們舒展箭頭開始下面的中間部分（假設它會在2 PX）

UIImage *image = [UIImage imageNamed:@"img_loginButton.png"]; 
    UIEdgeInsets edgeInsets; 
    edgeInsets.left = 0.0f; 
    edgeInsets.top = 2.0f; 
    edgeInsets.right = 0.0f; 
    edgeInsets.bottom = 0.0f; 
    image = [image resizableImageWithCapInsets:edgeInsets]; 
//Use this image as your controls image 

Answer 5

Klaas的答案真的幫助編我，同樣在雨燕3.0：

static func stretchImageSides(image: UIImage, newWidth: CGFloat) -> UIImage? { 
    guard image.size.width < newWidth else { 
     return image 
    } 

    let originalWidth = image.size.width 
    let tiledAreaWidth = ceil(newWidth - originalWidth)/2.0; 

    UIGraphicsBeginImageContextWithOptions(CGSize(width: originalWidth + tiledAreaWidth, height: image.size.height), 
              false, image.scale) 

    let firstResizable = image.resizableImage(withCapInsets: UIEdgeInsets(top: 0, 
                      left: 0, 
                      bottom: 0, 
                      right: originalWidth - 3), 
               resizingMode: .stretch) 
    firstResizable.draw(in: CGRect(x: 0, y: 0, width: originalWidth + tiledAreaWidth, height: image.size.height)) 

    let leftPart = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 

    UIGraphicsBeginImageContextWithOptions(CGSize(width: newWidth, height: image.size.height), 
              false, image.scale) 

    let secondResizable = leftPart?.resizableImage(withCapInsets: UIEdgeInsets(top: 0, 
                       left: tiledAreaWidth + originalWidth - 3, 
                       bottom: 0, 
                       right: 0), 
               resizingMode: .stretch) 
    secondResizable?.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: image.size.height)) 

    let fullImage = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 

    return fullImage 
} 

• 你只需要提供的圖像，與期望的新寬度，它會做橫向拉伸爲您服務。