ios - Resizing image using capinsets

Question

I have setup a button like this:

// Create facebook login button
facebookLoginButton = [[UIButton alloc] initWithFrame:CGRectMake(10, 20, 300,50)];
facebookLoginButton.autoresizingMask = UIViewAutoresizingFlexibleWidth;
//NSLog(@"facebook button view height is %f",facebookLoginButton.bounds.size.height);
//NSLog(@"facebook button view width is %f",facebookLoginButton.bounds.size.width);

UIImage *facebookButton = [[UIImage imageNamed:@"FacebookLogin"]
                           resizableImageWithCapInsets:UIEdgeInsetsMake(16,140,86,92)];
[facebookLoginButton setBackgroundImage:facebookButton forState:UIControlStateNormal];

I have created an image in Photoshop for the button which is 200(w)x100(h)px. Firstly would this be the correct size for the retina image used on an iphone4/5 for a button fitting into the login frame which is 50 in height? The other width does not matter as being stretched.

Secondly, below is an example image. I cannot seem to work out the correct insets for the 'resizableImageWithCapInsets:UIEdgeInsetsMake'. How do I work this out? Is there a tutorial anywhere on how to do this, other than the Android example I have seen linked from SO.

Answer 1

Since you are setting the frame of the button explicitly, and since you are creating your own image, you do not need a resizable image. Your button is 300 by 50 so make a 300 by 50 image (along with a 600 by 100 image for a double-resolution device) and set the background image of the button to it.

However, I'll also give a code example. For the image that you actually give, if you name it FacebookLogin@2x.png so that it is used as the double-resolution image, the value you want to use is resizableImageWithCapInsets:UIEdgeInsetsMake(0,50,0,50). Here is the result: