Cropped UIButton Title

Question

I am using a custom font for the title of a UIButton. It works, except with this particular font a portion of the first character is clipped. For example:

enter image description here

I tried setting the contentEdgeInsets and titleEdgeInsets and can't seem to get it not clipped. I also tried setting the button.titleLabel.clipsToBounds property to NO;

Any suggestions would be greatly appreciated.

can do this https://stackoverflow.com/questions/6178545/adjust-uibutton-font-size-to-width — ChanOnly123, Aug 03 '21 at 17:35

score 10 · Answer 1 · answered Feb 24 '14 at 10:47

10

Although Jeshua's solution works fine, it's not an optimal in my eyes. I'd rather recommend to subclass UIButton and overwrite it's layoutSubviews Method.

-(void)layoutSubviews
{
    [super layoutSubviews];

    CGRect frame = self.titleLabel.frame;
    frame.size.height = self.bounds.size.height;
    frame.origin.y = self.titleEdgeInsets.top;
    self.titleLabel.frame = frame;
}

answered Feb 24 '14 at 10:47

samsam

3,125
24
40

This is really easy to do, just make a class (subclassing UIButton), copy paste, assign to button's custom class. Thanks! – Graham P Heath Nov 19 '14 at 19:24
This should be the accepted answer. Simple and elegant. – Kiran Thapa May 05 '15 at 08:06
Added swift 3.0 answer for above solution – Dhiraj Das Mar 08 '17 at 12:38
For some reason, this seems to also fix clipping at the **bottom** of the label (i.e., the _descenders_ seen in glyphs such as "y" or "g") when using a custom font (in my case, _Hiragino_). – Nicolas Miari Mar 28 '19 at 05:29

score 8 · Accepted Answer · answered Apr 18 '12 at 00:01

8

So I just ended up setting the UIButton title to nil and added my own UILabel as a subview to the UIButton. I set the UILabel frame to the same size as the button and set it to be centered.

Not the most elegant solution I am sure, but it gets the job done.

answered Apr 18 '12 at 00:01

Jeshua Lacock

5,730
1
28
58

2

It really sucks that this is the only solution. The reason this happens is that font designers intentionally encode the bounds of their letters as less than they actually are so that they will nest. This is especially important for italic and cursive fonts. I wish Apple wouldn't have been so "precise" with the calculation of the width of the UIButton label, or at least allowed us to change it ourselves. I'm filing a bug report, you should too. – Bek Mar 07 '13 at 18:26

score 1 · Answer 3 · answered Apr 17 '12 at 22:45

1

It looks to me like your content is aligned funkily. If the frame of the label is not directly accessible, use [button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter]; to try to fix the horizontal alignment issue.

answered Apr 17 '12 at 22:45

CodaFi

43,043
8
107
153

Actually it is set to center as is. If I set it to right justification it remains cropped. – Jeshua Lacock Apr 17 '12 at 23:02

score 1 · Answer 4 · answered Mar 08 '17 at 12:38

1

Swift code for above answer:

override func layoutSubviews() {
    super.layoutSubviews()
    titleLabel?.frame = CGRect(x: bounds.origin.x, y: titleEdgeInsets.top, width: frame.width, height: bounds.size.height)
}

answered Mar 08 '17 at 12:38

Dhiraj Das

174
9

Cropped UIButton Title

4 Answers4

Linked