How to let a UIImage only stretch in a specific area?

Question

var contentImageView: UIImageView!{
    didSet{
        contentImageView.image!.resizableImageWithCapInsets(UIEdgeInsets(top: 5,left: 5,bottom: 5,right: 5))
    }
}
         


        

Answer 1

You can use the method

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;

capInsets is a specific area(e.g. UIEdgeInsetsMake(10, 18, 10, 18)), resizingMode should select UIImageResizingModeStretch .

UIImage *image = [[UIImage imageNamed:@"bubble.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 18, 10, 18) resizingMode:UIImageResizingModeStretch];
bubbleImageView.image = image;

Answer 2

There is a sleek option in Xcode .xcassets. You can select the images and slice it from there so that it's strechable in specific parts only below are the images please explore this option.

1. For your purpose just select the middle option (slice vertically and horizontally) for chat bubble.

2. After Slicing.

3. Top Image is image with slicing. Bottom image is image without slicing.

Borrowed Bhavin's Image for demonstration :D