UIButton backgroundImage stretchableImageWithLeftCapWidth: topCapHeight problem

Question

I have a UIButton with the specified width of 200. The autoresizingMask property is autoresizingMask to UIViewAutoresizingFlexibleWidth . The UIImage attribute is applied to this backgroundImage button. This UIImage is defined as follows:

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

buttonimage.png has a width of 400 pixels (2x the width of the button, due to the resolution of the retina) and is a rounded rectangle. In portrait mode, everything is in order. As soon as the user rotates the device and the iPhone enters landscape mode, UIButton stretched. Due to this behavior, the left rounded border of the image remains unchanged ( stretchableImageWithLeftCapWidth: , but the right corners are also stretched. Is there any property that I forgot to set to ensure that only one specified pixel (for example, the tenth) is stretched, and everything else retains its size?

Thanks in advance!

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

Solved! If your image is called "myImage.png" and this is the retina version, just name it " [e-mail] "

Answer 1

Is there any property that I forgot to set that provides only one specified pixel (for example, the tenth) is stretched and everything else retains its size?

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

Working with expandable images: you provide the left cover, the next pixel is stretched, and the right side of the image with width = (total width - left cap + 1) remains unchanged. Given that you set the left cover to 10 and the original image to 400, you tell iOS that the right non-stretchable right side of your image is 400-10-1=389px . The same applies to the vertical. Check if you are using @ 2x images on a regular device without @ 2x on its name, or if the 2x versions do not have exactly two times as many pixels or there is a difference in upper and lower case. You can find this without uploading the size of the uploaded image.

I do not know why the right side of your image is stretched. Given that you have height=0 , the entire image can stretch vertically if the height of the button changes, but it is unlikely that it will distort only the right side.

Answer 2

There is nothing wrong with your code, as far as I can tell, this should result in cropping the right side of the image. Below is the exact code that I am using, which I know works to get the same effect you are 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]; 

I assume that the problem comes from the png you are using, or possibly from the Compress PNG Files parameter in your project. Also, since the image you are using is so large, try adding the left cover further, say, 40 or 50 pixels.