UIButton with both image and text possible?

Question

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 displa

Answer 1

Using button subviews worked for me in Swift 4.

• Create your button
• Set an image for button
• Create a label for the text
• Add the label as a subview of your button

• Constrain the label within the 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 2

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

Answer 3

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

Answer 4

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.

Answer 5

Try this it's work for me ,

We have to set value of UIEdgeInsets base on our button size and requirement .

[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 will help for some one .

Answer 6

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.