iphone - Image not resizing using CapInsets correctly

Question

I have created a singup button as follows:

signupButton = [[UIButton alloc] initWithFrame:CGRectMake(10,(facebookLoginButton.bounds.size.height + 40),300,50)];
signupButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
UIImage *signupButtonImage = [[UIImage imageNamed:@"Signup"]
                              resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
[signupButton setBackgroundImage:signupButtonImage forState:UIControlStateNormal];

The frame for the button is 300x50 per the above. I have created an image (for Retina devices) as 22(w)x100(h)px.

The image is 22 pixels which includes 10px rounded corners and 2px which are for the repeatable middle section.

I have tried to implement the stretch per the above code with insets as 0,10,0,10 but this does not stretch as expected.

Can someone explain what the insets should be? Also how to work these out, I cannot find any useful information on how to actually calculate what the insets should be? I have read the Apple documentation on this, but I do not understand how to work these out.

Answer 1

Your image has size 22x100 but it is a retina image.

That means the point size is 11x50.
The insets should be UIEdgeInsetsMake(5.0f, 5.0f, 5.0f, 5.0f)

Answer 2

Create stretchable Image using following code and assign it to respective UIImageView

UIImage *bgImage = [[UIImage imageNamed:@"Signup"] stretchableImageWithLeftCapWidth:10 topCapHeight:10];

you need to calculate TopCap and LeftCap of your 9 patch image properly. Good luck.