UIButton with Picture and Text

Question

I'm trying to make a button that basically mimics the buttons seen on the iphone's home screen - it has a picture placed vertically above some text, and both are part of the button and behave appropriately (dim, clickable, etc) when highlighted.

I've tried putting the picture or the text into its own frame but that doesn't work because whichever is in the new frame doesn't dim with the rest of the button.

Using the background image property doesn't work because I want the image above the text - the area behind the text should be transparent. I would REALLY prefer a programming solution instead of going in and editing all my pictures.

Solution 1

Create a subclass of UIView, and have a UIImageView and UILabel as subviews, and position them appropriately using code.

You'd then have the UIImageView and UILabel as properties so that you could access them, like this:

myCustomButton.imageView.image = [UIImage imageNamed:@"..."];
myCustomButton.textLabel.text = @"...";

Or you could probably find a 3rd Party custom UIView, on the internet on github or something.

Solution 2

Jonathan's idea is a good one, but if you're only doing it with a couple images it's not worth the trouble. You can create a UIImage and a UILabel and then place them inside a UIButton in interface builder.

Still, it's always a good idea to learn about powerful features like subclassing.

Good luck,

Aurum Aquila

Solution 3

do this:

UIButton *btn_chat = [UIButton buttonWithType:UIButtonTypeCustom];
btn_chat.frame = CGRectMake(40, 50, 100, 30);//CGRectMake(20, 20, 200, 72);
UIImage *image = [UIImage imageNamed:@"chat.png"];
CGSize newSize = CGSizeMake(30, 30);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext();
[btn_chat setImage:newImage forState:UIControlStateNormal];
btn_chat.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
[btn_chat setTitle:@"Chat" forState:UIControlStateNormal];
btn_chat.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
btn_chat.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[btn_chat addTarget:self action:@selector(menuSelection:) forControlEvents:UIControlEventTouchUpInside];
[btn_chat setTag:1001];
[self.view addSubview:btn_chat];

and it's done :)

Comments

[Mark]

haven't gotten to try this yet, but would this react like a button normally? (would both the image and the text "dim" or "gray out" when the button is being clicked?) What's the proper way of getting the new subclass of UIView into the button?

[Mark]

but... out of curiosity, how do you add a UIImage and UILabel to a UIButton within Interface Builder?

[Aurum Aquila]

I should have been more clear - You create the image and the label and then you hover a UIButton over it. You then change the type of the UIButton to custom. Then, it'll accept touch events but you won't be able to see it.

[Jonathan.]

You'd have to do the dimming yourself. Its possible you could subclass UIButton rather than UIView in which you probably wouldn't have to.

[Jonathan.]

So your saying to just put a clear button over the image and label. So that if you were to move the button then the image and label wouldn't. You might think me biased but that doesn't sound too good.

[Jonathan.]

He might as well edit his images himself and save doing it every time the button is created.

[Aurum Aquila]

It's the quick and dirty method. If you're going to be using this more than once, subclass. But if you're just doing it as a one off thing it's fine. You're right to have suspicions about it, it's a little bit unmaintainable if you have more than one. But if you just want to get something done it's fine.

[hotpaw2]

Can't pre-edit if the text and image are independent. Or if one has a zillion images.

[Mark]

I ended up subclassing UIbutton, works pretty well but moving things around is a pain

[Jonathan.]

I've come up with a need for an icon button such as this, if I get time I'll make one that can be used in other projects and put it on github or something

[Jayprakash Dubey]

Thanks...this one helped me ! and sure +1