iOS - Interface Builder: UIButton title disappears when setting image

Question

I have made a project previously where I set a UIButton to have both text and also an image (in interface builder).

I have created another project and I want to achieve the same thing, but when I set the button to have an image, the title disappears (it's not getting hidden behind the image).

I can't seem to figure out why this is so if anyone could shed some light on this subject I'd appreciate it!

Thanks.

Solution 1

Change your button to custom type. put the image on then put the text in.

You will need to put your own background on it, but at that point you will be able to use the edge settings to position both the text and the image.

Every button that I have with image and text is set to custom and ultimately has its own bg image as well.

Oh, another thing I use. Is the cornerRadius. To give the view the rounded effect like the buttons have by default.

saveButton.layer.cornerRadius = roundingNumber.floatValue;

Additionally you should be able to use the borderWidth and borderColor in conjunction with cornerRadius to get a button that looks quite similar to the original button

saveButton.layer.borderRadius = 1.0f;
saveButton.layer.borderColor = [[UIColor blueColor] CGColor];
// These are not the exact values (or maybe they are) but you get the idea.

hope that helps.

Correction

After Spending a little time investigating, it appears that when you put an image in the button. the text is shoved off to the right.

Use the edge settings to bring it back over the image.

With the button selected, Look in "Attributes Inspector" > Button > Edge > (Dropdown "Title")

the equasion I have come up with is

[Edge inset for Title] Left = -(imageWidth * 2)

This should Left align your title with the image that you have put in.

Custom positioning will need to be done to make it look correct.

This can be done entirely in the Interface Builder and you can use RoundedRect button style

Here are some images demonstrating the change.

Here I set the Button type to "Custom" to remove the border and background.

Here I set the Top and Left in the Edge set for "Title" (Title is an option in the drop down)

EDIT

Newest Xcode has moved the size settings to a new location

Solution 2

Just put the image in the background field instead. This way the text will appear in front of the image.

Comments

[Grant J]

I'm afraid that's not the problem in this case. I can get it to have an image as the background and also text, but I want a background, and image, and text.

[rooster117]

Oh I gotcha. I would recommend just putting an imageview as one of the pieces. So have the background as an image, lay the button on top and also have the text.

[AntonPalich]

I think this is right answer. And dont forget to use setImage:forState and setTitle:forState.

[The Lazy Coder]

Added you some visual aids. Hope that helps.

[nicksuch]

Had a similar issue with disappearing button label in Xcode 5 / iOS 7. Simply changing Type: System to Type: Custom solved it for me. Thanks!

[mokagio]

Works here as well. Thanks :)

[oarfish]

This will also stretch the image over the entire button frame.

[Zoltán]

So Xcode 8 moved insets into the Size Inspector (CMD+ALT+5), took me a while to find it.

[The Lazy Coder]

Good info. Its been a while since I was in iphone, but thats a great update. I have edited my post.