Korisnički unos i tastature u mobilnom razvoju: šta je to, komponente i kako funkcioniše

Šta je korisnički unos u mobilnim aplikacijama?

Korisnički unos u mobilnim aplikacijama je proces prenosa podataka od korisnika do aplikacije putem ekrana osetljivog na dodir i virtuelne tastature. Na iOS-u, glavni alat je UITextField; na Android-u, to je EditText. Korisnički unos obuhvata tekstualna polja, formulare za registraciju, upite za pretragu, telefonske brojeve i kodove za potvrdu. Kvalitet implementacije korisničkog unosa utiče na brzinu popunjavanja formulara i konverziju mobilne aplikacije.

Zašto je važna pravilna organizacija korisničkog unosa

Nepravilna obrada korisničkog unosa u mobilnom razvoju dovodi do grešaka validacije, ranjivosti i gubitka korisnika. Prema Statista (2025), 67% korisnika briše mobilnu aplikaciju nakon dva neuspešna pokušaja unosa. Pravilna implementacija korisničkog unosa uključuje podešavanje tipa tastature, validaciju, formatiranje i automatsko popunjavanje. U mobilnom razvoju, ovi aspekti su standardizovani od strane obe platforme.

Glavne komponente korisničkog unosa

Tastatura u mobilnim aplikacijama se podešava kroz keyboardType na iOS-u i inputType na Android-u. Korisnička podešavanja uključuju autokorekciju, automatsko popunjavanje i bezbedan unos lozinke. Responder Chain na iOS-u i fokus na Android-u kontrolišu prikazivanje i skrivanje tastature. Za korisnički unos u mobilnim aplikacijama, Keyboard Avoidance je kritična — sadržaj ne sme biti prekriven tastaturom.

Polja za unos na iOS-u: UITextField i UITextView

Na iOS-u, glavni elementi korisničkog unosa su UITextField za jednolinijski tekst i UITextView za višelinijski tekst. Oba podržavaju delegate UITextFieldDelegate i UITextViewDelegate za upravljanje početkom, promenom i krajem uređivanja. Podešavanje tastature u iOS mobilnim aplikacijama vrši se kroz svojstva keyboardType, returnKeyType i isSecureTextEntry.

Text Content Type i automatsko popunjavanje

Svojstvo textContentType sugeriše sistemu koji podaci se očekuju u polju — username, password, oneTimeCode, emailAddress. Ovo uključuje automatsko popunjavanje iz lanca ključeva i ubrzava korisnički unos. Za polja sa Secure Text Entry, navedite .password kako bi menadžer lozinki ispravno sačuvao akreditive. Upotreba textContentType poboljšava korisnički unos u mobilnim aplikacijama.

let textField = UITextField()
textField.placeholder = "Email"
textField.keyboardType = .emailAddress
textField.textContentType = .emailAddress
textField.autocorrectionType = .no
textField.becomeFirstResponder()

Responder Chain i upravljanje fokusom

First Responder je aktivno polje koje prima događaje sa tastature. Pozivanje becomeFirstResponder() prikazuje tastaturu, resignFirstResponder() je skriva. Responder Chain sekvencijalno proverava da li element može da obradi događaj. Kada postoji više polja, važno je upravljati First Responder-om kako tastatura ne bi ostala otvorena. Korisničkim unosom u mobilnim aplikacijama takođe upravlja textFieldShouldReturn — pritiskom na Return prelazi se na sledeće polje.

Polja za unos na Android-u: EditText i TextInputLayout

Na Android-u, analog UITextField-a je EditText, koji podržava jednolinijski i višelinijski režim kroz atribut inputType. Za Material polja, koristite TextInputLayout iz biblioteke com.google.android.material — dodaje plutajući hint, brojač karaktera i podršku za greške. Korisnički unos u Android mobilnim aplikacijama podešava se kroz inputType i imeOptions.

InputType i imeOptions

Atribut inputType određuje tip tastature i režim unosa: text za običan tekst, textPassword za lozinke, number za cifre, phone za telefonsku tastaturu. imeOptions kontroliše radnju na tasteru Enter — Done, Next, Search, Send. Kombinujte vrednosti pomoću bitovskog ILI: text|textCapSentences. Tastature u Android mobilnim aplikacijama podržavaju automatsko popunjavanje kroz autofillHints.

val editText = EditText(this)
editText.inputType = InputType.TYPE_CLASS_PHONE
editText.imeOptions = EditorInfo.IME_ACTION_DONE
editText.autofillHints = "phone"

val layout = TextInputLayout(this)
layout.hint = "Номер телефона"
layout.addView(editText)

Obrada grešaka kroz setError

TextInputLayout.setError() prikazuje poruku o grešci ispod polja za unos. Kombinujte trenutnu validaciju kroz TextWatcher i konačnu validaciju pri slanju obrasca. Korisnički unos u mobilnim aplikacijama takođe uključuje fokus — requestFocus() aktivira polje i prikazuje tastaturu. Koristite clearFocus() za skrivanje tastature kada je korisnički unos na Android-u završen.

Tastatura u mobilnim aplikacijama: Keyboard Avoidance

Tastatura u mobilnim aplikacijama ne sme da prekriva polja za unos — ovo je osnovni UX zahtev. Keyboard Avoidance je tehnika pomeranja sadržaja kada se tastatura pojavi. Na iOS-u, koristite UIResponder.keyboardWillShowNotification za dobijanje veličine tastature i pomeranje scrollView. Na Android-u, navedite adjustResize u manifestu ili koristite CoordinatorLayout. Tastature u mobilnim aplikacijama se različito konfigurišu na dve platforme, ali cilj je isti — sadržaj je uvek vidljiv.

Keyboard Avoidance na iOS-u

Na iOS-u, pretplatite se na obaveštenja keyboardWillShowNotification i keyboardWillHideNotification putem NotificationCenter. U rukovaocu, dobijte veličinu tastature iz userInfo i postavite contentInset na UIScrollView. Alternativno, koristite IQKeyboardManager koji automatski obrađuje pomeranje. Korisnički unos u iOS mobilnom razvoju zahteva obaveznu obradu tastature za udoban UX.

Keyboard Avoidance na Android-u

Na Android-u, glavni metod je android:windowSoftInputMode="adjustResize" u manifestu. Ova zastavica komprimuje raspored kada se tastatura pojavi. Za CoordinatorLayout, koristite Behavior koji podiže dugmad i polja. Koristite ViewCompat.setOnApplyWindowInsetsListener za preciznu kontrolu margina. Tastaturom u Android mobilnoj aplikaciji takođe upravlja OnGlobalLayoutListener.

Validacija i formatiranje korisničkog unosa

Validacija korisničkog unosa je obavezan korak u obradi podataka u mobilnim aplikacijama. Bez nje, aplikacija prima netačne podatke, što dovodi do grešaka i ranjivosti. Korisnički unos u mobilnim aplikacijama zahteva dva pristupa: trenutnu validaciju (pri svakom karakteru) za brojeve i kodove i konačnu validaciju za email i lozinke. Input Mask automatski formatira telefon, datum i broj kartice.

Input Mask na iOS-u i Android-u

Input Mask definiše šablon unosa prema kojem se tekst automatski formatira. Primer maske za ruski broj telefona: "+7 (___) ___-__-__". Na iOS-u, Input Mask se implementira kroz delegata textField(_:shouldChangeCharactersIn:replacementString:). Na Android-u, koristite InputFilter sa praćenjem pozicije karaktera. Za međunarodne brojeve, koristite biblioteku libphonenumber od Google-a.

func textField(
    _ textField: UITextField,
    shouldChangeCharactersIn range: NSRange,
    replacementString string: String
) -> Bool {
    guard let text = textField.text else { return true }
    let masked = applyPhoneMask(text, mask: "+7 (***) ***-**-**")
    textField.text = masked
    return false
}

Poređenje pristupa iOS i Android