How to add padding-left on a UIButton created programmatically?

Question

I am having a trouble adding left padding on a UIButton. I have a UIButton with UIControlContentHorizontalAlignmentLeft. I want the text to be displayed on the left side but it is too left. when I give the border, it doesn't look good. I would like to give some padding on the text about 5px like in CSS. I googled for the solution but can't find one particularly for UIButton.

Hi! Please consider selecting @LucasChwe's answer below as the correct one. It seems to work better... — Peter Lamberg, Feb 15 '18 at 11:05

Ryan Poolos · Accepted Answer · 2017-07-28T11:20:04.603

titleEdgeInsets The inset or outset margins for the edges of the button title drawing rectangle.

@property(nonatomic) UIEdgeInsets titleEdgeInsets

Discussion Use this property to resize and reposition the effective drawing rectangle for the button title. You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge. Use the UIEdgeInsetsMake function to construct a value for this property. The default value is UIEdgeInsetsZero.

Availability Available in iOS 2.0 and later.

Declared In UIButton.h

Give this a try :)

[myButton setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 5.0, 0.0, 0.0)];

Also if you're using a custom button there is such a thing as Content Insets and Image Insets.

Incase you've made it here looking for Swift. This is valid Swift 3.0

myButton.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: 5.0, bottom: 0.0, right: 0.0)

You can set it directly as well. It is helpful if want to use one or two properties.

myButton.titleEdgeInsets.top = 0
myButton.titleEdgeInsets.left = 5
myButton.titleEdgeInsets.bottom = 0
myButton.titleEdgeInsets.right = 0

@VanDuTran I have also faced a problem, on some button it is working on some not. It probably because of constraints on buttons, I made each contraints one by one to promote to user constraint and then in last delete them. Some button are working fine now but still on some button problem exist..... If you already find a solution please share. — K'am, Sep 19 '13 at 12:03
@VanDuTran solution is uncheck the autoLayout option in view controller file inspector — K'am, Sep 19 '13 at 12:39
Swift 2.0 : `myButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 5.0, bottom: 0, right: 0)` — Nathaniel, Jan 27 '16 at 21:26

score 30 · Answer 2 · answered Jan 05 '17 at 10:03

30

Post Xcode 8 if you want to set it these insets through interface builder (IB),you will find these inset settings in size inspector instead of attribute inspector.

Hope this helps.

answered Jan 05 '17 at 10:03

Vaibhav

865
2
10
19

Lucas Chwe · Answer 3 · 2019-03-01T17:09:14.047

29

Here is a better answer to:

avoid truncating the button title
avoid title from extending beyond the button's view
make the button frame work well with an image.

Code:

extension UIButton {
    func addLeftPadding(_ padding: CGFloat) {
        titleEdgeInsets = UIEdgeInsets(top: 0.0, left: padding, bottom: 0.0, right: -padding)
        contentEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: padding)
    }
}

Usage:

myButton.addLeftPadding(10)

edited Mar 01 '19 at 17:09

answered May 08 '15 at 20:00

Lucas Chwe

2,578
27
17

6

Swift version with even side padding: `let sidePadding: CGFloat = 20.0 titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -sidePadding, bottom: 0.0, right: -sidePadding) contentEdgeInsets = UIEdgeInsets(top: 0.0, left: sidePadding, bottom: 0.0, right: sidePadding)` – Arthur Clemens Jul 11 '16 at 19:32
Thanks @ArthurClemens – Zack Shapiro Apr 05 '17 at 17:52
In my case the title is aligned right as no needed for me. If i leave one line `contentEdgeInsets = UIEdgeInsets(top: 0.0, left: padding, bottom: 0.0, right: padding)` fixed it. – Nike Kov Jan 16 '19 at 10:05

score 27 · Answer 4 · edited Dec 02 '17 at 00:32

27

In Xcode 6 you can specify title inset in IB:

Interface builder edge title inset

edited Dec 02 '17 at 00:32

pkamb

33,281
23
160
191

answered Feb 04 '15 at 02:05

Sergey Demchenko

2,924
1
24
26

2

This is a good point, but I've found using the context inset is the way to go. – SmileBot Mar 18 '15 at 16:29

score 7 · Answer 5 · answered Jun 01 '14 at 14:20

Here is another example how to resolve this:

 [self.myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

    float padding_button                = 6.0f;
    UIEdgeInsets titleInsets            = UIEdgeInsetsMake(0.0f, padding_button, 0.0f, -padding_button);
    UIEdgeInsets contentInsets          = UIEdgeInsetsMake(padding_button, 0.0f, padding_button, 0.0f);
    CGFloat extraWidthRequiredForTitle  = titleInsets.left - titleInsets.right;
    contentInsets.right += extraWidthRequiredForTitle;
    [self.myButton setTitleEdgeInsets:titleInsets];
    [self.myButton setContentEdgeInsets:contentInsets];
    [self.myButton sizeToFit];

Also if your button has a image you can simply add:

[self.myButton setImage:[UIImage imageNamed:@"YourImage.png"] forState:UIControlStateNormal];

Good luck!

score 4 · Answer 6 · answered May 11 '16 at 09:06

4

_myButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
_myButton.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);

answered May 11 '16 at 09:06

Chaaruu Jadhav

474
4
22

score 0 · Answer 7 · answered Jul 28 '23 at 07:09

titleEdgeInsets is now Deprecated

So you can use UIButton.Configuration https://developer.apple.com/documentation/uikit/uibutton/configuration/

 var configuration = UIButton.Configuration.plain()
 configuration.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 0)
 myButton.configuration = configuration

How to add padding-left on a UIButton created programmatically?

7 Answers7