如何垂直居中 UITextField 文本？

Question

我只是实例化一个 UITextField 并注意到文本没有垂直居中。相反，它与按钮的顶部齐平，我觉得这有点奇怪，因为我希望默认设置将其垂直居中。如何将其垂直居中，或者是否缺少一些默认设置？

Answer 1

textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

快速使用时：

textField.contentVerticalAlignment = UIControlContentVerticalAlignment.center

Answer 2

这可能会带来几个复杂的因素，其中一些在之前的答案中提到过：

• 您要对齐的内容（只是数字、字母、大写字母或混合）
• 占位符
• 清除按钮

什么尝试对齐很重要，因为由于行高、上升部分、下降部分等原因，字体中的哪个点应该垂直居中。

_{（来源：ilovetypography.com）}

（图片感谢http://ilovetypography.com/2009/ 01/14/inconspicously-vertical-metrics/ ）

例如，当您仅处理数字时，标准中心对齐方式看起来不太正确。比较下面两者的差异，它们使用相同的对齐方式（在下面的代码中），其中一个看起来正确，另一个看起来有点不对劲：

混合字母不太正确：

< img src="https://i.sstatic.net/AsFLa.png" alt="字母看起来不居中">

但如果只是数字看起来就正确

因此，不幸的是，它可能需要一些尝试、错误和手动调整才能使其看起来在视觉上正确。

我将以下代码放置在 UITextField 的子类中。它调用超类方法，因为这考虑到了存在的清除按钮。

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

在故事板中：受控 ->根据您的需要更改垂直和水平对齐方式。

Answer 4

这对于文本字段的文本效果很好。但如果你想使用占位符文本（文本字段为空时出现的文本），在 iOS 7 上你会遇到问题。

我通过重写 TextField 类和

- (void) drawPlaceholderInRect:(CGRect)rect

方法解决了这个问题。

像这样：

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

适用于 iOS7 及更早版本。

Answer 5

您还可以通过调整文本基线来解决该问题。

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