Uživatelský vstup a klávesnice v mobilním vývoji: co to je, komponenty a jak to funguje

Co je uživatelský vstup v mobilních aplikacích?

Uživatelský vstup v mobilních aplikacích je proces přenosu dat od uživatele do aplikace prostřednictvím dotykové obrazovky a virtuální klávesnice. V iOS je hlavním nástrojem UITextField, v Android je to EditText. Uživatelský vstup zahrnuje textová pole, registrační formuláře, vyhledávací dotazy, telefonní čísla a potvrzovací kódy. Kvalita implementace uživatelského vstupu ovlivňuje rychlost vyplňování formulářů a konverzi mobilní aplikace.

Proč je důležitá správná organizace uživatelského vstupu

Nesprávné zpracování uživatelského vstupu v mobilním vývoji vede k chybám validace, zranitelnostem a ztrátě uživatelů. Podle Statista (2025) 67% uživatelů smaže mobilní aplikaci po dvou neúspěšných pokusech o vstup. Správná implementace uživatelského vstupu zahrnuje konfiguraci typu klávesnice, validaci, formátování a automatické vyplňování. V mobilním vývoji jsou tyto aspekty standardizovány oběma platformami.

Hlavní komponenty uživatelského vstupu

Klávesnice v mobilních aplikacích se konfiguruje pomocí keyboardType v iOS a inputType v Android. Uživatelská nastavení zahrnují automatickou opravu, automatické vyplňování a bezpečné zadávání hesla. Responder Chain v iOS a fokus v Android řídí zobrazení a skrytí klávesnice. Pro uživatelský vstup v mobilních aplikacích je Keyboard Avoidance kritické — obsah nesmí být klávesnicí zakryt.

Vstupní pole v iOS: UITextField a UITextView

V iOS jsou hlavními prvky uživatelského vstupu UITextField pro jednořádkový text a UITextView pro víceřádkový text. Oba podporují delegáty UITextFieldDelegate a UITextViewDelegate pro správu začátku, změny a konce úprav. Konfigurace klávesnice v iOS mobilních aplikacích se provádí prostřednictvím vlastností keyboardType, returnKeyType a isSecureTextEntry.

Text Content Type a automatické vyplňování

Vlastnost textContentType napovídá systému, jaká data jsou v poli očekávána — username, password, oneTimeCode, emailAddress. To zapíná automatické vyplňování z klíčenky a urychluje uživatelský vstup. Pro pole s Secure Text Entry zadejte .password, aby správce hesel správně ukládal přihlašovací údaje. Použití textContentType zlepšuje uživatelský vstup v mobilních aplikacích.

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

Responder Chain a správa fokusu

First Responder je aktivní pole, které přijímá události z klávesnice. Volání becomeFirstResponder() zobrazí klávesnici, resignFirstResponder() ji skryje. Responder Chain postupně kontroluje, zda prvek může zpracovat událost. Při více polích je důležité spravovat First Responder, aby klávesnice nezůstala otevřená. Uživatelský vstup v mobilních aplikacích je také řízen textFieldShouldReturn — stisknutí Return přepne na další pole.

Vstupní pole v Android: EditText a TextInputLayout

V Android je obdobou UITextField EditText, který podporuje jednořádkový a víceřádkový režim prostřednictvím atributu inputType. Pro pole Material použijte TextInputLayout z knihovny com.google.android.material — přidává plovoucí nápovědu, počítadlo znaků a podporu chyb. Uživatelský vstup v Android mobilních aplikacích se konfiguruje pomocí inputType a imeOptions.

InputType a imeOptions

Atribut inputType určuje typ klávesnice a režim vstupu: text pro běžný text, textPassword pro hesla, number pro číslice, phone pro telefonní klávesnici. imeOptions řídí akci na tlačítku Enter — Done, Next, Search, Send. Hodnoty kombinujte bitovým OR: text|textCapSentences. Klávesnice v Android mobilních aplikacích podporují automatické vyplňování prostřednictvím 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)

Zpracování chyb pomocí setError

TextInputLayout.setError() zobrazí chybovou zprávu pod vstupním polem. Kombinujte okamžitou validaci přes TextWatcher a konečnou validaci při odesílání formuláře. Uživatelský vstup v mobilních aplikacích zahrnuje také fokus — requestFocus() aktivuje pole a zobrazí klávesnici. Použijte clearFocus() pro skrytí klávesnice po dokončení uživatelského vstupu v Android.

Klávesnice v mobilních aplikacích: Keyboard Avoidance

Klávesnice v mobilních aplikacích nesmí zakrývat vstupní pole — to je základní požadavek UX. Keyboard Avoidance je technika posunu obsahu při zobrazení klávesnice. V iOS použijte UIResponder.keyboardWillShowNotification k získání velikosti klávesnice a posunu scrollView. V Android zadejte adjustResize v manifestu nebo použijte CoordinatorLayout. Klávesnice v mobilních aplikacích se konfigurují na obou platformách odlišně, ale cíl je stejný — obsah je vždy viditelný.

Keyboard Avoidance v iOS

V iOS se přihlaste k odběru oznámení keyboardWillShowNotification a keyboardWillHideNotification prostřednictvím NotificationCenter. V obslužné rutině získejte velikost klávesnice z userInfo a nastavte contentInset na UIScrollView. Alternativně použijte IQKeyboardManager, který automaticky zpracovává posun. Uživatelský vstup v iOS mobilním vývoji vyžaduje povinné zpracování klávesnice pro pohodlné UX.

Keyboard Avoidance v Android

V Android je hlavní metodou android:windowSoftInputMode="adjustResize" v manifestu. Tento příznak komprimuje rozvržení při zobrazení klávesnice. Pro CoordinatorLayout použijte Behavior, který zvedá tlačítka a pole. Použijte ViewCompat.setOnApplyWindowInsetsListener pro přesnou kontrolu okrajů. Klávesnice v Android mobilní aplikaci je také spravována OnGlobalLayoutListener.

Validace a formátování uživatelského vstupu

Validace uživatelského vstupu je povinným krokem při zpracování dat v mobilních aplikacích. Bez ní aplikace přijímá nesprávná data, což vede k chybám a zranitelnostem. Uživatelský vstup v mobilních aplikacích vyžaduje dva přístupy: okamžitou validaci (při každém znaku) pro čísla a kódy a konečnou validaci pro e-mail a hesla. Input Mask automaticky formátuje telefon, datum a číslo karty.

Input Mask v iOS a Android

Input Mask definuje vzor vstupu, podle kterého se text automaticky formátuje. Příklad masky pro ruské telefonní číslo: "+7 (___) ___-__-__". V iOS je Input Mask implementován prostřednictvím delegáta textField(_:shouldChangeCharactersIn:replacementString:). V Android použijte InputFilter se sledováním pozice znaků. Pro mezinárodní čísla použijte knihovnu libphonenumber od Google.

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
}

Srovnání přístupů iOS a Android