Question

I’ve got a button created in photoshop which is already the exact size to use for displaying.

In IB I created a RRB and set the background image to the button .png. However this doesn’t display properly – there is a white boarder between my .png button and the button provided by IB, especially at the corners which must have a different radius. I’ve tried playing with all the various setting in IB but couldn’t get it to go away.

However if instead of setting the .png to the background image I set it to the image then it looks perfect (what is the difference between the image and the background image?).
However I simply cannot get the button text to appear when the .png is set to the image as opposed to the background, though it does when the .png is set to the background image. Again I’ve tried setting all various settings in IB but cannot get the text to appear.

WHat am I doing wrong, what should I be doing to get it to work?

I know I could create the button and text programatically, but I want to understand why I can get it to work using IB.

EDIT:
I’ve changed the type to custom but it still doesn’t appear properly. See the images I’ve posted, the one without the text is how it should appear and what it looks like if I set the .png to the image rather than the background. The second one is what it looks like if I set the background image to the .png and set the type of button to custom. THe 3rd one is the background image set to the .png and the type as rounded rect.

Answer 1

It looks like your button background image doesn’t have the same dimensions as your UIButton.

iOS supports something called “strechable images”, allowing you to define which part of the image should be streched. Unfortunately, this can’t be done in Interface Builder. In code, you can do it like this:

-(void)viewDidLoad
{
    [super viewDidLoad];
    UIImage *stretchableImage = [[someButton backgroundImageForState:UIControlStateNormal] stretchableImageWithLeftCapWidth:5 topCapHeight:5];
    [someButton setBackgroundImage:stretchableImage forState:UIControlStateNormal];
}

IMPORTANT: stretchableImageWithLeftCapWidth:topCapHeight: is deprecated in iOS 5, but the only solution if you need to support iOS 4 as well. If you can go iOS 5 only, use resizableImageWithCapInsets:.