如何在 UITextField 上设置下划线？答案

【问题标题】：How can I set an underline on a UITextField?如何在 UITextField 上设置下划线？
【发布时间】：2022-01-21 03:29:53
【问题描述】：

我正在尝试在我的 UITextFields 上设置下划线。我尝试了几种方法，但似乎都没有。浏览了几个网站后，最推荐的方法如下：

extension UITextField {
    func setUnderLine() {
        let border = CALayer()
        let width = CGFloat(0.5)
        border.borderColor = UIColor.lightGray.cgColor
        border.frame = CGRect(x: 0, y: self.frame.size.height - width, width:  self.frame.size.width-10, height: self.frame.size.height)
        
        border.borderWidth = width
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }
}

我想不出为什么上面的代码不起作用，但我看到的所有答案都是几年前发布的。

有人可以告诉我我做错了什么吗？

【问题讨论】：

所以你不想要带下划线的文本，你想要在文本字段的框架下面的一行？
您发布的代码有什么作用？没有？把线放错地方了？如果我们要帮助您，我们需要知道这一点。
@Duncan C 代码没有添加任何东西，我看不到任何行。我也想要文本字段下的行
计算边界层的数学对我来说没有意义。有关添加下划线层的工作代码，请参阅我的答案。

标签： ios swift uitextfield

【解决方案1】：

我在您发布的代码中看到的一个问题是，如果调整文本字段的大小，它不会更新图层。每次调用 setUnderLine() 函数时，它都会添加一个新层，然后就忘记了。

我建议改为子类化 UITextField。该代码可能如下所示：

class UnderlinedTextField: UITextField {

    let underlineLayer = CALayer()

    /// Size the underline layer and position it as a one point line under the text field.
    func setupUnderlineLayer() {
        var frame = self.bounds
        frame.origin.y = frame.size.height - 1
        frame.size.height = 1

        underlineLayer.frame = frame
        underlineLayer.backgroundColor = UIColor.blue.cgColor
    }

    // In `init?(coder:)` Add our underlineLayer as a sublayer of the view's main layer
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.layer.addSublayer(underlineLayer)
    }

    // in `init(frame:)` Add our underlineLayer as a sublayer of the view's main layer
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.addSublayer(underlineLayer)
    }

    // Any time we are asked to update our subviews,
    // adjust the size and placement of the underline layer too
    override func layoutSubviews() {
        super.layoutSubviews()
        setupUnderlineLayer()
    }
}

这会创建一个如下所示的文本字段：

（请注意，如果您将模拟器旋转到横向模式，UnderlineTextField 会重新定位新文本字段边界的下划线层。）

请注意，使用所需的下划线颜色将 UIView 添加到您的故事板可能会更容易，固定在文本字段的底部，一个像素高。（您将使用 AutoLayout 约束设置下划线视图，并为其设置背景颜色。）如果您这样做了，则根本不需要任何代码。

编辑：

我创建了一个Github project 来演示这两种方法。（关联）我还在示例应用程序中添加了基于视图的下划线。看起来像这样：

【讨论】：