Làm thế nào để kéo dài UIImageView mà không kéo dài trung tâm?

Question

Tôi muốn kéo dài các cạnh bên trái và bên phải của hình ảnh được hiển thị ở trên và giữ mũi tên giữa không được mở rộng. Làm thế nào tôi có thể làm điều đó?

Answer 1

Sử dụng Photoshop hoặc công cụ chỉnh sửa hình ảnh khác để chia ảnh thành hai phần: cạnh và giữa. Hình ảnh cạnh có thể rộng một pixel và được sử dụng cho các cạnh trái và phải; trung tâm tuy nhiên có nhiều pixel rộng để chụp mũi tên. Sau đó, bạn có thể đặt ba trường hợp UIImageView cạnh nhau: cạnh trái, giữa và cạnh phải. Các cạnh trái và phải được thay đổi kích thước theo chiều rộng mong muốn, trong khi trung tâm giữ nguyên kích thước ban đầu của nó.

Answer 2

(Không có nhiều sự giúp đỡ, nhưng có hỗ trợ cho điều ngược lại: kéo dài trung tâm của hình ảnh và giữ các phần rìa cùng kích thước: xem Stretching an UIImage while preserving the corners.)

Để nấu lên giải pháp của riêng mình, bạn có thể có thể tạo thành phần chứa ba phần: hình ảnh bên trái, hình ảnh trung tâm, hình ảnh bên phải. Sau đó, bạn xử lý các thay đổi kích thước cho thành phần của mình bằng cách đảm bảo phần trung tâm vẫn giữ nguyên chiều rộng, trong khi các thành phần bên trái/phải (hình ảnh) kéo dài.

Chiến lược thay thế: tạo thành phần là hai hình ảnh xếp chồng lên nhau. Hình ảnh dưới là bit thanh phẳng (không có hình tam giác) và trải dài theo chiều ngang để lấp đầy khoảng trống có sẵn. Hình trên là phần trung tâm tam giác và được căn giữa trong không gian có sẵn. Điều này sẽ cho hiệu ứng bạn đang tìm kiếm.

Ngoài ra, có một ứng dụng (không miễn phí!) Giúp bạn tạo các thành phần đẹp với chất lượng có thể kéo dài: PaintCode.

Answer 3

Nếu bạn không thích làm phiền Photoshop và nếu hình ảnh không được thay đổi kích thước động, bạn có thể sử dụng phương pháp danh mục của tôi trên UIImage.

Hình ảnh mẫu của bạn có tên "17maA.png" rộng 124 px. Vì vậy, bạn có thể dễ dàng tạo ra một phiên bản rộng 300 px với điều này:

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

Đây là phương pháp loại:

- (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

Chúng tôi có thể kéo dài hình ảnh bằng cách sử dụng đoạn mã sau: - Ở đây chúng ta cần phải mũi tên phần đánh dấu phải có cùng kích thước để chúng tôi kéo phần giữa bên dưới mũi tên bắt đầu đánh dấu (giả sử nó sẽ 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 câu trả lời thực sự giúp ed tôi, cùng ở Swift 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 
} 

• Bạn chỉ cần cung cấp một hình ảnh, với mong muốn Width mới, nó sẽ làm ngang kéo dài cho bạn.