Bottom border for text field doesn’t appear - ios

Question

I tried to add a bottom border to my text field but it doesn't work. I know that there are similar questions out there but none of those answers help. Also, I removed this line of code below and tried because there is no border by default, it still doesn't work:
username.borderStyle = UITextField.BorderStyle.none
Here is the whole code:
class SignUpScreen: UIViewController {
let username = UITextField()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(username)
// Background color
view.backgroundColor = .white
username.placeholder = "Name"
username.borderStyle = UITextField.BorderStyle.none
let bottomLine = CALayer()
bottomLine.frame = CGRect(x: 0, y: view.frame.height - 1, width: view.frame.width, height: 1.0)
bottomLine.backgroundColor = UIColor.black.cgColor
username.layer.addSublayer(bottomLine)
username.translatesAutoresizingMaskIntoConstraints = false
username.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
username.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
username.widthAnchor.constraint(equalToConstant: 150).isActive = true
username.heightAnchor.constraint(equalToConstant: 50).isActive = true
}
}
Hope someone can help me out! Thanks! :)

Answer 1

Here is what you were missing: You were using the main view's frame for creating the frame of your layer. You must use the text field.
Also first draw your text field properly with constraints then add layer to text field.
In viewDidLoad your content view is loaded to main memory. There is no frame assignment in that method. So use viewWillAppear or viewDidAppear.
Now when your view will appear every time a new TextField & a layer will be added. So you need to make a check to restrict that behaviour. E.g if a text field is already added to your view then don't add.
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
view.addSubview(username)
/*
* Create the text field
*/
view.backgroundColor = .white
username.placeholder = "Name"
username.borderStyle = UITextField.BorderStyle.none
username.translatesAutoresizingMaskIntoConstraints = false
username.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
username.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
username.widthAnchor.constraint(equalToConstant: 300).isActive = true
username.heightAnchor.constraint(equalToConstant: 50).isActive = true
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
/*
* Here add the shap layer
*/
let bottomLine = CALayer()
/*
* Here is what you were missing.
* You were using the main view's frame instead of your textfield
*/
bottomLine.frame = CGRect(x: 0, y: username.bounds.height - 1, width: username.bounds.width, height: 1.0)
bottomLine.backgroundColor = UIColor.black.cgColor
username.layer.addSublayer(bottomLine)
}

Answer 2

bottomLine.frame = CGRect(x: 0, y: view.frame.height - 1, width: view.frame.width, height: 1.0)
you must use username.bounds, instead of view.frame

Answer 3

let border = CALayer()
let width = CGFloat(3.0)
border.borderColor = UIColor.black.cgColor
border.frame = CGRect(x: 0, y: textFieldOutlet.frame.size.height - width, width: textFieldOutlet.frame.size.width, height: textFieldOutlet.frame.size.height)
border.borderWidth = width
textFieldOutlet.layer.addSublayer(border)
textFieldOutlet.layer.masksToBounds = true

Answer 4

rather than adding a layer maybe you should add your border as UIView and bring it to top also set your textField bgColor as clearColor:
class SignUpScreen: UIViewController {
let username = UITextField()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(username)
// Background color
view.backgroundColor = .white
username.placeholder = "Name"
username.borderStyle = UITextField.BorderStyle.none
// make sure your textField doesn't have back ground
username.backgroundColor = .clear
let bottomLine = UIView()
bottomLine.frame = CGRect(x: 0, y: view.frame.height - 1, width: view.frame.width, height: 1.0)
bottomLine.backgroundColor = UIColor.black.cgColor
// be sure you bring it to top
self.view.layer.insertSublayer(bottomLine, at:0)
username.translatesAutoresizingMaskIntoConstraints = false
username.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
username.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
username.widthAnchor.constraint(equalToConstant: 150).isActive = true
username.heightAnchor.constraint(equalToConstant: 50).isActive = true
}
}

Answer 5

Try this
func bottomBorderTextField(_ textField: UIView, color: UIColor) {
// For Bottom Border
let bottomLayer = CALayer()
let frame = viewType.frame
bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width - 2, height: 0.5)
bottomLayer.backgroundColor = color.cgColor
viewType.layer.addSublayer(bottomLayer)
}
In viewDidload()
self.bottomBorderTextField(self.txtField, color: yourTextColor)