How to create underlined UITextField - ios

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.

Answer 1

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.

Answer 2

#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.

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

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)

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