How can I set the title of a UIButton as left-aligned?

Question

I need to display an email address on the left side of a UIButton, but it is being positioned to the centre.

Is there any way to set the alignment to the left side of a UIButton?

This is my current code:

UIButton* emailBtn = [[UIButton alloc] initWithFrame:CGRectMake(5,30,250,height+15)];
emailBtn.backgroundColor = [UIColor clearColor];
[emailBtn setTitle:obj2.customerEmail forState:UIControlStateNormal];
emailBtn.titleLabel.font = [UIFont systemFontOfSize:12.5];
[emailBtn setTitleColor:[[[UIColor alloc]initWithRed:0.121 green:0.472 blue:0.823 alpha:1]autorelease] forState:UIControlStateNormal];
[emailBtn addTarget:self action:@selector(emailAction:) forControlEvents:UIControlEventTouchUpInside];
[elementView addSubview:emailBtn];
[emailBtn release];

For Swift 5.1 you can look my answer https://stackoverflow.com/questions/2765024/how-to-set-the-title-of-uibutton-as-left-alignment/65124739#answer-65124739 — Ucdemir, Dec 03 '20 at 11:05

score 1674 · Accepted Answer · edited Jun 20 '22 at 10:25

1674

Set the contentHorizontalAlignment:

// Swift 
emailBtn.contentHorizontalAlignment = .left;

// Objective-C
emailBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

You might also want to adjust the content left inset otherwise the text will touch the left border:

// Swift 3 and up:
emailBtn.contentEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0);

// Objective-C
emailBtn.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);

edited Jun 20 '22 at 10:25

Guntis Treulands

4,764
2
50
72

answered May 04 '10 at 12:22

49

Keep in mind that you can also set both of these properties from Interface Builder. – Mihai Damian Feb 01 '13 at 08:49
1

so it was number 9000 from me, thanx , useful answer – Logic May 25 '15 at 13:02
9

We're too lazy to search the documentation. What would we do without SO! – Kedar Paranjape Nov 24 '15 at 06:48
5

Goes to show SO is better documented than Apple document. – GeneCode Oct 13 '16 at 10:46
Is it possible to use Leading or Trailing rather than Right or Left? (for localisation purposes) – Ricardo Mar 15 '17 at 11:04
2

`UIControlContentHorizontalAlignmentLeading` and `UIControlContentHorizontalAlignmentTrailing` were added in iOS 11 – Cal Stephens Jan 06 '18 at 01:48

score 124 · Answer 2 · answered Mar 29 '14 at 00:13

124

You can also use interface builder if you don't want to make the adjustments in code. Here I left align the text and also indent it some:

UIButton in IB

Don't forget you can also align an image in the button too.:

enter image description here

answered Mar 29 '14 at 00:13

n8tr

5,018
2
32
33

This helped me out a ton, can't believe I didn't realize that's what those controls were for. – Ethan Parker May 18 '15 at 17:54
1

Thanks, It helped me. I was not able to find out edge insets for button title without the help of arrow indication in your sample pictures. – Ashok Jul 09 '15 at 09:55
in xcode 8.2.1 it moved to other place see my answer below – dang Jan 27 '17 at 12:56
How to do that programmatically in swift? I want align image on the right, and title on the left side??? – Visal Sambo Aug 26 '18 at 15:52

score 43 · Answer 3 · edited Oct 09 '16 at 07:59

43

In Swift 3+:

button.contentHorizontalAlignment = .left

edited Oct 09 '16 at 07:59

Federico Zanetello

3,321
1
25
22

answered Sep 01 '15 at 06:06

Vincent

4,342
1
38
37

What is the difference between .leading and .left value of contentHorizontalAlignment? – jamryu Jul 16 '21 at 21:22
@jamryu that in case of languages where you write from right to left (arabic I think..?) `.leading` will have same effect as `.right`. – Nat Jul 21 '22 at 14:08

score 20 · Answer 4 · answered Sep 22 '17 at 11:37

20

Swift 4+

button.contentHorizontalAlignment = .left
button.contentVerticalAlignment = .top
button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

answered Sep 22 '17 at 11:37

Mohammad Zaid Pathan

16,304
7
99
130

score 15 · Answer 5 · answered Aug 30 '14 at 04:58

15

UIButton *btn;
btn.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;
btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

answered Aug 30 '14 at 04:58

bhavik

1,673
2
14
20

score 10 · Answer 6 · edited Aug 30 '13 at 05:01

10

Using emailBtn.titleEdgeInsets is better than contentEdgeInsets, in case you don't want to change the whole content position inside the button.

edited Aug 30 '13 at 05:01

shanet

7,246
3
34
46

answered Aug 30 '13 at 04:42

Gabriel

101
1
3

score 8 · Answer 7 · answered Mar 06 '13 at 17:02

8

Here is explained how to do it and why it works so: http://cocoathings.blogspot.com/2013/03/how-to-make-uibutton-text-left-or-right.html

answered Mar 06 '13 at 17:02

emkaka

121
1
2

score 7 · Answer 8 · answered Jan 27 '17 at 12:55

7

in xcode 8.2.1 in the interface builder it moves to:

answered Jan 27 '17 at 12:55

dang

1,549
1
20
25

score 5 · Answer 9 · answered Jan 03 '11 at 22:59

There is a small error in the code of @DyingCactus. Here is the correct solution to add an UILabel to an UIButton to align the button text to better control the button 'title':

NSString *myLabelText = @"Hello World";
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];

// position in the parent view and set the size of the button
myButton.frame = CGRectMake(myX, myY, myWidth, myHeight); 

CGRect myButtonRect = myButton.bounds;
UILabel *myLabel = [[UILabel alloc] initWithFrame: myButtonRect];   
myLabel.text = myLabelText;
myLabel.backgroundColor = [UIColor clearColor];
myLabel.textColor = [UIColor redColor]; 
myLabel.font = [UIFont fontWithName:@"Helvetica Neue" size:14.0];   
myLabel.textAlignment = UITextAlignmentLeft;

[myButton addSubview:myLabel];
[myLabel release];

Hope this helps....

Al

score 3 · Answer 10 · answered Dec 02 '15 at 12:31

3

For Swift 2.0:

emailBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left

This can help if any one needed.

answered Dec 02 '15 at 12:31

Suraj Sonawane

2,044
1
14
24

score 2 · Answer 11 · answered Apr 29 '19 at 05:10

In Swift 5.0 and Xcode 10.2

You have two ways to approaches

1) Direct approach

btn.contentHorizontalAlignment = .left

2) SharedClass example (write once and use every ware)

This is your shared class(like this you access all components properties)

import UIKit

class SharedClass: NSObject {

    static let sharedInstance = SharedClass()

    private override init() {

    }
}

//UIButton extension
extension UIButton {
    func btnProperties() {
        contentHorizontalAlignment = .left
    }
}

In your ViewController call like this

button.btnProperties()//This is your button

score 2 · Answer 12 · answered Jun 18 '19 at 14:14

2

Try

button.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;

answered Jun 18 '19 at 14:14

Gev

842
4
21

1

This worked for me, contentHorizontalAlignment didn't, thanks. – danfordham Sep 14 '19 at 18:05

score 0 · Answer 13 · answered Jan 17 '23 at 12:27

tl;dr: Using UIButton.Configuration - do titleAlignment = .center but also add a subtitle and make its font microscopic.

So, we're on iOS 15+, we're using the new UIButton.Configuration APIs, buttons now go multi-line by default and you're trying to figure out - how do I make the button's title be centered or trailing aligned, as opposed to the default (leading). For example you have an image and a button title underneath and and you want it centered.

Seems reasonable to try this:

configuration.titleAlignment = .center

But it doesn't change anything.

By trying thing out in Interface Builder, I noticed the following: titleAlignment only has an effect if there is a subtitle along with the title.

I am not sure if this is an omission on Apple's side (which might be fixed later) or if there is a good reason for it. In any case, we need a way to make it work without a subtitle. Perhaps some clever contentInset or UIControl.contentHorizontalAlignment can do the trick, but I'd be worried to use these in cases where we have to think about other languages, dynamic type etc.

Here's a solution which is still hacky, but would do the job: Add a subtitle which contains just a space, then make the font microscopic, e.g. 0.01.

This is how to do it in code, assuming you are already working with a UIButton.Configuration:

configuration.titleAlignment = .center
configuration.title = "Hello hi"
configuration.subtitle = " "
configuration.subtitleTextAttributesTransformer = UIConfigurationTextAttributesTransformer({ input in
    var output = input
    output.font = .systemFont(ofSize: 0.01)
    return output
})

Not an ideal solution and it might break in the future, but for some use cases the best available solution at the moment.

score -1 · Answer 14 · answered Oct 11 '22 at 14:19

if you use button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10), you will get an warning that states 'contentEdgeInsets' was deprecated in iOS 15.0: This property is ignored when using UIButtonConfiguration. An alternative solution is:

iOS 15.0+

    var button: UIButton = {
        let button = UIButton(configuration: .filled())

        button.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 20, bottom: 16, trailing: 20)
        button.contentHorizontalAlignment = .leading
        
        return button
    }()

How can I set the title of a UIButton as left-aligned?

14 Answers14

Linked

Related