iPhone SDK: UIButton with both image and text possible?

0 votes
asked Dec 3, 2010 by viral-narshana

I have a button of size width 200 and height 270. I want to have text and image on the same button. Not as a background image on that text. Instead of this, I want to display the text with height 120 and image of height 150 on the same button. Anybody have ideas for it? Please let me know if you don't understand my question.

7 Answers

0 votes
answered Dec 3, 2010 by vaishnavi-naidu

Use the concept of subviews. Take 3 controls, UIButton (200x270), UILabel (200x120) and UIImageView (200x150). Assign the image to the UIImageView and set the text for the UILabel. Position your label and imageview controls based upon the (x,y) location of the UIButton.

In the end, you should have something like:

For the following instances:

UIButton *button;
UILabel *label;
UIImageView *imageView;

[button addSubView:imageView];
[button addSubView:label];
0 votes
answered Dec 3, 2010 by aditya

You can use this code,it will serve your purpose

.h file code
IBOutlet UIButton *testBtn;

.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

Adjust the coordinates and size of your button as your requirement.This is a sample code to guide you.

PS:Take a UIButton in the nib file>Make it a custom button>Connect the IBOutlet to your custom button in the nib file.Thats it.

0 votes
answered Dec 5, 2012 by abhilash-reddy-kalle

The below code shows placing an image and text in a button using setImageEdgeInsets and setTitleEdgeInsets properties of UIButton class.

UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
    [butt setFrame:CGRectMake(0, 0, 100, 100)];
    [butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
    [butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
    [butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
    [butt setTitle:@"hello" forState:UIControlStateNormal];
    [butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.view addSubview:butt];
0 votes
answered Dec 28, 2012 by amit-battan
[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];
0 votes
answered Dec 9, 2013 by ohnit

Yes, you can display an image and a title in the same button, as long as they are both small enough to fit. The hard part comes, when you need to deal with placement.

You can play with the contentVerticalAlignment and contentHorizontalAlignment properties of the UIButton (inherited from UIControl).

You can also use the titleEdgeInsets and imageEdgeInsets properties to shift the the title and image from the placement they get based on the alignment properties.

If you want very accurate or custom placement, I suggest overriding the titleRectForContentRect: and imageRectForContentRect: methods of the UIButton. These allow you to define the frames for your title and image, and they are called whenever the button needs to be laid out. One warning, if you want to reference self.titleLabel inside of titleRectForContentRect:, make sure self.currentTitle is defined first. I was getting a bad access error, , possibly the method is called when first initializing the titleLabel.

0 votes
answered Dec 15, 2015 by orkoden

If you want to have more control over the layout, create a subclass of UIControl and arrange the views you want (UILabel, UIImageView) in a xib file. Then you can use Autolayout regularly without having to sort out UIEdgeInsets.

0 votes
answered Sep 15, 2017 by colossalchris

In Swift 3

let button = UIButton()

//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will push the label off the button

//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right

//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want

//add button to your view - like in viewDidLoad or your own custom view setup

Don't forget to set anchors if doing so programmatically for it to appear/attach it to your button reference in Interface Builder if using a storyboard

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter