UIButton：以编程方式在图像上方叠加标题

Question

How do I superimpose a button title on top of a button image programmatically and position them both to be dead center in the button frame overlapping each other?

let button = UIButton()

button.setImage(coolpic, for .normal)
button.contentMode = .center
button.setTitle("tap me", for: .normal)

// a bunch of constraints and styling that define the frame

Do I have to set the image as a background image? Do I need to create a UILabel as the button title and add it as a subview of the button?

Thanks!

Answer 1

You could try:

    let button = UIButton()
    button.setImage(UIImage(named:"yourImage.png")?, for: .normal)

    button.setTitle("MyTitle", for: .normal)
    button.titleLabel?.font = button.titleLabel?.font.withSize(15)
    button.titleLabel?.textAlignment = .center

Answer 2

You can do this with image insets, but I like to use extensions for things like this - that way I can use them anywhere in my app without subclassing. Here's my code for setting an image position in a UIButton:

extension UIButton {

    func setImagePosition(at pos:ButtonImagePosition, withAdjustment adj:CGFloat?) {

        let _adj:CGFloat = (adj != nil) ? adj! : 0
        let width = frame.size.width
        var imgWidth = self.imageView?.frame.size.width 

        switch pos {
        case .center: 
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        case .right: 
            imgWidth = imgWidth! - _adj
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: width - imgWidth!, bottom: 0, right: 0)
        case .left: 
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: width + imgWidth!)
        }
    }
}

enum ButtonImagePosition {
    case left
    case right
    case center
}

Then I call it as follows

button.setImagePosition(at: .right, withAdjustment: nil)