How to create underlined UITextField

Question

iOS noob here

When I add a default UITextField to the ViewController, it looks like this:

My designer would like me to make the UITextField look like this (i.e. background is transparent, and just has an underline:

How do I do this? Should be asking my designer for an image to set as background for the UITextField. What should the image look like? Should the image be = the blue background + the underline (minus the number i guess)

Is that right?

UPDATE: Based on direction below (from @Ashish Kakkad), added this code in Swift to ViewDidLoad:

    var bottomLine = CALayer()
    bottomLine.frame = CGRectMake(0.0, view.frame.height - 1, view.frame.width, 1.0)
    bottomLine.backgroundColor = UIColor.whiteColor().CGColor
    tf_editPassword.borderStyle = UITextBorderStyle.None
    tf_editPassword.layer.addSublayer(bottomLine)

This almost works, but the problem is that all side borders disappear, I want just the bottom line to stay.

Freiburg

Answer 1

@Ashish Kakkad has posted the right code but the reason it might not be working for @user1406716 is because when there is no text in the textfield, the height and width of the frame are 0 so maybe you can try the following :

Obj-C :

CALayer *bottomLine = [CALayer layer];
bottomLine.frame = CGRectMake(0.0f, 75 - 1, 300, 1.0f);
bottomLine.backgroundColor = [UIColor whiteColor].CGColor;
[myTextField setBorderStyle:UITextBorderStyleNone];
[myTextField.layer addSublayer:bottomLine];

Swift :

var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, 75 - 1, 300, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)

This will ensure that the line is visible even when there is no text in the textfield.

Deirdredeism

Answer 2

Try this code :

Obj-C

CALayer *bottomLine = [CALayer layer];
bottomLine.frame = CGRectMake(0.0f, self.frame.size.height - 1, self.frame.size.width, 1.0f);
bottomLine.backgroundColor = [UIColor whiteColor].CGColor;
[myTextField setBorderStyle:UITextBorderStyleNone];
[myTextField.layer addSublayer:bottomLine];

Swift

var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, view.frame.height - 1, view.frame.width, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)

Hope it helps

If you are using the auto-layout then try to do this code inside the viewDidLayoutSubviews method.

Lozar

Hey I tried your (Converted it to Swift though - see updated question). It almost works. There is no bottom line though, even that disappears. The UITextBorderStyle.None removes all borders, would like to keep the bottom line – Freiburg

@Freiburg Oh! I doesn't know you are working on swift. I will check and let you know. – Lozar

How do I do this if I use AutoLayout and my View is separated from my Controller? Is there a way to do it in the View? – Coquito

Answer 3

Use this Extension for UITextField

extension UITextField {

    func setUnderLine() {
        let border = CALayer()
        let width = CGFloat(0.5)
        border.borderColor = UIColor.darkGray.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
    }

}

Call the above function in ViewDidLoad() and display the textfield with an underline.

myTextField.setUnderLine()

Sniper

Hi, interesting and clean solution, but seem that on my case don't work... I added the extension and inside the viewDidLoad i add the code but I can't see any changes... anyway I don't have any error so... I don't know where is the problem: override func viewDidLoad() { super.viewDidLoad() txtUserName.setUnderLine(); txtPassword.setUnderLine(); – Czarina

Answer 4

To update this with Swift 3:

let bottomLine = CALayer()
bottomLine.frame = CGRect(origin: CGPoint(x: 0, y:first.frame.height - 1), size: CGSize(width: first.frame.width, height:  1))
bottomLine.backgroundColor = UIColor.white.cgColor
first.borderStyle = UITextBorderStyle.none
first.layer.addSublayer(bottomLine)

Antibes

WHAT IS first.frame.height? – Freed

@Freed it's a UITextField – Eclampsia

By doing this hint just vanished.. What should I do to fix that? – Cassondracassoulet

Answer 5

Delete borders and add underline - Swift 5:

extension UITextField {
    
    func addUnderLine () {
        let bottomLine = CALayer()
        
        bottomLine.frame = CGRect(x: 0.0, y: self.bounds.height + 3, width: self.bounds.width, height: 1.5)
        bottomLine.backgroundColor = UIColor.lightGray.cgColor
        
        self.borderStyle = UITextField.BorderStyle.none
        self.layer.addSublayer(bottomLine)
    }
    
}

Outrelief

Answer 6

For Xcode 14.2

let textField = UITextField()

textField.defaultTextAttributes = [
    NSAttributedString.Key.underlineStyle: NSUnderlineStyle.thick.rawValue,
    NSAttributedString.Key.underlineColor: UIColor.red
]

Nootka