127

Is it possible to adjust the x,y position for the titleLabel of a UIButton?

Here is my code: 

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    [btn setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];
    [btn setTitle:[NSString stringWithFormat:@"Button %d", i+1] forState:UIControlStateNormal];     
    [btn addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
    btn.titleLabel.frame = ???
TheNeil
  • 3,321
  • 2
  • 27
  • 52
RAGOpoR
  • 8,118
  • 19
  • 64
  • 97
  • This is all you need http://stackoverflow.com/questions/18484747/uibutton-titleedgeinsets –  Oct 06 '15 at 11:09

5 Answers5

461
//make the buttons content appear in the top-left
[button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
[button setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];

//move text 10 pixels down and right
[button setTitleEdgeInsets:UIEdgeInsetsMake(10.0f, 10.0f, 0.0f, 0.0f)];

And in Swift

//make the buttons content appear in the top-left
button.contentHorizontalAlignment = .Left
button.contentVerticalAlignment = .Top

//move text 10 pixels down and right
button.titleEdgeInsets = UIEdgeInsetsMake(10.0, 10.0, 0.0, 0.0)

Swift 5

button.contentHorizontalAlignment = .left
button.contentVerticalAlignment = .top
button.titleEdgeInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 0.0, right: 0.0)
Nathan Dudley
  • 510
  • 7
  • 17
cannyboy
  • 24,180
  • 40
  • 146
  • 252
  • 4
    I didn't even need the first two lines... `setTitleEdgeInsets:` was all I found necessary to shift the text around. – ArtOfWarfare Jan 01 '13 at 18:34
  • This is definitely correct, but probably easier to accomplish by using the interface builder (as described in my answer). – eladleb Apr 01 '13 at 07:23
  • The first two lines positions your text to the 0,0 (x,y). This can prevent relative positioning; especially if you set the default alignment in the xib. – Jarrett Barnett Jul 08 '13 at 17:20
  • i assgin the the button title from web services and assgin the background image for button. some times the web serivies values become more than 10 letter. in this case it show dot line. i need if web serivies values in increased the button image also want to increased ... how to do? – Shalini Oct 07 '14 at 05:15
  • @ArtOfWarfare : the first 2 lines will come into picture if your button height is more and you need to align as ltr... for normal buttons, yes they are useless... – Fahim Parkar Apr 08 '17 at 11:59
40

The easiest way to do it visually is to use the attribute inspector** (appears when editing a xib/storyboard), setting the "edge" property to title, adjusting it's insets, then setting "edge" property to image, and adjusting accordingly. It's usually better than coding it , since it's easier to maintain and highly visual.

Attribute inspector setting

eladleb
  • 2,616
  • 26
  • 21
  • 1
    Good tip to change `Edge` to `Title` and then adjust inset! – netwire Apr 30 '15 at 16:02
  • 1
    For future reference, since Xcode 8, instead of setting the `edge` property you can adjust the title insets in the Size Inspector. – dbmrq Apr 21 '18 at 04:55
14

Derive from UIButton and implement the following method:

- (CGRect)titleRectForContentRect:(CGRect)contentRect;

Edit:

@interface PositionTitleButton : UIButton
@property (nonatomic) CGPoint titleOrigin;
@end

@implementation PositionTextButton
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
  contentRect.origin = titleOrigin;
  return contentRect;
}
@end
drawnonward
  • 53,459
  • 16
  • 107
  • 112
4

For my projects I've this extension utility:

extension UIButton {

    func moveTitle(horizontal hOffset: CGFloat, vertical vOffset: CGFloat) {
        self.titleEdgeInsets.left += hOffset
        self.titleEdgeInsets.top += vOffset
    }

}
Luca Davanzo
  • 21,000
  • 15
  • 120
  • 146
0

This can be done in xib. Select your button, go to "Show the Size Inspector" tab and setup insets.

enter image description here

landonandrey
  • 1,271
  • 1
  • 16
  • 26