如何垂直居中 UITextField 文本？

Posted 2023-03-05

【中文标题】如何垂直居中 UITextField 文本？

【英文标题】：How do I vertically center UITextField Text?

【发布时间】：2011-07-23 06:50:13

【问题描述】：

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

【参考方案1】：

textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

快速使用：

textField.contentVerticalAlignment = UIControlContentVerticalAlignment.center

【讨论】：

@user353877：这仍然可以正常工作。请注意，在 Roger 的回复中，textField 是他的 UITextField 实例的名称 - 您的名称可能不同。所以他会有UITextField *textField = [[UITextField alloc] init];之类的东西。如果您使用不同的变量名称（* 之后的任何其他名称，而不是 textField），则需要改用 yourDifferentVariableNameHere.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter。

@user353877 在“Center”之前添加一个点：UIControlContentVerticalAlignment.Center;

UITextView 有同样的方法吗？

此属性是否有 swift 等效项？

在 Swift 3.0 中，这是使用枚举的推荐方式：textField.contentVerticalAlignment = .center

【参考方案2】：

这可能会导致一些复杂因素，其中一些在之前的答案中有所提及：

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

您尝试对齐的内容很重要，因为字体中的哪个点应该垂直居中，因为行高、上升、下降等原因。（来源：ilovetypography.com）（图片感谢http://ilovetypography.com/2009/01/14/inconspicuous-vertical-metrics/）

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

字母混合不太对劲：

但如果只是数字的话看起来不错

因此，不幸的是，它可能需要进行一些反复试验和手动调整才能使其在视觉上看起来正确。

我将下面的代码放在 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)

【讨论】：

我认为placeholderRectForBounds 向右延伸太多。我有一个正确的观点，它与其他界限不同。我刚刚实现了textRectForBounds 并从其他 2 个函数中调用它 :)

【参考方案3】：

在情节提要中：受控制 -> 根据您的需要更改垂直和水平对齐方式。

【参考方案4】：

这适用于 textField 的文本。但是如果你想使用占位符文本（文本字段为空白时会出现的文本），在 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 及更早版本。

【讨论】：

你如何在 Swift 中处理这个问题？因为 Swift 中不存在 self.placeholder.drawInRect。

这行得通，但 self.font.pointSize 似乎比 pointSize 好一点

【参考方案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);