I have already added an extension for UITextField to display the bottom borders with color which is working. However, my intention is for the bottom border to appear when user taps on the textfield to edit the text and disappear the border when done edit. I have referred to other stackoverflow question regarding this but I could't find an answer or question that involved both bottom borders and appear/disappear when editing.
extension UITextField {
func addBottomBorder() {
let bottomline = CALayer()
bottomline.frame = CGRect(x: 0,y:self.frame.size.height - 1, width: self.frame.size.width,height: 1)
bottomline.backgroundColor = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0, alpha: 1.0).cgColor
borderStyle = .none
self.layer.addSublayer(bottomline)
self.layer.masksToBounds = true
}
}
I'm quite new to swift and Ios development. would be helpful if someone can show on what I should add to the extension file to make it possible for border appear and disappear when editing.
Update
View controller
func textFieldDidBeginEditing(_ textField: UITextField) {
movementTextField.addBottomBorder()
notesTextField.addBottomBorder()
descriptionTextField.addBottomBorder()
shotSize.addBottomBorder()
shotNameTextField.addBottomBorder()
}
func textFieldShouldEndEditing(_ textField: UITextField) -> Bool {
movementTextField.removeBottomBorder()
notesTextField.removeBottomBorder()
descriptionTextField.removeBottomBorder()
shotSize.removeBottomBorder()
shotNameTextField.removeBottomBorder()
return true
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
}
Extension Update
extension UITextField {
func addBottomBorder() {
let bottomline = CALayer()
bottomline.frame = CGRect(x: 0,y:self.frame.size.height - 1, width: self.frame.size.width,height: 1)
bottomline.backgroundColor = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0, alpha: 1.0).cgColor
borderStyle = .none
self.layer.addSublayer(bottomline)
self.layer.masksToBounds = true
}
func removeBottomBorder() {
let removebottomline = CALayer()
removebottomline.frame = CGRect(x: 0,y:self.frame.size.height - 1, width: self.frame.size.width,height: 1)
removebottomline.backgroundColor = UIColor(red: 30.0/255.0, green: 30.0/255.0, blue: 30.0, alpha: 1.0).cgColor
borderStyle = .none
self.layer.addSublayer(removebottomline)
self.layer.masksToBounds = true
}
}
Go with below steps:
@IBOutlet var nameTextField: UITextField
@IBOutlet var surnameTextField: UITextField
override func viewDidLoad() {
super.viewDidLoad()
nameTextField.delegate = self
}
func textFieldDidBeginEditing(textField: UITextField!) { //didBegin method(when you start editing in textfield)
//To addBorder for specific Textfield just make a if else condition like:
if textField == nameTextField {
addBottomBorder()
}
}
func textFieldShouldEndEditing(textField: UITextField!) -> Bool { //EndEiditing method(when you end editing in textfield)
//To removeBorder for specific Textfield just make a if else condition like:
if textField == nameTextField {
removeBottomBorder()
}
}