IOS Error mark UITextField

by Julien Gustin

February 10, 2019

1,103

0

Créer automatiquement un marqueur d’erreur sur un champ texte dans IOS uniquement via le code est assez simple à réaliser.

Pour ce faire, j’ai d’abord créé une vue ErrorMark qui permet de dessiner un rectangle à bords arrondis avec une croix blanche :

import Foundation
import UIKit

class ErrorMark: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clear
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = UIColor.clear
    }
    
    override func draw(_ rect: CGRect)
    {
        // Draw canvas
        let path:UIBezierPath = UIBezierPath(roundedRect: rect, cornerRadius: CGFloat(6))
        UIColor.red.set()
        path.fill()
        
        UIColor.white.set()
        
        let width = rect.width
        let padding = width * 0.3
        
        let bar1 = UIBezierPath()
        bar1.move(to: CGPoint(x: padding, y:padding))
        bar1.addLine(to: CGPoint(x:width-padding, y:width-padding))
        bar1.lineWidth = 3
        bar1.close()
        bar1.stroke()
        bar1.fill()
        
        let bar2 = UIBezierPath()
        bar2.move(to: CGPoint(x: width-padding, y:padding))
        bar2.addLine(to: CGPoint(x:padding, y:width-padding))
        bar2.lineWidth = 3
        bar2.close()
        bar2.stroke()
        bar2.fill()
    }
    
}

Ensuite, j’ai étendu UITextField afin d’intégrer ma classe ErrorMark.

J’ai créé une propriété booléenne isError qui permet de définir le champ en erreur :

import UIKit

class CUITextField: UITextField{
    
    private var _errorMark: ErrorMark?
    private var _isError: Bool = false
    var isError:Bool{
        
        get{
            return self._isError
        }
        set{
            self._isError = newValue
            if(self._isError == true){
                _drawErrorMark()
            }else{
                _removeErrorMark()
            }
        }
        
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        
        // Background color
        self.backgroundColor = ColorService.hexStringToUIColor(hex: "#010523")
        
        // Height to 40
        self.frame.size.height = 40.0
        
        
        // Set text color to white
        self.textColor = ColorService.hexStringToUIColor(hex: "#FFFFFF")
        
        // If placeholder defined, set color to gray
        if let placeholder = self.placeholder{
            self.attributedPlaceholder = NSAttributedString(string: placeholder, attributes: [NSAttributedString.Key.foregroundColor: ColorService.hexStringToUIColor(hex: "#474747")])
        }
    }
    
    private func _removeErrorMark()
    {
        if let errorMark = self._errorMark{
            errorMark.removeFromSuperview()
        }
    }
    
    private func _drawErrorMark()
    {
        let x:Int = Int(self.frame.size.width - 35)
        let y:Int = 10
        
        self._errorMark = ErrorMark(frame: CGRect(x: x, y: y, width: 25, height:25))
        self.addSubview(self._errorMark!)
    }
}

Chaque UITextField devra donc utiliser notre nouvelle classe CUITextField.

Enfin, dans mon contrôleur, quand je veux marquer les champ en erreur, il ne me suffit plus que de définir le champ en isError = true :

@objc func loginError()
{
    self.usernameTextField.isError = true
    self.passwordTextField.isError = true
}

Enjoy.