带有标题和图像的 UIButton答案

【问题标题】：UIButton with title and image带有标题和图像的 UIButton
【发布时间】：2017-09-27 09:05:54
【问题描述】：

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

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

【问题讨论】：

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

标签： ios xcode uibutton

【解决方案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
    }
}

【讨论】：