How can I set an underline on a UITextField?

Question

I am trying to set an underline on my UITextFields. I have tried a couple of methods but none of them seem to work. After looking through a couple of websites, the most suggested method is the following:

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

I can't think of any reason as to why the code above would not work, but all the answers I saw were posted a couple of years ago.

Could someone please let me know what I am doing wrong?

So you don't want underlined text, you want a line below the text field's frame? — Duncan C, Dec 18 '21 at 19:34
What does the code you posted do? Nothing? Put the line in the wrong place? We kind of need to know that if we're going to help you. — Duncan C, Dec 18 '21 at 19:37
@Duncan C The code doesn’t add anything, I can’t see any line. Also I want the line under the textfield — Arkash Vijayakumar, Dec 18 '21 at 20:32
The math to calculate your border layer doesn't make sense to me. See my answer for working code that adds an underline layer. — Duncan C, Dec 18 '21 at 20:38

Duncan C · Accepted Answer · 2021-12-19T15:47:27.860

One problem I see with the code that you posted is that it won't update the layer if the text field gets resized. Each time you call the setUnderLine() function, it adds a new layer, then forgets about it.

I would suggest subclassing UITextField instead. That code could look like this:

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

That creates a text field that looks like this:

(And note that if you rotate the simulator to landscape mode, the UnderlineTextField repositions the underline layer for the new text field bounds.)

Note that it might be easier to just add a UIView to your storyboard, pinned to the bottom of your text field and one pixel tall, using your desired underline color. (You'd set up the underline view using AutoLayout constraints, and give it a background color.) If you did that you wouldn't need any code at all.

Edit:

I created a Github project demonstrating both approaches. (link) I also added a view-based underline to my example app. That looks like this:

How can I set an underline on a UITextField?

1 Answers1

Edit:

Linked