UITextField — mi az, a beviteli mező beállítása és működési elve

Mi az UITextField

UITextField — a UIKit keretrendszer egy osztálya, amely egysoros szöveg felhasználó általi bevitelére szolgál. Az osztály a UIControlból származik, ami lehetővé teszi a beviteli eseményekre való feliratkozást a target-action mechanizmuson keresztül: addTarget(self, action: Selector("textChanged:"), for: editingChanged). Az UITextField keretet (borderStyle), helyőrző szöveget üres mező esetén, törlő gombot (clearButtonMode) jelenít meg, és tartalmazhat bal/jobb segéd nézeteket. A mező automatikusan megjeleníti/elrejti a billentyűzetet a fókusz felvételekor/elveszítésekor a becomeFirstResponder és resignFirstResponder segítségével. A mező méretét az intrinsicContentSize határozza meg a font és border style alapján. UITextField létrehozásához az Interface Builder-ben (Storyboard/XIB) az Object Library-t használjuk, programozottan — az UITextField(frame: CGRect) inicializátoron keresztül. Az osztály teljes mértékben kompatibilis a modern iOS architektúrával: Combine publishers, @Published SwiftUI-ben UIViewRepresentable-en keresztül és Diffable Data Source űrlapokhoz.

UIKeyboardType billentyűzettípusok

UITextField 12 billentyűzettípust támogat a keyboardType tulajdonságon keresztül. Minden típus optimalizálja a karakterkészletet egy adott beviteli forgatókönyvhöz. UIKeyboardType.default — szabványos QWERTY billentyűzet. UIKeyboardType.numberPad — csak számjegyek további karakterek nélkül (ideális PIN-kódokhoz és telefonszámokhoz). UIKeyboardType.emailAddress — billentyűzet @ jellel és ponttal a fő rétegen. UIKeyboardType.URL — billentyűzet .com, / és . karakterekkel a fő rétegen. UIKeyboardType.phonePad — numerikus billentyűzet +, *, # karakterekkel telefonszámok beviteléhez. UIKeyboardType.decimalPad — számjegyek tizedes ponttal árak beviteléhez. UIKeyboardType.webSearch — billentyűzet Go gombbal és optimalizálással keresési lekérdezésekhez. UIKeyboardType.asciiCapable — csak ASCII karakterek a latin ábécéhez. A billentyűzet a becomeFirstResponder hívásakor jelenik meg és a resignFirstResponder hívásakor elrejtőzik. A billentyűzet típusa dinamikusan változtatható szerkesztés közben.

UITextFieldDelegate delegált és metódusai

UITextFieldDelegate — egy protokoll, amely meghatározza a szöveges mező viselkedését a bevitel különböző szakaszaiban. Fő metódusok: textFieldShouldBeginEditing(textField) — Bool értéket ad vissza, engedélyezve vagy megtiltva a szerkesztés megkezdését; textFieldDidBeginEditing — a billentyűzet megjelenése után hívódik meg; textFieldShouldEndEditing — ellenőrzi, hogy a szerkesztés befejezhető-e (false esetén a mező nem veszíti el a fókuszt); textFieldDidEndEditing — a billentyűzet elrejtése után hívódik meg; textFieldShouldChangeCharactersInRange — minden karakter bevitelekor meghívódik, lehetővé teszi a bevitel szűrését (csak egy karakter engedélyezett, ha false-t ad vissza — a karakter nem kerül hozzáadásra); textFieldShouldReturn — a Return/Go/Next/Search megnyomásakor hívódik meg, a következő mezőre ugráshoz használatos. A delegált nem Optional: minden metódusnak van alapértelmezett implementációja, de egyedi viselkedéshez felül kell írni a megfelelő metódust.

Fókusz kezelése a shouldReturn segítségével

shouldReturn metódus — a szabványos minta az űrlapmezők közötti navigációhoz. Implementáció: textFieldShouldReturn(textField) — ellenőrizzük, melyik textField váltotta ki az eseményt, és áthelyezzük a fókuszt a következő mezőre a becomeFirstResponder() segítségével. Ha ez az utolsó mező — meghívjuk a resignFirstResponder()-t a billentyűzet elrejtéséhez. A mezőkre való hivatkozások tárolásához használjon IBOutlet collection-t vagy külön IBOutlet-et minden mezőhöz.

Secure Text Entry és egyedi left/right view

isSecureTextEntry — az UITextField tulajdonsága, amely true érték esetén a bevitt karaktereket pontokkal (•) helyettesíti, és blokkolja a szöveg másolását az UIMenuController-en keresztül. Jelszó, PIN-kód, CVV mezőkhöz használatos. A biztonságos mód és a normál szöveg közötti váltáskor (show/hide password) állítsa be a textField.isSecureTextEntry.toggle() értéket. Fontos: az isSecureTextEntry megváltoztatásakor a mező szövege visszaáll — mentse el előzőleg. LeftView és RightView — egyedi UIView-ek, amelyek a beviteli mezőn belül balra vagy jobbra jelennek meg. Tipikus használat: keresőikon a leftView-ben, "Törlés" gomb a rightView-ben. Beállítás: textField.leftViewMode = always (mindig) vagy whileEditing (csak szerkesztéskor). A left/right view automatikusan pozicionálódik a szöveges mezőn belül, figyelembe véve a padding-et. A view méretét a bounds vagy Auto Layout határozza meg.

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

        // Egyéni gomb jelszó megjelenítéséhez/elrejtéséhez
        let showButton = UIButton(type: .system)
        showButton.setTitle("Mutat", for: .normal)
        showButton.addTarget(self, action: #selector(togglePasswordVisibility),
                       for: .touchUpInside)
        passwordField.rightView = showButton
        passwordField.rightViewMode = .always
    }

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

UITextInputTraits beállítása

UITextInputTraits — egy protokoll, amely meghatározza a billentyűzet vizuális és viselkedési beállítását az UITextField számára. Fő tulajdonságok: autocorrectionType (.default, .no, .yes) — be- vagy kikapcsolja a szöveg automatikus javítását; autocapitalizationType (.none, .words, .sentences, .allCharacters) — automatikus Caps Lock az első karakterhez; spellCheckingType — helyesírás-ellenőrzés; returnKeyType (.done, .go, .next, .search, .send, .continue, .join, .route, .emergencyCall) — a Return gomb szövege a billentyűzeten; enablesReturnKeyAutomatically — a Return gomb automatikus blokkolása üres mező esetén. Névbeviteli mezőkhöz használjon autocapitalizationType = .words, emailhez — autocorrectionType = .no, URL-hez — keyboardType = .URL + autocapitalizationType = .none értéket. A traits beállítása a mező inicializálása után, a megjelenítés előtt történik. A traits megváltoztatása dinamikusan frissíti a billentyűzetet a következő megjelenéskor.

Return Key Type és navigáció az űrlapon

Return Key Type határozza meg a gomb szövegét a billentyűzeten: Next — ugrás a következő mezőre, Done — bevitel befejezése, Search — keresés indítása, Send — űrlap küldése, Continue — kitöltés folytatása. A shouldReturn delegált metódussal kombinálva a returnKeyType természetes UX létrehozását teszi lehetővé: a felhasználó kitölti a mezőket, a Next-re kattintva a következőre lép, és a Done-ra az utolsó mezőn a küldéshez. A gomb szövegének testreszabásához használja az UIButtonConfiguration-t iOS 15+ rendszerben.

Placeholder, formázás és beviteli maszk

Placeholder UITextField — a szürke színnel megjelenő szöveg, amikor a mező üres. Beállítás: textField.placeholder = "Enter email". A placeholder színének és betűtípusának testreszabásához használja az attributedPlaceholder tulajdonságot NSAttributedString-el. Beviteli maszk a shouldChangeCharactersInRange delegált metóduson keresztül valósul meg — a telefonszám, dátum, bankkártya, SNILS formátum támogatott. A beviteli maszk lehetővé teszi a megjelenítés és az érték szétválasztását: a felhasználó formázott szöveget lát (pl. +7 (999) 999-99-99), míg a modellben a "79999999999" tárolódik. Implementációs példa: a maszkot X helyettesítő karakterekkel rendelkező karakterláncként tároljuk; minden bevitelkor létrehozzuk a formázott karakterláncot, és false-t adunk vissza a shouldChangeCharactersInRange-ben, a mező szövegét a textField.text = formattedText segítségével helyettesítve. Számokhoz használja a NumberFormatter-t és a decimal keyboardType-ot.

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 {
        // Szóközök blokkolása az emailben
        if textField == emailField && string == " " {
            return false
        }
        // Jelszó hosszának korlátozása
        if textField == passwordField {
            let newLength = (textField.text?.count ?? 0) +
                string.count - range.length
            return newLength <= 32
        }
        return true
    }
}

Kódpéldák: érvényesítés és űrlap

Tekintsünk egy teljes példát a bejelentkezési űrlap implementációjára UITextField-fel, email érvényesítéssel és vizuális visszajelzéssel. Az űrlap két mezőt tartalmaz: emailField (emailAddress billentyűzet, nincs automatikus javítás) és passwordField (secureTextEntry). Az érvényesítés a shouldChangeCharactersInRange-ben és a Login gomb megnyomásakor történik. Vizuális visszajelzéshez: piros keret (layer.borderColor) hiba esetén, zöld — sikeres érvényesítéskor. A keret visszaállítása a szerkesztés megkezdésekor a textFieldDidBeginEditing-ben.

Email érvényesítés reguláris kifejezéssel

Email érvényesítés a NSPredicate-en keresztül történik "SELF MATCHES %@" formátummal és reguláris kifejezéssel a formátum alapellenőrzéséhez. Az email létezésének tényleges ellenőrzését a szerveren kell elvégezni. Fejlett érvényesítéshez használja a SwiftValidators könyvtárat vagy a Combine publishers-eket. Példa: NSPredicate(format: "SELF MATCHES [c] %@", emailRegex).evaluate(with: email). A mező kerete az animation block-on keresztül frissül a sima átmenet érdekében.

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