UITextField — ano ito, pagsasaayos ng input field at prinsipyo ng paggana

Ano ang UITextField

UITextField — ay isang klase ng UIKit framework na dinisenyo para sa isang-linya na text input ng gumagamit. Ang klase ay nagmamana ng UIControl, na nagpapahintulot ng pag-subscribe sa mga input event sa pamamagitan ng target-action mechanism: addTarget(self, action: Selector("textChanged:"), for: editingChanged). Ang UITextField ay nagpapakita ng border (borderStyle), placeholder text kapag walang laman ang field, clear button (clearButtonMode) at maaaring maglaman ng kaliwa/kanang pantulong na view. Ang field ay awtomatikong nagpapakita/nagtatago ng keyboard sa pagtanggap/pagkawala ng focus sa pamamagitan ng becomeFirstResponder at resignFirstResponder. Ang laki ng field ay tinutukoy ng intrinsicContentSize batay sa font at border style. Para sa paggawa ng UITextField sa Interface Builder (Storyboard/XIB) gamitin ang Object Library, programmatically — sa pamamagitan ng initializer na UITextField(frame: CGRect). Ang klase ay ganap na katugma sa modernong iOS architecture: Combine publishers, @Published sa SwiftUI sa pamamagitan ng UIViewRepresentable at Diffable Data Source para sa mga form.

Mga Uri ng Keyboard UIKeyboardType

UITextField ay sumusuporta sa 12 uri ng keyboard sa pamamagitan ng property na keyboardType. Bawat uri ay nag-o-optimize ng character set para sa isang partikular na input scenario. UIKeyboardType.default — karaniwang QWERTY keyboard. UIKeyboardType.numberPad — mga numero lamang walang karagdagang character (perpekto para sa PIN at numero ng telepono). UIKeyboardType.emailAddress — keyboard na may @ character at tuldok sa pangunahing layer. UIKeyboardType.URL — keyboard na may .com, / at . sa pangunahing layer. UIKeyboardType.phonePad — numeric keyboard na may +, *, # para sa pag-input ng mga numero ng telepono. UIKeyboardType.decimalPad — mga numero na may decimal point para sa pag-input ng presyo. UIKeyboardType.webSearch — keyboard na may Go button at optimization para sa search queries. UIKeyboardType.asciiCapable — mga ASCII character lamang para sa Latin alphabet. Ang keyboard ay ipinapakita kapag tinawag ang becomeFirstResponder at itinatago kapag resignFirstResponder. Ang uri ng keyboard ay maaaring baguhin nang dynamic sa panahon ng pag-edit.

Delegate UITextFieldDelegate at mga Paraan Nito

UITextFieldDelegate — ay isang protocol na tumutukoy sa pag-uugali ng text field sa iba't ibang yugto ng input. Mga pangunahing pamamaraan: textFieldShouldBeginEditing(textField) — nagbabalik ng Bool, nagpapahintulot o nagbabawal sa pagsisimula ng pag-edit; textFieldDidBeginEditing — tinatawag pagkatapos lumitaw ang keyboard; textFieldShouldEndEditing — sinusuri kung maaaring tapusin ang pag-edit (kung false ang field ay hindi nawawalan ng focus); textFieldDidEndEditing — tinatawag pagkatapos itago ang keyboard; textFieldShouldChangeCharactersInRange — tinatawag sa bawat input ng character, nagpapahintulot ng pag-filter ng input (isang character lamang ang pinapayagan, kung magbabalik ng false — ang character ay hindi idaragdag); textFieldShouldReturn — tinatawag kapag pinindot ang Return/Go/Next/Search, ginagamit para lumipat sa susunod na field. Ang delegate ay hindi Optional: lahat ng pamamaraan ay may default na implementasyon, ngunit para sa custom na pag-uugali kailangan i-override ang kaukulang pamamaraan.

Pamamahala ng focus sa pamamagitan ng shouldReturn

Pamamaraang shouldReturn — karaniwang pattern para sa pag-navigate sa pagitan ng mga field ng form. Implementasyon: textFieldShouldReturn(textField) — sinusuri namin kung aling textField ang nag-trigger ng event at inililipat ang focus sa susunod na field sa pamamagitan ng becomeFirstResponder(). Kung ito ang huling field — tinatawag namin ang resignFirstResponder() para itago ang keyboard. Para sa pag-iimbak ng mga reference sa mga field gamitin ang IBOutlet collection o hiwalay na IBOutlet para sa bawat field.

Secure Text Entry at custom na left/right view

isSecureTextEntry — property ng UITextField na kapag true ay pinapalitan ang mga input na character ng mga tuldok (•) at hinaharangan ang pagkopya ng text sa pamamagitan ng UIMenuController. Ginagamit para sa mga field ng password, PIN, CVV. Kapag lumilipat sa pagitan ng secure mode at ordinaryong text (show/hide password) itakda ang textField.isSecureTextEntry.toggle(). Mahalaga: kapag binago ang isSecureTextEntry ang text ng field ay nirerese — i-save ito nang maaga. LeftView at RightView — ay mga custom na UIView na ipinapakita sa loob ng input field sa kaliwa o kanan. Karaniwang paggamit: icon ng paghahanap sa leftView, button na "Burahin" sa rightView. Pagsasaayos: textField.leftViewMode = always (palagi) o whileEditing (habang nag-e-edit). Ang left/right view ay awtomatikong naka-position sa loob ng text field na isinasaalang-alang ang padding. Ang laki ng view ay tinutukoy ng bounds o 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

        // Custom na button para sa pagpapakita/pagtatago ng password
        let showButton = UIButton(type: .system)
        showButton.setTitle("Ipakita", for: .normal)
        showButton.addTarget(self, action: #selector(togglePasswordVisibility),
                       for: .touchUpInside)
        passwordField.rightView = showButton
        passwordField.rightViewMode = .always
    }

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

Pagsasaayos ng UITextInputTraits

UITextInputTraits — ay isang protocol na tumutukoy sa visual at behavioral na pagsasaayos ng keyboard para sa UITextField. Mga pangunahing property: autocorrectionType (.default, .no, .yes) — binubuksan o pinapatay ang auto-correction ng text; autocapitalizationType (.none, .words, .sentences, .allCharacters) — awtomatikong Caps Lock para sa unang character; spellCheckingType — pag-check ng spelling; returnKeyType (.done, .go, .next, .search, .send, .continue, .join, .route, .emergencyCall) — text ng Return button sa keyboard; enablesReturnKeyAutomatically — awtomatikong pag-block ng Return button kapag walang laman ang field. Para sa mga field ng pag-input ng pangalan gamitin ang autocapitalizationType = .words, para sa email — autocorrectionType = .no, para sa URL — keyboardType = .URL + autocapitalizationType = .none. Ang pagsasaayos ng traits ay ginagawa pagkatapos ng initialisation ng field bago ito ipakita. Ang pagbabago ng traits ay dynamic na ina-update ang keyboard sa susunod na paglitaw.

Return Key Type at pag-navigate sa form

Return Key Type ay tumutukoy sa text ng button sa keyboard: Next — pumunta sa susunod na field, Done — tapusin ang input, Search — simulan ang paghahanap, Send — ipadala ang form, Continue — ipagpatuloy ang pagpuno. Sa kombinasyon ng delegate method na shouldReturn, ang returnKeyType ay nagpapahintulot ng paglikha ng natural na UX: pinupuno ng gumagamit ang mga field, pinipindot ang Next para pumunta sa susunod at Done para magpadala sa huling field. Para sa pag-customize ng text ng button gamitin ang UIButtonConfiguration sa iOS 15+.

Placeholder, Pag-format at Input Mask

Placeholder UITextField — ay ang text na ipinapakita sa kulay-abo kapag walang laman ang field. Pagsasaayos: textField.placeholder = "Enter email". Para sa pag-customize ng kulay at font ng placeholder gamitin ang attributedPlaceholder na may NSAttributedString. Input mask ay ipinatupad sa pamamagitan ng delegate method na shouldChangeCharactersInRange — ang format ng numero ng telepono, petsa, credit card, SNILS ay sinusuportahan. Ang input mask ay nagpapahintulot ng paghihiwalay ng display at value: nakikita ng gumagamit ang na-format na text (hal., +7 (999) 999-99-99), habang sa model ay naka-imbak ang "79999999999". Halimbawa ng implementasyon: iniimbak namin ang mask bilang string na may X symbol para sa kapalit; sa bawat input gumagawa kami ng na-format na string at nagbabalik ng false sa shouldChangeCharactersInRange, pinapalitan ang text ng field sa pamamagitan ng textField.text = formattedText. Para sa mga numero gamitin ang NumberFormatter at decimal keyboardType.

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 {
        // I-block ang mga espasyo sa email
        if textField == emailField && string == " " {
            return false
        }
        // Limitasyon ng haba ng password
        if textField == passwordField {
            let newLength = (textField.text?.count ?? 0) +
                string.count - range.length
            return newLength <= 32
        }
        return true
    }
}

Halimbawa ng Code: Pagpapatunay at Form

Isaalang-alang natin ang kumpletong halimbawa ng implementasyon ng login form na may UITextField, pagpapatunay ng email at visual na feedback. Ang form ay naglalaman ng dalawang field: emailField (emailAddress keyboard, walang autocorrection) at passwordField (secureTextEntry). Ang pagpapatunay ay ginagawa sa shouldChangeCharactersInRange at karagdagang kapag pinindot ang Login button. Para sa visual na feedback: pulang border (layer.borderColor) kapag may error, berde — kapag matagumpay na pagpapatunay. Pag-reset ng border sa pagsisimula ng pag-edit sa textFieldDidBeginEditing.

Pagpapatunay ng email na may regular na expression

Pagpapatunay ng email ay ginagawa sa pamamagitan ng NSPredicate na may format na "SELF MATCHES %@" at regular na expression para sa pangunahing pag-check ng format. Ang aktwal na pag-check ng pagkakaroon ng email ay dapat gawin sa server. Para sa advanced na pagpapatunay gamitin ang library na SwiftValidators o Combine publishers. Halimbawa: NSPredicate(format: "SELF MATCHES [c] %@", emailRegex).evaluate(with: email). Ang border ng field ay ina-update sa pamamagitan ng animation block para sa makinis na transition.

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