如何將圖像大小和文本之間的比例設置為 UIButton

Question

我有一個UIButton 。 最后，我應該得到這個：

無論我如何嘗試，我都無法得到想要的結果。 我已經閱讀了很多關於這個主題的問題。 我嘗試使用titleEdgeInsets和imageEdgeInsets進行試驗，但沒有幫助。 事實是，當我為按鈕設置圖像時，它占據了按鈕的全部內容，而文本則留在后面。 下面我如何設置標題

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

作為一個實驗，我曾在操場上嘗試過。 上面的代碼給出了以下結果：

.

我怎樣才能得到想要的結果？

Answer 1

我相信有幾種方法可以實現這個 Ahmet，我將 go 超過一個想法。

您問題的有趣挑戰是您不僅要左對齊圖像。

你想要：

• 僅相對於按鈕標題左對齊圖像
• 但是，圖像和文本應該在 UIButton 中作為一個整體居中對齊

我創建了以下擴展，它可以讓您接近您想要的結果，並附上一些評論來解釋我的思考過程：

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)
    }
}

然后當你想使用它時：

        // 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)

這是產生的最終結果，我認為它接近您的預期目標：

如果您想測試一下，這也是我在 UIButton 中使用的圖像