带有标题和图像的 UIButton

Posted 2023-03-21

【中文标题】带有标题和图像的 UIButton

【英文标题】：UIButton with title and image

【发布时间】：2017-09-27 09:05:54

【问题描述】：

我需要一个按钮，里面有一个图像，按钮下面有一个文本。我不能将图像用作背景，因为它会拉伸图像。所以我的问题是如果我为按钮使用图像，标题将被图像覆盖。有什么解决办法吗？

下面是一个例子，它应该是什么样子的：

【问题讨论】：

是的，您可以通过调整标题和图片插图来实现。

【参考方案1】：

你有两个选择

1) 创建 UIView 添加 Image , label 和 button

2) 您可以设置 Title 和 Image inset ，您可以在 XIB 中轻松完成

对于选项二，我添加了简单的示例，（将其替换为您的值）

【参考方案2】：

更改标题和图片插图

也改变控制垂直到底部

【讨论】：

它对我不起作用......标题仍然被覆盖

【参考方案3】：

你可以在你喜欢的位置制作一个单独的 UIImage 和 UILabel，并用透明的 UIButton 覆盖它们。 这应该可以解决问题。

希望对你有帮助。

【参考方案4】：

您可以继承 UIButton 并重新定义 layoutSubviews 方法。

【参考方案5】：

您可以调整UIButton的以下属性：var titleEdgeInsets: UIEdgeInsets、var imageEdgeInsets: UIEdgeInsets。

另一种方法是继承UIControl。这是一个UIView 子类，旨在用于此类情况。例如，UIButton 是 UIControl 的子类。这样您就可以更好地控制布局，而无需对抗 UIButton 的内置行为。

您可以在代码中或在 xib 文件中使用 Interface Builder 进行布局。

class MyButton: UIControl 

    var imageView: UIImageView
    var label: UILabel

    // adjust colors for changed states like highlighting, etc.
    override var isHighlighted: Bool 
        didSet  
            if isHighlighted 
                backgroundColor = UIColor.grey              
             else 
                backgroundColor = UIColor.white             
            
        
    

    override var isSelected: Bool  didSet  ...      
    override var isEnabled: Bool  didSet  ...  

    override init(frame: CGRect) 
        super.init(frame: frame)
        commonInit()
    

    override init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        commonInit()
    

    func commonInit() 
        imageView = UIImageView(image: UIImage(...))
        addSubView(imageView)
        label = UILabel(frame: CGRect(...))     
        addSubView(label)
        // TODO: add constraints for layout