How do I vertically center UITextField Text?

Question

I am simply instantiating a UITextField and noticing that the text doesn't center vertically. Instead, it is flush with the top of my button, which I find kind of odd since I would expect the default to center it vertically. How can I center it vertically, or is there some default setting that I am missing?

Answer 1

textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

In swift use:

textField.contentVerticalAlignment = UIControlContentVerticalAlignment.center

Answer 2

This has potentially got several complicating factors, some alluded to in previous answers:

• What you're trying to align (just numbers, just letters, just uppercase letters or a mix)
• Placeholders
• Clear button

What you're trying to align is important because of which point in the font should be vertically centered due to line height, ascenders, descenders etc.

_{(source: ilovetypography.com)}

(Image thanks to http://ilovetypography.com/2009/01/14/inconspicuous-vertical-metrics/ )

When you're dealing with just numbers for example, the standard center alignment won't look quite right. Compare the difference in the two below, which use the same alignment (in the code below), one of which looks correct and the other which looks slightly off:

Not quite right with a mix of letters:

but looks right if it's just numbers

So, unfortunately, it may need a bit of trial and error and manual adjustment to get it looking visually correct.

I placed the below code in a subclass of UITextField. It calls superclass methods as this takes into account the clear button being present.

override func awakeFromNib() {
    contentVerticalAlignment = UIControlContentVerticalAlignment.Center
}

override func textRectForBounds(bounds: CGRect) -> CGRect {
    let boundsWithClear = super.textRectForBounds(bounds)
    let delta = CGFloat(1)
    return CGRect(x: boundsWithClear.minX, y: delta, width: boundsWithClear.width, height: boundsWithClear.height - delta/2)
}

override func editingRectForBounds(bounds: CGRect) -> CGRect {
    let boundsWithClear = super.editingRectForBounds(bounds)
    let delta = CGFloat(1)
    return CGRect(x: boundsWithClear.minX, y: delta, width: boundsWithClear.width, height: boundsWithClear.height - delta/2)
}

override func placeholderRectForBounds(bounds: CGRect) -> CGRect {
    let delta = CGFloat(1)
    return CGRect(x: bounds.minX, y: delta, width: bounds.width, height: bounds.height - delta/2)
}

Answer 3

In the storyboard: Under control -> change the vertical as well as horizontal alignment, as to your needs.

Answer 4

This works fine for textField's text. But if you want to use placeholder text (a text that will appear while textfield is blank), on iOS 7 you will encounter problems.

I solved it by overriding TextField class and

- (void) drawPlaceholderInRect:(CGRect)rect

method.

Like this:

- (void) drawPlaceholderInRect:(CGRect)rect
{
    [[UIColor blueColor] setFill];
    CGRect placeholderRect = CGRectMake(rect.origin.x, (rect.size.height- self.font.pointSize)/2, rect.size.width, self.font.pointSize);
    [[self placeholder] drawInRect:placeholderRect withFont:self.font lineBreakMode:NSLineBreakByWordWrapping alignment:self.textAlignment];
}

Works for both iOS7 and earlier versions.

Answer 5

You can also resolve the issue by adjusting the text baseline.

// positive： up， negative：down
// NSAttributedStringKey.baselineOffset:0

let attDic: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .baselineOffset: 0
];

textfield.placeholder = NSAttributedString(string: "....", attributes:  attDic);