How to add text and image to an UIButton

Question

I want to add a UIButton. However, i need the following items displayed on it.

enter image description here

First of all i need to display some text, then a small image then again some text followed by an image as shown in the above diagram. How am i able to do this ?

Also, i need to know if this adheres to apples UI guidelines. If not please suggest how am i suppose to do this ? (May be use a label instead)

Code

button= [UIButton buttonWithType: UIButtonTypeRoundedRect];
button.frame = CGRectMake(210, 285, 100, 18)];
//[button setTitle:@"Show View" forState:UIControlStateNormal];
[button
 addTarget:self action:@selector(addProjectPressed:) forControlEvents:UIControlEventTouchUpInside];

Miknash · Answer 1 · 2015-03-23T18:22:40.357

2

I would suggest you to create custom UIButton, and there add UILabels and UIImageViews to button.

Please be aware that you are allowed to add as much elements to button as you want since UIButton is subclass of UIView (this is possible only through the code, not through Interface Builder).

Another option would be to create custom UIView and then add these elements as well as gestures to collect ones for pressing the button etc.

Also, if this button is one-time-only then you can do this in your view controller.

To add any element to UIButton all you have to do is:

[myButton addSubview:particularSubview]

If you have three labels and two images, repeat the process five times.

Keep in mind that you should init UI elements with frame, so they don't overlap:

UILabel *ll = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 15, 20)];

first parameter is x, second is y, third is width and forth is height.

edited Mar 23 '15 at 18:22

answered Mar 23 '15 at 12:12

Miknash

7,888
3
34
46

Can show me an example how to add a UILable and a UIImageView to a button. Sorry i am a beginner. – Illep Mar 23 '15 at 16:02
Edited, hope it helps now :) – Miknash Mar 23 '15 at 18:22
I am also using autolayout. If so will this go out of the frame ? – Illep Mar 24 '15 at 02:12
Well you should set intristic size for button, and I think you will be good. After all, if you subclass from button, you can use that particular class without autolayout. – Miknash Mar 24 '15 at 08:27

giorashc · Answer 2 · 2015-03-23T12:17:15.653

0

Not sure if you can do it with a native UIButton but you can subclass UIView and create the elements in this view. Then just override the - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event method to detect when the entire view (aka button) has been pressed

as other answers suggest you can also subclass UIButton (giving you the tapping gesture oob)

edited Mar 23 '15 at 12:17

answered Mar 23 '15 at 12:13

giorashc

13,691
3
35
71

1

Yes, you can add all kinds of views to UIButton since it is subclassed from UIView. One particular example would be adding UIActivityIndicator to the button :) – Miknash Mar 23 '15 at 12:14

score 0 · Answer 3 · answered Mar 23 '15 at 12:13

0

You can use the new feature introduced by Apple, IBDesignable and IBInspectacle properties (I wrote a basic tutorial here but you can find lots of sample on GitHub).

As a starting point, subclass UIButton with your own class and add the components you need manually.

answered Mar 23 '15 at 12:13

sweepy_

1,333
1
9
28

I can add a view to the button as you suggested, but then `autolayout` will cause a problem trying to place the components in the right position. – Illep Mar 23 '15 at 17:02

score 0 · Answer 4 · edited May 23 '17 at 12:12

0

The simplest way to create buttons with image is

-(void)createButton:(NSString *)text atPos:(CGPoint)pos{
    UIImage *image=[UIImage imageNamed:@"image.png"];

    UIButton *button=[UIButton buttonWithType:UIButtonTypeCustom];
    [button setBackgroundImage:image forState:UIControlStateNormal];
    [button setTitle:text forState:UIControlStateNormal];

    //it is important to use image size same for the frame if you are setting image in background mode..
    [button setFrame:CGRectMake(pos.x, pos.y, image.size.width, image.size.height)];
    [self.view addSubview:button];
}

Then call it where you want to position it.

[self createButton:@"Text" atPos:CGPointMake(0, 0)];

However you can try set edge inset too for the solution

See here to get some idea.

Hope it helps.

Cheers.

edited May 23 '17 at 12:12

Community

1
1

answered Mar 23 '15 at 12:18

iphonic

12,615
7
60
107

yeah, but then you have to create image that is width as button. since question is about positioning views as follows: T-I-T-I-T ( T- text, I - image). After that you would have to left white spaces so the text won't override the images – Miknash Mar 23 '15 at 12:23
If he is using the image shown in the question, he can easily use solid colors and design it using `Views, and Label` – iphonic Mar 23 '15 at 12:26
True that, but I think these are used only for example – Miknash Mar 23 '15 at 12:28

How to add text and image to an UIButton

4 Answers4