How to set the Title Padding (Inset) for UIButton in Swift

Question

I'm a beginner iOS programmer and try to develop an iOS application. I have several buttons that I put on the home page of the app like in the picture.

please look at the red circle. There's no space (padding/insets) between the image and the title.

actually, I already set the image and title insets using this code. But, it did not give any different result.

    buttonDoctor.titleLabel?.numberOfLines = 2
    buttonDoctor.titleLabel?.lineBreakMode = .byWordWrapping
    buttonMedical.titleLabel?.numberOfLines = 2
    buttonMedical.titleLabel?.lineBreakMode = .byWordWrapping
    buttonQuestion.titleLabel?.numberOfLines = 2
    buttonQuestion.titleLabel?.lineBreakMode = .byWordWrapping
    buttonLocation.titleLabel?.numberOfLines = 2
    buttonLocation.titleLabel?.lineBreakMode = .byWordWrapping
    buttonPromotion.titleLabel?.numberOfLines = 2
    buttonPromotion.titleLabel?.lineBreakMode = .byWordWrapping
    buttonDoctor.image(for: .normal)
    buttonMedical.image(for: .normal)
    buttonQuestion.image(for: .normal)
    buttonLocation.image(for: .normal)
    buttonPromotion.image(for: .normal)
    //buttonDoctor.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonPromotion.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonLocation.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonQuestion.titleLabel?.adjustsFontSizeToFitWidth = true
    //buttonMedical.titleLabel?.adjustsFontSizeToFitWidth = true



    let btnimg = try? UIImage(named: "doctorschedule.png")
    var newimg = imageResize(image: btnimg!!, scaledTo: CGSize(width: 36, height: 36))
    buttonDoctor.setImage(newimg, for: .normal)
    buttonDoctor.contentMode = .scaleAspectFit
    buttonDoctor.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonDoctor.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg2 = try? UIImage(named: "medicalcheck.png")
    var newimg2 = imageResize(image: btnimg2!!, scaledTo: CGSize(width: 36, height: 36))
    buttonMedical.setImage(newimg2, for: .normal)
    buttonMedical.contentMode = .scaleAspectFit
    buttonMedical.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonMedical.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg3 = try? UIImage(named: "survey.png")
    var newimg3 = imageResize(image: btnimg3!!, scaledTo: CGSize(width: 36, height: 36))
    buttonQuestion.setImage(newimg3, for: .normal)
    buttonQuestion.contentMode = .scaleAspectFit
    buttonQuestion.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonQuestion.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg4 = try? UIImage(named: "location.png")
    var newimg4 = imageResize(image: btnimg4!!, scaledTo: CGSize(width: 36, height: 36))
    buttonLocation.setImage(newimg4, for: .normal)
    buttonLocation.contentMode = .scaleAspectFit
    buttonLocation.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonLocation.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

    let btnimg5 = try? UIImage(named: "promotion.png")
    var newimg5 = imageResize(image: btnimg5!!, scaledTo: CGSize(width: 36, height: 36))
    buttonPromotion.setImage(newimg5, for: .normal)
    buttonPromotion.contentMode = .scaleAspectFit
    buttonPromotion.imageEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 5)
    buttonPromotion.titleEdgeInsets = UIEdgeInsetsMake(5, 3, 0, 0)

I already tried several value for the insets, but it give no different result. did I do anything wrong with my code?

please some one kindly help me how to solve this problem. thank you

Note: I have one more concern. I want to put an image logo at the top of the front page (see the orange circle), but I don't know how to do it. Since there's no property to insert an image in the navigation bar. FYI, it's just regular navigation bar inside the UIViewController that I put from the storyboard (not UINavigationController). If you don't mind, please give some advice about this.

NOTE : Everything in the circle is just a regular UIBUTTON not UIImage and UILabel or UIbutton. Please see my code.

Answer 1

In addition to @mozahler answer, only that didn't work for me, have to add 1 line to make it align to left or right:

(It will align title to left side of button)

button.contentHorizontalAlignment = .left

button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 5, right: 5)

Answer 2

For a programmatic solution, you are using:

dismissButton.titleEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 0, right: 10)

when you should be using:

someButton.contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 0, right: 10)

This is because title edge insets (by design) inset AFTER it has been sized for the text.

Edit: (iOS 15+) As @SuryaKantSharma commented, this has been deprecated.

The new way to configure buttons includes three options to control padding and insets.

• titlePadding: The distance between the title and subtitle labels.
• imagePadding: The distance between the button’s image and text
• contentInsets: The distance from the button’s content area to its bounds.

For examples and an explanation of UIButton.Configuration check out this link:

It is the first of three articles on working with UIButton (UIKit) by Sarun. They are worth a read!

https://sarunw.com/posts/new-way-to-style-uibutton-in-ios15/

Answer 3

Solution: As a solution to your query, set left inset to 10 for title only. Keep other inset as 0 (or whatever you want to set)

Note:

• 'Content inset' is applicable on both title and image.
• 'Title inset' is applicable on title text/string only.
• 'Image inset' is applicable on image/icon only.

Try this (with Xcode 9+):

From storyboard (Interface Builder) design, you can set inset using properties of UIButton, as shown in this snapshot.

Answer 4

Set the constraints left and right side to 0, the text would then centered.