CODEWITHSUNDEEP
iosobjective-cuibutton
Cyril Gaillard
Cyril Gaillard

Reputation: 909

custom font on UIbutton title clipped on top of word

I have uploaded a custom font and applied this font on the title of a UIbutton using the following code

videoButton.titleLabel.font = [UIFont fontWithName:@"LaurenScript" size:20];

The problem is that the title is being clipped on the top of the first letter (see photo below). I tried the same font on the UIlabel and it works fine so it is not a problem with the font. I tried also to change the rectFrame using 

[videoButton.titleLabel setFrame:CGRectMake(0, 0, 300, 600)];

but that didn't do anything. Has anybody a clue of how I can fix this problem? Cheers

enter image description here

Upvotes: 22

Views: 8229

Answers (7)

M.Yessir
M.Yessir

Reputation: 222

enter image description hereIn my case the button title label was aligned vertically, but text needed insets on top.

self.contentEdgeInsets = UIEdgeInsets(top: 5.0, left: 0.0, bottom: 0.0, right: 0.0)

Upvotes: 0

Will Ullrich
Will Ullrich

Reputation: 2228

Not sure if this is still an issue for anyone, but I found that (with using a custom font) the above solutions did not ultimately fix the issue, especially for a custom UIButton created solely programmatically.

Here is how I managed to fix this issue, with 1 line in particular that resolved the clipping issue:

UIButton *button = [[UIButton alloc] init];
button = [UIButton buttonWithType:UIButtonTypeCustom];

[button setTitle:@"Nice!" forState:UIControlStateNormal];
[button setFont:[UIFont fontWithName:<CUSTOM FONT NAME> size:buttonWidth/3.0f]];
button = CGRectMake(0, 0, <WIDTH>, <HEIGHT>);

Here was the line that resolved the clipping:

[button setContentVerticalAlignment:UIControlContentVerticalAlignmentFill];

Hopefully this helps anyone else who still were stuck. Happy coding!

Upvotes: 10

mate0
mate0

Reputation: 191

had same problem using a button with an image and text with a custom font. Everything had to be align centered vertically. And image not stretched. this worked out fine for me.

btn.contentVerticalAlignment = .fill
btn.contentMode = .center
btn.imageView?.contentMode = .scaleAspectFit

Upvotes: 5

Hardik Darji
Hardik Darji

Reputation: 3684

Select button in Interface builder and check for set a vertical alignment panel in the control section Below is example:

enter image description here

Upvotes: 34

Mate
Mate

Reputation: 129

I try this in swift 2.1, I adapt this code from Antoine answer. This may not good code but it solve my problem for now. You should make it better for you self.

import UIKit

class CustomUIButton: UIButton {

    override func layoutSubviews() {
        if var titleFrame : CGRect = titleLabel?.frame{

            titleFrame.size = self.bounds.size
            titleFrame.origin = CGPointZero
            self.titleLabel!.frame = titleFrame
            self.titleLabel!.textAlignment = .Center
        }
    }
}

Upvotes: 4

Antoine
Antoine

Reputation: 23996

I had a similar problem, where a diaeresis got cut off on top of the titlelabel. I made a UIButton subclass and used this code to fix the problem:

-(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;
}

Upvotes: 45

Ibmurai
Ibmurai

Reputation: 962

There is this (sad) solution: https://stackoverflow.com/a/10200908/352628

I have a similar problem. It seems that the titleLabel is just very uncontrollable, and to get control you need to inject a UILabel subview to the button... That makes me sad :(

Upvotes: 3

Related Questions