UITextField — wat is het, configuratie van het invoerveld en werkingsprincipe

Wat is UITextField

UITextField — is een klasse van het UIKit-framework ontworpen voor eenregelige tekstinvoer door de gebruiker. De klasse erft van UIControl, wat het mogelijk maakt om te abonneren op invoergebeurtenissen via het target-action-mechanisme: addTarget(self, action: Selector("textChanged:"), for: editingChanged). UITextField toont een rand (borderStyle), placeholder-tekst bij leeg veld, een wisknop (clearButtonMode) en kan linker/rechter hulpweergaven bevatten. Het veld toont/verbergt automatisch het toetsenbord bij ontvangen/verliezen van focus via becomeFirstResponder en resignFirstResponder. De grootte van het veld wordt bepaald door intrinsicContentSize op basis van font en border style. Voor het maken van UITextField in Interface Builder (Storyboard/XIB) wordt Object Library gebruikt, programmatisch — via de initialisator UITextField(frame: CGRect). De klasse is volledig compatibel met moderne iOS-architectuur: Combine publishers, @Published in SwiftUI via UIViewRepresentable en Diffable Data Source voor formulieren.

Toetsenbordtypen UIKeyboardType

UITextField ondersteunt 12 toetsenbordtypen via de eigenschap keyboardType. Elk type optimaliseert de tekenset voor een specifiek invoerscenario. UIKeyboardType.default — standaard QWERTY-toetsenbord. UIKeyboardType.numberPad — alleen cijfers zonder extra tekens (ideaal voor PIN-codes en telefoonnummers). UIKeyboardType.emailAddress — toetsenbord met @-teken en punt op de hoofdlaag. UIKeyboardType.URL — toetsenbord met .com, / en . op de hoofdlaag. UIKeyboardType.phonePad — numeriek toetsenbord met +, *, # voor het invoeren van telefoonnummers. UIKeyboardType.decimalPad — cijfers met decimale punt voor het invoeren van prijzen. UIKeyboardType.webSearch — toetsenbord met Go-knop en optimalisatie voor zoekopdrachten. UIKeyboardType.asciiCapable — alleen ASCII-tekens voor het Latijnse alfabet. Het toetsenbord wordt weergegeven bij het aanroepen van becomeFirstResponder en verborgen bij resignFirstResponder. Het toetsenbordtype kan dynamisch worden gewijzigd tijdens het bewerken.

Delegate UITextFieldDelegate en zijn methoden

UITextFieldDelegate — is een protocol dat het gedrag van het tekstveld in verschillende fasen van invoer definieert. Belangrijkste methoden: textFieldShouldBeginEditing(textField) — retourneert Bool, waarmee het begin van bewerken wordt toegestaan of verboden; textFieldDidBeginEditing — wordt aangeroepen na het verschijnen van het toetsenbord; textFieldShouldEndEditing — controleert of bewerken kan worden beëindigd (bij false verliest het veld geen focus); textFieldDidEndEditing — wordt aangeroepen na het verbergen van het toetsenbord; textFieldShouldChangeCharactersInRange — wordt aangeroepen bij elke tekeninvoer, maakt filtering van invoer mogelijk (slechts één teken toegestaan, als false wordt geretourneerd wordt het teken niet toegevoegd); textFieldShouldReturn — wordt aangeroepen bij indrukken van Return/Go/Next/Search, gebruikt om naar het volgende veld te gaan. Delegate is niet Optional: alle methoden hebben een standaardimplementatie, maar voor aangepast gedrag moet de overeenkomstige methode worden overschreven.

Focusbeheer via shouldReturn

Methode shouldReturn — het standaardpatroon voor navigatie tussen formuliervelden. Implementatie: textFieldShouldReturn(textField) — we controleren welke textField de gebeurtenis heeft veroorzaakt en verplaatsen de focus naar het volgende veld via becomeFirstResponder(). Als dit het laatste veld is — roepen we resignFirstResponder() aan om het toetsenbord te verbergen. Gebruik IBOutlet collection of afzonderlijke IBOutlet voor elk veld om verwijzingen naar velden op te slaan.

Secure Text Entry en aangepaste left/right view

isSecureTextEntry — eigenschap van UITextField die bij true ingevoerde tekens vervangt door stippen (•) en het kopiëren van tekst via UIMenuController blokkeert. Wordt gebruikt voor wachtwoord-, PIN- en CVV-velden. Bij het schakelen tussen beveiligde modus en normale tekst (show/hide password) stelt u textField.isSecureTextEntry.toggle() in. Belangrijk: bij wijziging van isSecureTextEntry wordt de veldtekst gereset — sla deze van tevoren op. LeftView en RightView — zijn aangepaste UIView die links of rechts in het invoerveld worden weergegeven. Typisch gebruik: zoekpictogram in leftView, knop "Wissen" in rightView. Configuratie: textField.leftViewMode = always (altijd) of whileEditing (alleen bij bewerken). Left/right view worden automatisch gepositioneerd in het tekstveld rekening houdend met padding. De grootte van de view wordt bepaald door bounds of Auto Layout.

import UIKit

class LoginViewController: UIViewController {
    let passwordField = UITextField()

    override func viewDidLoad() {
        super.viewDidLoad()
        passwordField.isSecureTextEntry = true
        passwordField.placeholder = "Password"
        passwordField.keyboardType = .asciiCapable
        passwordField.delegate = self

        // Aangepaste knop voor wachtwoord tonen/verbergen
        let showButton = UIButton(type: .system)
        showButton.setTitle("Toon", for: .normal)
        showButton.addTarget(self, action: #selector(togglePasswordVisibility),
                       for: .touchUpInside)
        passwordField.rightView = showButton
        passwordField.rightViewMode = .always
    }

    @objc func togglePasswordVisibility() {
        passwordField.isSecureTextEntry.toggle()
    }
}

Configuratie van UITextInputTraits

UITextInputTraits — is een protocol dat de visuele en gedragsaanpassing van het toetsenbord voor UITextField definieert. Belangrijkste eigenschappen: autocorrectionType (.default, .no, .yes) — schakelt automatische correctie van tekst in of uit; autocapitalizationType (.none, .words, .sentences, .allCharacters) — automatische Caps Lock voor het eerste teken; spellCheckingType — spellingcontrole; returnKeyType (.done, .go, .next, .search, .send, .continue, .join, .route, .emergencyCall) — tekst van de Return-knop op het toetsenbord; enablesReturnKeyAutomatically — automatische blokkering van de Return-knop bij leeg veld. Gebruik voor naamvelden autocapitalizationType = .words, voor e-mail — autocorrectionType = .no, voor URL — keyboardType = .URL + autocapitalizationType = .none. Configuratie van traits wordt uitgevoerd na initialisatie van het veld voordat het wordt weergegeven. Wijziging van traits werkt het toetsenbord dynamisch bij bij de volgende verschijning.

Return Key Type en navigatie door het formulier

Return Key Type bepaalt de tekst van de knop op het toetsenbord: Next — ga naar volgende veld, Done — beëindig invoer, Search — start zoeken, Send — verzend formulier, Continue — ga door met invullen. In combinatie met de delegatemethode shouldReturn maakt returnKeyType het mogelijk een natuurlijke UX te creëren: de gebruiker vult velden in, drukt op Next om naar het volgende te gaan en op Done om op het laatste veld te verzenden. Gebruik UIButtonConfiguration in iOS 15+ voor het aanpassen van de knoptekst.

Placeholder, opmaak en invoermasker

Placeholder UITextField — is de tekst die in grijs wordt weergegeven wanneer het veld leeg is. Configuratie: textField.placeholder = "Enter email". Gebruik attributedPlaceholder met NSAttributedString voor het aanpassen van de kleur en het lettertype van de placeholder. Invoermasker wordt geïmplementeerd via de delegatemethode shouldChangeCharactersInRange — de indeling van telefoonnummer, datum, creditcard, SNILS wordt ondersteund. Het invoermasker maakt het mogelijk weergave en waarde te scheiden: de gebruiker ziet opgemaakte tekst (bijv. +7 (999) 999-99-99), terwijl in het model "79999999999" wordt opgeslagen. Implementatievoorbeeld: we slaan het masker op als een tekenreeks met X-symbolen voor vervanging; bij elke invoer maken we een opgemaakte reeks en retourneren we false in shouldChangeCharactersInRange, waarbij we de veldtekst vervangen via textField.text = formattedText. Gebruik NumberFormatter en decimal keyboardType voor getallen.

extension LoginViewController: UITextFieldDelegate {
    func textFieldShouldReturn(
        textField: UITextField
    ) -> Bool {
        if textField == emailField {
            passwordField.becomeFirstResponder()
        } else if textField == passwordField {
            textField.resignFirstResponder()
            loginTapped()
        }
        return true
    }

    func textField(
        textField: UITextField,
        shouldChangeCharactersIn range: NSRange,
        replacementString string: String
    ) -> Bool {
        // Spaties blokkeren in e-mail
        if textField == emailField && string == " " {
            return false
        }
        // Wachtwoordlengte limiet
        if textField == passwordField {
            let newLength = (textField.text?.count ?? 0) +
                string.count - range.length
            return newLength <= 32
        }
        return true
    }
}

Codevoorbeelden: validatie en formulier

Laten we een compleet voorbeeld bekijken van de implementatie van een inlogformulier met UITextField, e-mailvalidatie en visuele feedback. Het formulier bevat twee velden: emailField (emailAddress-toetsenbord, geen autocorrectie) en passwordField (secureTextEntry). Validatie wordt uitgevoerd in shouldChangeCharactersInRange en aanvullend bij het indrukken van de Login-knop. Voor visuele feedback: rode rand (layer.borderColor) bij fout, groen — bij succesvolle validatie. Reset van de rand bij begin van bewerken in textFieldDidBeginEditing.

E-mailvalidatie met reguliere expressie

E-mailvalidatie wordt uitgevoerd via NSPredicate met het formaat "SELF MATCHES %@" en een reguliere expressie voor basiscontrole van het formaat. De daadwerkelijke controle van het bestaan van de e-mail moet op de server worden uitgevoerd. Gebruik voor geavanceerde validatie de bibliotheek SwiftValidators of Combine publishers. Voorbeeld: NSPredicate(format: "SELF MATCHES [c] %@", emailRegex).evaluate(with: email). De rand van het veld wordt bijgewerkt via een animation block voor een vloeiende overgang.

func validateEmail(textField: UITextField) {
    guard let text = textField.text, !text.isEmpty else {
        textField.layer.borderColor = UIColor.clear.cgColor
        return
    }

    let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.\\p{L}{2,}"
    let predicate = NSPredicate(format: "SELF MATCHES [c] %@", emailRegex)
    let isValid = predicate.evaluate(with: text)

    UIView.animate(withDuration: 0.2) {
        textField.layer.borderColor = isValid
            ? UIColor.systemGreen.cgColor
            : UIColor.systemRed.cgColor
        textField.layer.borderWidth = 1.0
        textField.layer.cornerRadius = 6.0
    }
}