UIButton backgroundImage stretchableImageWithLeftCapWidth：topCapHeight问题

Question

I have a UIButton with a specified width of 200. Its autoresizingMask property is set to UIViewAutoresizingFlexibleWidth . A UIImage is applied to this button's backgroundImage property. This UIimage is defined as follows:

[[UIImage imageNamed:@"buttonimage.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:0]

buttonimage.png has a width of 400px (2x width of button, because of retina resolution) and represents a rounded rectangle. In portrait mode, everything is fine. As soon as the user rotates the device and the iPhone enters landscape mode, the UIButton is stretched. Due to this behaviour, the left rounded border of the image stays the same ( stretchableImageWithLeftCapWidth: ) but the right corners are also stretched. Is there any property I forgot to set that ensures only one specified pixel (eg the tenth one) is stretched and anything else retains it dimensions?

Thanks in advance!

Edit: If I use a smaller image, that is already stretched in portrait mode, both borders seem to be expanded.

Solved! If your image is called "myImage.png" and it is the retina version, just call it "myImage@2x.png"

Answer 1

Is there any property I forgot to set that ensures only one specified pixel (eg the tenth one) is stretched and anything else retains it dimensions?

Not really, but given the size of your images, you should re-read the leftCapWidth property.

The way stretchable images work is: you provide the left cap, the next pixel is stretched, and the right side of the image with width = (total width - left cap + 1) stays the same. Given that you are setting left cap to 10, and the original image is 400, you are telling iOS that the right non stretchable right side of your image is 400-10-1=389px . The same thing applies vertically. Check if you are using @2x images on a normal device without a @2x on its name, or if the 2x versions don't have exactly twice the pixels, or there is an uppercase/lowercase difference. You can find this out nslogging the size of the image loaded.

I don't know why the right side of your image is stretched. Given that you have height=0 , the whole image can be stretched vertically if the button height changes, but it's unlikely that this causes a distortion of only the right side.

Answer 2

There is nothing wrong with your code as far as I can tell, that should be causing the right side of the image to be cropped. Below is the exact code I use, which I know works, to produce the same effect you're looking for.

UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 245, 51)];
button.autoresizingMask=UIViewAutoresizingFlexibleWidth;
[button setBackgroundImage:[[UIImage imageNamed:@"userbubble.png"] stretchableImageWithLeftCapWidth:40 topCapHeight:0] forState:UIControlStateNormal];
[self.view addSubview:button];

My guess is that the problem is coming from the png you're using, or possibly from the Compress PNG Files setting in your project. Also, since the image you are using is so big, try putting the left cap out further, say 40 or 50 pixels in.