带有标题和图像的UIButton

Question

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

这是一个示例，最后看起来应该是怎样的：

Answer 1

更改标题和图像插图

也将控制从垂直更改为底部

Answer 2

您可以在您喜欢的位置制作一个单独的UIImage和UILabel，并用透明的UIButton覆盖它们。 这应该够了吧。

希望能帮助到你。

Answer 3

你有两个选择

1）创建UIView添加图片，标签和按钮

2）您可以设置标题和图像插图，可以在XIB中轻松完成

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

Answer 4

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

Answer 5

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

做到这一点的另一种方法是子类化UIControl 。 这是一个UIView子类，旨在用于此类情况。 UIButton是UIControl的子类。 这样一来，您可以更好地控制布局，而无需UIButton的内置行为。

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

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