如何将文本和图像添加到UIButton

Question

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

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];

Answer 1

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.

Answer 2

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)

Answer 3

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.

Answer 4

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.