set an image/icon on button in Swift

Question

I am trying to achieve something like this:

So I want to add an image on the left of my button's title.

I have found the following paragraph in documentation:

button.currentImage is read only property and I can not set it. Who can tell how to implement it?

I was trying to do it like this:

private let logoButton: UIButton = {
    let button = UIButton(type: .custom)
    button.setTitle("Logo", for: .normal)
    button.setImage(UIImage(named:"logo"), for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.addTarget(self, action: #selector(handleLogo), for: .touchUpInside)
    return button
}()

But unfortunately I get picture stretched inside button and no title ...

Am I missing something? Or should I try creating custom view with image + lable and make it clickable? thanks

Solution 1

You should correctly set up the edge insets for the button items.

You can find the IB properties here:

Programmatically, you can setup edge insets as below:

 [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 20, 0, 0)];
 [button setImageEdgeInsets:UIEdgeInsetsMake(0, -70, 0, 0)];

UPD:

Solution 2

A good method will be to create a UIView with the dimensions you want, then set a UIImage inside it, set it to AspectFit (or whatever you want) and then also set the UILabel you need. This will let you customize a lot more the view than you can do with a UIButton. Also you need to connect a UITapGestureRecognizer on the view, like this:

override func viewDidLoad() {
    super.viewDidLoad()
        logoView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(logoViewClicked)))
}

@objc func logoViewClicked() {
    //handle code here
}

I prefer it this way, as I said, have more space to customize things.

Solution 3

I think when you need to change size of button and and also modify code like

size of your image @1x(25*25) , @2x(50*50) , @3x(75*75) in pixel add in assets

self.buttonNext.backgroundColor = .blue
self.buttonNext.setImage( "your image", for: .normal)
self.buttonNext.setTitle("Logo", for: .normal)

or if you want space between button text use image inset property.

Solution 4

After you set the inset options, the button's image would be squeezed. You can use this option to keep the shape of the image.

View more solutions

Comments

[rmaddy]

See stackoverflow.com/questions/43908717/…

[Brandon]

Add: button.imageView.contentMode = .scaleAspectFit to have the image scale properly..

[Almazini]

thanks, your answer points to the problem I had. I have updated my code- please check. Still my custom button doesn't look very nice

[CheshireKat]

If you have fixed size for your button, you can resize the image. I've updated the image in the answer. I have a button with 50px height, so, my image is 40 px height. Also, you've set right inset + 300. You can try to set minus value to the left inset, and minus value to text left inset. My advise is to use fixed sizes for the button, and set the ui from IB