2

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.

Mark
  • 33
  • 1
  • 1
  • 5

4 Answers4

3

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.

Jonathan.
  • 53,997
  • 54
  • 186
  • 290
  • 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 Feb 07 '11 at 23:26
  • 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. Feb 08 '11 at 08:07
  • I ended up subclassing UIbutton, works pretty well but moving things around is a pain – Mark Feb 08 '11 at 18:49
  • 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 – Jonathan. Feb 08 '11 at 18:56
  • Thanks...this one helped me ! and sure +1 – Jayprakash Dubey Dec 12 '13 at 09:44
1

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

ThePunisher
  • 410
  • 1
  • 4
  • 14
1

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

Aurum Aquila
  • 9,126
  • 4
  • 25
  • 24
  • but... out of curiosity, how do you add a UIImage and UILabel to a UIButton within Interface Builder? – Mark Feb 07 '11 at 23:27
  • 1
    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. – Aurum Aquila Feb 08 '11 at 05:32
  • 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. Feb 08 '11 at 08:09
  • 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. – Aurum Aquila Feb 08 '11 at 08:20
0

Create a new initially transparent bitmap drawing context, draw your image to the top and text to the bottom. Then make a new image from this drawing context, and use that new image for the button.

hotpaw2
  • 70,107
  • 14
  • 90
  • 153