6

I'd like to stretch a image with size 170x50 and show it in an image view with size 240x140. The original image looks like:

enter image description here

I want to keep the four corners and only stretch the center part. I use the following code:


    UIImage *originalImg = [UIImage imageNamed:@"ImageNamed"];
    UIImage *resizeImg = [originalImg resizableImageWithCapInsets:UIEdgeInsetsMake(20 ,10, 10, 10)];
    self.originalImgV.image = originalImg;
    self.resizedImgV.image = resizeImg;

Both originalImgV and resizedImgV are set to "aspect fill". I run it on the simulater, and the result is :

enter image description here

What I can't understand is: the resizedImgV has 2 arrows! Could any one tell me why and how can I use it correctly? Thanks

scorpiozj
  • 2,687
  • 5
  • 34
  • 60
  • resizableImageWithCapInsets functionality is sort of tiling, and while tiling the images are repeated. So it gives you the effect as if the image is repeated (2 cols). – yunas Sep 04 '13 at 05:15
  • @yuans, If the parameter is UIEdgeInsetsMake(30 ,10, 10, 10) which has a large top, it still has the same problem. I'm lost about it~ Cloud you help me? – scorpiozj Sep 04 '13 at 05:31

3 Answers3

14

Your issue is with the values you pass to UIEdgeInsetsMake. The values are top, left, bottom, right. Due to the arrow in the top left, you need to make sure your left value is big enough to go from the left edge of the image to just to the right of the arrow.

Given the image you posted, you want something like:

 UIEdgeInsetsMake(12, 32, 4, 4)

BTW - the image should only be left + right + 1 pixels wide and top + bottom + 1 pixels tall. So your image doesn't need to be nearly as big as it is.

rmaddy
  • 314,917
  • 42
  • 532
  • 579
  • You're right,Thanks! I still have the question: I set UIEdgeInsetsMake(30, 32, 4, 4) which the top, I think, is large enough to include the arrow. But why the result will have two arrows? – scorpiozj Sep 04 '13 at 05:13
  • Actually, I updated the values. The top needs to be 12, not 4. You should not be getting two arrows with the updated edge insets. Make sure you have two images - `bubble.png` (170x50) and `bubble@2x.png` (340x100). – rmaddy Sep 04 '13 at 05:29
  • BTW - you got two arrows with a left inset of 10 because that puts the arrow in the tiled part of the resizable image. – rmaddy Sep 04 '13 at 05:30
  • 1
    I suddenly realized that stretching is processed in the vertical direction and then in the horizontal direction(or vice versa). – scorpiozj Sep 04 '13 at 06:06
0

Stretching is processed in the vertical direction and then in the horizontal direction (or vice versa). So provide top & bottom offsets considering vertical direction that should not stretch and left & right offsets for horizontal direction.

Praveen Matanam
  • 2,773
  • 1
  • 20
  • 24
-2

Use this function, you can change the size of UIImage using this function.

+ (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

Hope this will help you.

Prashant Nikam
  • 2,253
  • 4
  • 17
  • 29