Search code examples
iosswiftiphoneuikituitextfield

Xcode: Swift - How to make bottom line border color that appears/disappear when the text field is edited?


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

Solution

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