CODEWITHSUNDEEP
iosswiftuibutton
D. Cohen
D. Cohen

Reputation: 577

titleEdgeInsets for UIButton make no sense

I have an image and a title for a UIButton. I'm trying to get my image (15px in width) to be aligned left and my title to be aligned 5px left of that:

Button Example

The button is 215 in width, but I had to set my titleEdgeInset right to -44. This doesn't make sense. What are the maths to get -44?

Upvotes: 1

Views: 5290

Answers (3)

aircraft
aircraft

Reputation: 26914

It's easy to do:

In swift:

let button: UIButton = UIButton(frame: CGRect(x: 44, y: 64, width: 100, height: 40))
    
    button.backgroundColor = UIColor.clear
    button.setImage(UIImage(named: "img"), for: .normal)
    button.setTitle("hello", for: .normal)
    button.layer.borderWidth = 1
    button.layer.borderColor = UIColor.blue.cgColor
    button.layer.cornerRadius = 4
    
    // set edge inset
    button.imageEdgeInsets = UIEdgeInsets(top: 0, left: -40, bottom: 0, right: 0)
    button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
    
    view.addSubview(button)

In objective-c:

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(44, 64, 100, 40);
    button.backgroundColor = [UIColor clearColor];
    [button setImage:[UIImage imageNamed:@"img"] forState:UIControlStateNormal];
    [button setTitle:@"hello" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    button.layer.cornerRadius = 4;
    button.layer.borderColor = [UIColor blueColor].CGColor;
    button.layer.borderWidth = 1;
    // set edge inset
    button.imageEdgeInsets = UIEdgeInsetsMake(0, -40, 0, 0);
    button.titleEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0);
    [self.view  addSubview:button];

[![The result][1]][1] [1]: https://i.sstatic.net/FyzqB.png

Upvotes: 0

heyfrank
heyfrank

Reputation: 5647

UIButton is centered by default like the other answers stated, but you can change that to achieve a more intuitive inset behaviour. Select left alignment in the attributes inspector.

enter image description here

Then set insets like this:

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

Upvotes: 0

charmingToad
charmingToad

Reputation: 1597

It's because the image and title of a button are centered together by default.

For example, here's a 300px wide button with an image and text, no insets:

Default button spacing

Looks like I need the button contents shifted left by 60 pts, so -60 left inset and 60 right inset.

button.imageEdgeInsets = UIEdgeInsetsMake(0.0, -60.0, 0.0, 60.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0.0, -60.0, 0.0, 60.0)

enter image description here

Edit:

These insets would also work for the above example.

button.imageEdgeInsets = UIEdgeInsetsMake(0.0, -120.0, 0.0, 0.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0.0, -120.0, 0.0, 0.0)

The button is centering its contents, so if you say "there are 2 more pts on the left" the button will move its contents over by 1 pt to keep them centered.

The rule is

-leftInset+rightInset=leftMargin*2

Upvotes: 4

Related Questions