UIButton with image and text possible?

Question

I have a button that is 200 in size and 270 in height. I want the text and image to be on the same button. Not as background image for this text. Instead, I want to display text with a height of 120 and an image with a height of 150 on one button. How to do it?

Answer 1

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 sample code to help you.

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

Answer 2

The code below shows the placement of the image and text with the button using the setImageEdgeInsets and setTitleEdgeInsets of the 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]; 

Answer 3

Use the concept of subviews. Take 3 controls, UIButton (200x270), UILabel (200x120) and UIImageView ( UIImageView ). Assign a UIImageView image and set the text for UILabel . Locate the tag and image controls based on the location (x, y) of the UIButton .

At the end, you should have something like:

In the following cases:

 UIButton *button; UILabel *label; UIImageView *imageView; [button addSubView:imageView]; [button addSubView:label]; 

Answer 4

 [testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal]; [testBtn setTitle:@"Your text" forState:UIControlStateNormal]; 

Answer 5

Yes, you can display the image and title in the same button if they are 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 move the title and image from the placement they receive based on the alignment properties.

If you want a very precise or selective placement, I suggest overriding the methods titleRectForContentRect: and imageRectForContentRect: UIButton . This allows you to define frames for your name and image, and they are called whenever you need to lay out a button. One warning, if you want to reference self.titleLabel inside titleRectForContentRect: first make sure self.currentTitle defined. I get a bad access error, maybe the method is called the first time titleLabel is initialized.

Answer 6

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 addSubview(button) 

Do not forget to set the bindings, if so programmatically, so that it appears / binds it to the link to the link in Interface Builder, if you use the storyboard

Answer 7

If you want more control over the layout, subclass UIControl and arrange the necessary views ( UILabel , UIImageView ) in the xib file. You can then use Autolayout regularly without sorting UIEdgeInsets .

Answer 8

Using subview buttons worked for me in Swift 4.

• Create your own button
• Set image for button
• Create shortcut for text
• Add a shortcut as a subview of your button

• Limit label inside button

    let imageAndTextButton : UIButton = { let button = UIButton(frame: .zero) button.tintColor = .clear button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal) button.imageView?.contentMode = .scaleToFill button.translatesAutoresizingMaskIntoConstraints = false return button }() let textForButtonLabel = UILabel(frame: .zero) textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes) textForButtonLabel.textAlignment = .center textForButtonLabel.backgroundColor = .clear imageAndTextButton.addSubview(textForButtonLabel) imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0)) imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0)) 

Answer 9

Try it, it works for me

We must set the value of the UIEdgeInsets base depending on the size of the button and our requirements.

 [self.testButton setTitle: @"myTitle" forState: UIControlStateNormal]; UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f]; //UIEdgeInsets insets = {top, left, bottom, right}; [self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)]; [self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)]; [self.testButton setImage:iconImage forState:UIControlStateNormal]; [self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:self.testButton]; 

Hope this helps someone.