SetImage() 方法移除 UIButton 的 titleLabel

Question

我的愿望是使图像居中（左）并在其旁边（右）放置标签。
没有设置图像，有一个完美居中的 titleLabel:

btnWhatsapp.titleLabel?.adjustsFontSizeToFitWidth = true
btnWhatsapp.setTitle("WhatsApp", for: .normal)

然后我添加了这段代码来添加图片：

btnWhatsapp.setImage(UIImage(named: "phoneIcon"), for: .normal)
btnWhatsapp.imageView?.layer.transform = CATransform3DMakeScale(0.5, 0.6, 0.5)
btnWhatsapp.imageView?.contentMode = .scaleAspectFit

，这是我当时得到的：

, 所以标题消失了。

可能问题是图片使用的 space 比实际尺寸大（尺寸不应该比图标尺寸占用更多的宽度和高度）。我在更改图像背景时看到了这个（应该是这么多灰色）：

btnWhatsapp.imageView?.backgroundColor = .gray

我尝试使用 imageEdgeInsets，但很难计算出它完全适合每个 iPhone。
这是按钮的 Attributes inspector：

Answer 1

默认情况下，您不能一次设置标题和图片，也不能按照您的描述放置它们。

如果您需要一个 UIButton，我建议您制作一个 UIView（或者可能是水平的 UIStackView），其中包含 UIImage 和 UILabel，使用自动布局定位它们，然后您可以将此视图作为子视图添加到 UIButton .

let button = UIButton(type: .custom)
button.frame = viewFrame // This is the desired frame of your custom UIView or UIStackView
button.addSubview(customView)

您将能够使用这种方法轻松定位所有尺寸的视图，但您可能希望在实际应用程序中使用自动布局，而不是硬编码框架。

示例：

override func viewDidLoad() {
        super.viewDidLoad()
        
        let image = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        label.text = "text"
        
        let stack = UIStackView(arrangedSubviews: [image, label])
        stack.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
        stack.distribution = .fillEqually
        
        let button = UIButton()
        button.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
        button.addSubview(stack)
        
        view.addSubview(button)
        
        self.view.addSubview(button)
    }

Answer 2

像这样在控制器下设置按钮 class：

let imageButton: UIButton = {
    let b = UIButton(type: .custom)
    b.backgroundColor = #colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)
    b.layer.cornerRadius = 12
    b.clipsToBounds = true
    b.translatesAutoresizingMaskIntoConstraints = false
    let imageV = UIImageView()
    imageV.image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysTemplate)
    imageV.tintColor = .white
    imageV.contentMode = .scaleAspectFill
    imageV.translatesAutoresizingMaskIntoConstraints = false
    imageV.widthAnchor.constraint(equalToConstant: 30).isActive = true
    
    let label = UILabel()
    label.text = "WhatsApp"
    label.textColor = .white
    label.font = .systemFont(ofSize: 16, weight: .regular)
    
    let stack = UIStackView(arrangedSubviews: [imageV, label])
    stack.distribution = .fill
    stack.spacing = 4
    stack.axis = .horizontal
    stack.translatesAutoresizingMaskIntoConstraints = false
    
    b.addSubview(stack)
    stack.heightAnchor.constraint(equalToConstant: 30).isActive = true
    stack.widthAnchor.constraint(equalToConstant: 120).isActive = true
    stack.centerXAnchor.constraint(equalTo: b.centerXAnchor).isActive = true
    stack.centerYAnchor.constraint(equalTo: b.centerYAnchor).isActive = true
    
    return b
}()

现在在 viewDidLoad 中添加按钮并在您的视图中设置约束（在我的例子中位于顶部）

view.addSubview(imageButton)
imageButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
imageButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
imageButton.widthAnchor.constraint(equalToConstant: 200).isActive = true
imageButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

这是结果：

SetImage() 方法移除 UIButton 的 titleLabel

SetImage() method removes titleLabel for UIButton

ios

swift

uibutton

uiimage