如何将图像大小和文本之间的比例设置为 UIButton

Question

I have a UIButton . And finally, I should get this:

No matter how I try, I can't get the desired result. I have read many questions regarding this topic. I tried to experiment with titleEdgeInsets and imageEdgeInsets , but it did not help. The fact is that when I set the image for the button, it takes up the entire content of the button and the text remains behind. Below how i set the title

let button = UIButton()

button.frame = CGRect(x: 150, y: 300, width: 100, height: 20)
button.backgroundColor = .blue
button.layer.borderColor = UIColor.green.cgColor
button.layer.borderWidth = 2

button.setImage(UIImage(named: "baseline_play_arrow_black_48.png"), for: .normal)
button.imageView?.backgroundColor = .red
button.imageView?.contentMode = .scaleAspectFit

button.setTitle("Play", for: .normal)
button.setTitleColor(.green, for: .normal)
button.titleLabel?.backgroundColor = .yellow

As an experiment I had tried in the playground. And code above gave the following result:

.

How can i get the desired result?

Answer 1

I believe there are a few ways you can achieve this Ahmet, I will go over one idea.

The interesting challenge from your question is that you don't only want to left align the image.

You want to:

• Left align the image with respect to the button title only
• However, the image along with the text should be center aligned as a whole within the UIButton

I created the below extension which gets you close to your desired result with some comments to explain my thought process:

extension UIButton
{
    func configureWithLeftImage(_ imageName: String)
    {
        // Retrieve the desired image and set it as the button's image
        let buttonImage = UIImage(named: "play_icon")?.withRenderingMode(.alwaysOriginal)
        setImage(buttonImage, for: .normal)
        imageView?.contentMode = .scaleAspectFit
        
        // Align the content inside the UIButton to be left
        contentHorizontalAlignment = .left
        
        // Set or compute the width of the UIImageView within the UIButton
        let imageWidth: CGFloat = imageView!.frame.width
        
        // Specify the padding you want between UIButton and the text
        let contentPadding: CGFloat = 10.0
        
        // Get the width required for your text in the button
        let titleFrame = titleLabel!.intrinsicContentSize.width
        
        // Keep a hold of the button width to make calculations easier
        let buttonWidth = frame.width
        
        // The UIImage and the Text combined should be centered so we need to calculate
        // the x position of the image first.
        let imageXPos = (buttonWidth - (imageWidth + contentPadding + titleFrame)) / 2
        
        // Set the position of the image within the button
        imageEdgeInsets = UIEdgeInsets(top: 0.0,
                                       left: imageXPos,
                                       bottom: 0.0,
                                       right: contentPadding)
    }
}

Then when you want to use it:

        // Initialize a UIButton and set its frame
        let customButton: UIButton = UIButton(type: .custom)
        customButton.frame = CGRect(x: 100, y: 200, width: 150, height: 40)
        
        // Customize the button as you wish
        customButton.backgroundColor = .white
        customButton.layer.cornerRadius = 5.0
        customButton.setTitleColor(.black, for: .normal)
        customButton.setTitle("смотрите", for: .normal)
        
        // Call the function we just created to configure the button
        customButton.configureWithLeftImage("play_icon")
        
        // Finally add the button to your view
        view.addSubview(customButton)

This is the end result produced which I believe is close to your desired goal:

This is the image I used as well inside the UIButton if you want to test it out