How to achieve UIButton / UILabel 'padding' in iPhone app

Question

I've got various views in my iPhone application that require padding e.g a custom UIButton with text aligned left, and a UILabel with a background color.

This may be a really stupid question, but how can I apply 'padding' to move the text off the left hand edge?

I've tired using bounds etc without any success.

I know I could create a wrapper view for my UILabel with a background color, but it seems like overkill.

Many thanks.

Marco Arment tweeted a dead-simple `UILabel` subclass that adds `UIEdgeInsets`-style padding in label drawing: it’s on gist.github as [IPInsetLabel](https://gist.github.com/2596057). — cbowns, May 25 '12 at 01:41

Rafa de King · Answer 1 · 2017-10-20T13:32:36.493

109

I am using auto layout. Solution that worked for me was setting UIButton's contentEdgeInsets.

ObjC

button.contentEdgeInsets = UIEdgeInsetsMake(0.0f, 30.0f, 0.0f, 30.0f);

Swift

button.contentEdgeInsets = UIEdgeInsets(top: 0.0, left: 30.0, bottom: 0.0, right: 30.0)

edited Oct 20 '17 at 13:32

answered May 09 '14 at 09:41

Rafa de King

37,274
22
102
134

score 22 · Accepted Answer · answered Jun 16 '10 at 16:36

22

Ok the simplest solution I've found so far is:

self.textAlignment = UITextAlignmentCenter; 
[self sizeToFit]; 
CGRect frame = self.frame;
frame.size.width += 20; //l + r padding 
self.frame = frame;

Not exactly what I wanted, but it works.

answered Jun 16 '10 at 16:36

I failed to tweak this solution to work for alignment left. It's a really old answer, I guess it might not work in iOS 6. Hope someone could provide update. – Philip007 Dec 24 '12 at 09:13
Works great, but from iOS 6.0 you have to use NSTextAlignmentCenter, UITextAlignmentCenter is deprecated. – chrisdowney Jun 16 '13 at 17:17

score 22 · Answer 3 · edited Jul 31 '19 at 08:03

22

To set padding in UIButton text you need to use UIButton's contentEdgeInsets property.

In Storyboard, to set content inset do following steps:

Select the view controller, then select the UIButton
Go to Utilities Panel (Command + Option + 0) and select Attributes Inspector (Command + Option + 4)
Now select Content in Edge and set Inset as per your requirement (see screenshot)

edited Jul 31 '19 at 08:03

Bruno Bieri

7,754
10
55
79

answered Jul 31 '15 at 10:04

Giru Bhai

14,097
5
43
70

5

Now its in Size inspector – ilan Jan 16 '17 at 12:19
6

Now its the Button -> Content Insets under the Size Inspector – Siddharth Mar 21 '17 at 11:40
3

XCode 9 onwards UIButton -> Size Inspector -> `Content Insets` ==> as shown in this image: https://stackoverflow.com/a/49959281 – Bruno Bieri Jul 31 '19 at 08:04

Brody Robertson · Answer 4 · 2013-07-09T21:07:54.347

To add padding to UILabel the most flexible approach is to subclass UILabel and add an edgeInsets property. You then set the desired insets and the label will be drawn accordingly.

OSLabel.h

#import <UIKit/UIKit.h>

@interface OSLabel : UILabel

@property (nonatomic, assign) UIEdgeInsets edgeInsets;

@end

OSLabel.m

#import "OSLabel.h"

@implementation OSLabel

- (id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.edgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    }
    return self;
}

-(id)initWithCoder:(NSCoder *)aDecoder{
    self = [super initWithCoder:aDecoder];
    if(self){
        self.edgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    }
    return self;
}

- (void)drawTextInRect:(CGRect)rect {
    return [super drawTextInRect:UIEdgeInsetsInsetRect(rect, self.edgeInsets)];
}

@end

score 5 · Answer 5 · answered Apr 21 '18 at 19:03

5

On Xcode 9, the insets are now located in the Size Inspector instead of the Attributes Inspector:

answered Apr 21 '18 at 19:03

Alex

1,298
15
30

score 3 · Answer 6 · answered Feb 21 '14 at 12:49

Here's a sublass of UILabel that has customizable padding using an edgeInset property:

PaddedLabel.h

#import <UIKit/UIKit.h>
@interface PaddedLabel : UILabel
@property UIEdgeInsets edgeInsets;
@end

PaddedLabel.m

#import "PaddedLabel.h"
@implementation PaddedLabel
-(void)drawTextInRect:(CGRect)rect {
    return [super drawTextInRect:UIEdgeInsetsInsetRect(rect, self.edgeInsets)];
}
-(CGSize)intrinsicContentSize {
    CGSize contentSize = [super intrinsicContentSize];
    UIEdgeInsets insets = self.edgeInsets;
    contentSize.height += insets.top + insets.bottom;
    contentSize.width += insets.left + insets.right;
    return contentSize;
}
@end

(This is a simplification of Brody's answer which also works with autolayout.)

score 2 · Answer 7 · answered Jul 18 '13 at 22:59

2

CGRectInset is your friend. You can set negative 'insets' to create padding:

[self sizeToFit];
CGRect rect = self.frame;
rect = CGRectInset( rect, -6.f, -5.f); // h inset, v inset
self.frame = rect;

answered Jul 18 '13 at 22:59

cleverbit

4,995
4
24
35

score 0 · Answer 8 · edited Jan 29 '14 at 06:55

I'm trying to achieve a similar thing, that is 'pad' a UILabel. I've been trying to implement the solution that Toby posted above, but can't seem to find where this needs to go. The UILabel I'm working with is aligned left - is that what's causing the issue?

I've tried using this in viewDidLoad, and even in a subclass of UILabel in the method:

- (CGRect)textRectForBounds:(CGRect)bounds
     limitedToNumberOfLines:(NSInteger)numberOfLines

score 0 · Answer 9 · answered Sep 19 '18 at 13:19

What about creating a custom class that extends UIButton and overriding this:

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return UIEdgeInsetsInsetRect(contentRect, UIEdgeInsetsMake(topPadding, rightPadding, bottomPadding, leftPadding));
}

In the case of UILabel just override:

- (CGRect)textRectForBounds:(CGRect)bounds 
     limitedToNumberOfLines:(NSInteger)numberOfLines;

score -2 · Answer 10 · answered Apr 01 '14 at 11:00

-2

If you're just looking for a horizontal padding on one line, then this may be enough (it was for me):

NSString* padding = @"  "; // 2 spaces
myLabel.text = [NSString stringWithFormat:@"%@%@%@", padding, name, padding];

answered Apr 01 '14 at 11:00

Lukas Kalinski

2,095
20
25

How to achieve UIButton / UILabel 'padding' in iPhone app

10 Answers10

ObjC

Swift

Linked