0

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.enter image description here enter image description here enter image description here

Gruntcakes
  • 37,738
  • 44
  • 184
  • 378

3 Answers3

2

Use button type = UIButtonTypeCustom

msk
  • 8,885
  • 6
  • 41
  • 72
0

Rather than using a Rounded Rectangle button type, set the button type to UIButtonTypeCustom. This will do as you want, in that it will wrap the button around the image you provide it.

glenn sayers
  • 2,414
  • 2
  • 17
  • 18
  • Thanks, I've tried that but it doesn't display the same. I've added some pictures to the posting, the top one is how it appears if I set the .png to the image, the bottom one is how it appears if I set it to the background image with the type set to custom. – Gruntcakes Jul 19 '12 at 15:52
  • Is the first image also with the button type set to custom? – glenn sayers Jul 19 '12 at 15:55
  • The first one is with the .png set as the image and not as the background image, it looks like that regardless if the type is custom or rounded rect. – Gruntcakes Jul 19 '12 at 15:57
  • What's wrong with setting your .png as the image property of the button? Is your text going to be static? If so, you could add the text to the image, via PS. – ohr Jul 19 '12 at 15:58
  • The text might change, also it'll make localization a bit more of a hassle as I'll have to ask the designer to create buttons for each language. – Gruntcakes Jul 19 '12 at 16:00
  • Agreed, have you tried [this](http://stackoverflow.com/questions/4344847/iphone-sdk-uibutton-with-both-image-and-text-possible)? – ohr Jul 19 '12 at 16:02
  • I haven't tried any programmatical solutions yet. I'll do that if necessary but I want to first try to understand why its not working with IB. – Gruntcakes Jul 19 '12 at 16:05
  • The image is set above the text, that is why you don't see it. That's why there is a backgroundImage property. – ohr Jul 19 '12 at 16:06
  • How come the background image is not appearing accurately if the type of button is set to custom? i.e. why is there a difference in appearance between setting the image and the background, why don't they look the same? – Gruntcakes Jul 19 '12 at 16:13
0

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:.

Andreas Ley
  • 9,109
  • 1
  • 47
  • 57
  • In IB I did set the dimensions of the button to those of the .png size, but seems like I'll have to give up IB and do it in code (I need to support 4, 5 and 6). – Gruntcakes Jul 19 '12 at 16:39
  • If the dimensions of the .png really are identical to the ones of the `UIButton`, the corners should look right - unless your picture actually looks like this... – Andreas Ley Jul 19 '12 at 16:44