Jak rozciągnąć UIImageView bez rozciągania centrum?

Question

chcę rozciągnąć lewej i prawej strony na zdjęciu pokazanym powyżej, i zachować Strzałka Bliski rozciągnięty. Jak mogę to zrobić?

Answer 1

Użyj programu Photoshop lub innego narzędzia do edycji obrazu, aby podzielić obraz na dwie części: krawędź i środek. Obraz krawędzi może mieć szerokość jednego piksela i być używany dla lewej i prawej krawędzi; środek ma jednak wiele pikseli, które przechwytują strzałę. Następnie możesz umieścić trzy instancje UIImageView obok siebie: lewą krawędź, środek i prawą krawędź. Prawa i lewa krawędź są przesuwane do pożądanej szerokości, a środek zachowuje oryginalne wymiary.

Answer 2

(Niewiele pomaga, ale nie ma wsparcia dla przeciwnego: rozciąganie centrum fotografowanego obrazu i utrzymanie części krawędziowych tej samej wielkości: patrz Stretching an UIImage while preserving the corners.)

gotować własne rozwiązanie, można mogła utwórz komponent zawierający trzy części: lewy obraz, środkowy obraz, prawy obraz. Następnie zajmujesz się zmianami rozmiaru komponentu, upewniając się, że środkowa część pozostaje tej samej szerokości, podczas gdy lewy/prawy komponent (obrazy) rozciągają się.

Alternatywna strategia: utwórz komponent, który składa się z dwóch obrazów ułożonych jeden na drugim. Niższy obraz jest płaskim barem (bez trójkąta) i rozciąga się poziomo, aby wypełnić dostępną przestrzeń. Górny obraz jest środkową częścią trójkąta i jest wyśrodkowany w dostępnej przestrzeni. Dałoby to efekt, którego szukasz.

Istnieje również aplikacja (nie za darmo!), Która pomaga tworzyć ładne komponenty o elastycznych właściwościach: PaintCode.

Answer 3

Jeśli nie lubisz zawracać sobie głowy Photoshopem i jeśli obraz nie ma dynamicznej zmiany rozmiaru, możesz użyć mojej metody kategorii na UIImage.

Twój przykładowy obraz o nazwie "17maA.png" ma szerokość 124 px. Dzięki czemu można łatwo stworzyć 300 px szeroki wersję z tym:

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

Jest to metoda kategoria:

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

możemy rozciągnąć obraz za pomocą poniższego kodu: - Tutaj musimy strzałkę znak część musi być w tym samym rozmiarze, więc rozciągnąć środkową część poniżej początku znaku strzałka (zakładam, że będzie 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 „s odpowiedź naprawdę pomóc ed mnie, tak samo w 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 
} 

• Wystarczy dostarczyć zdjęcie, z żądanym nową szerokość, będzie to zrobić poziome rozciąganie dla Ciebie.