CODEWITHSUNDEEP
iosuitextfieldalignment
Joey
Joey

Reputation: 7527

How do I vertically center UITextField Text?

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?

Upvotes: 145

Views: 71171

Answers (5)

SHANG
SHANG

Reputation: 74

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);

Upvotes: 1

ginchly
ginchly

Reputation: 355

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.
vertical font characteristics
(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:

letters not looking centered

but looks right if it's just numbers

numbers looking centered

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)
}

Upvotes: 10

Kumar KL
Kumar KL

Reputation: 15335

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

enter image description here

Upvotes: 5

Roger
Roger

Reputation: 15813

textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

In swift use:

textField.contentVerticalAlignment = UIControlContentVerticalAlignment.center

Upvotes: 371

AndroC
AndroC

Reputation: 4884

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.

Upvotes: 1

Related Questions