Custom UIButton in iOS with centered image on top of text

Question

I am trying to create a button like this in interface builder.

I have used this SO question as reference, however I can't get the image to sit on top of text.

I can only get an off centered text and image.

Here are some of the settings:

Answer 1

An alternative that I frequently use in situations like this is to create a UIView in Interface Builder and change its class to UIControl. You can then add as many UIImageViews, UILabels, etc as you'd like & position them all with AutoLayout vs more "hacky" content insets.

UIButton is a subclass of UIControl and all the functionality you're probably looking for is also likely a part of UIControl, specifically the -addTarget:action:forControlEvents method.

Answer 2

You are trying to use both the Image and the Label on the same view (UIButton view) and position them, this is not the best way to perform this kind of task.

And you can't add subclasses on UIButton in interface builder.

I would recommend you to create a UIView instead, and add separately a UIImageView with the settings image, and a UILabel with the "settings":

After that you can add TapGesturRecognizer for informing you when tap has made to your view button:

func tapSetup() {
        let tapOnMyViewButton = UITapGestureRecognizer(target: self, action: #selector(ViewController.didTapOnMyViewButton))
        self.byViewBtn.addGestureRecognizer(tapOnMyViewButton)
    }

    func didTapOnMyViewButton() {
        //Your logic
    }