Oba typy textových polí pozostávajú z kontajnera (1), voliteľnej úvodnej ikony (2), štítka (3), vstupného textu (4), voliteľnej koncovej ikony (5), indikátora aktivácie (6) a voliteľného pomocného textu (7)
Obrysové textové pole v Jetpack Compose
Compose poskytuje OutlinedTextField, ktorý je composable tak, aby spĺňal špecifikáciu Material Designu. Bez ďalšieho prispôsobenia vyzerá OutlinedTextField takto
Táto composable má okolo 20 parametrov, ale iba dve z nich sú povinné.
- value - text zobrazený v textovom poli
- onValueChange - callback sa spustí, keď vstupná služba aktualizuje text, ktorý je parametrom callbacku
Voliteľné parametre, ktoré môžu byť customizovateľné sú:
- modifier - slúži na zmeny zo strany volajúceho
- enabled - boolean, ktorý riadi, či je textové pole v enabled state. Ak je povolená možnosť false, textové pole nie je možné upravovať, focusovať ani vyberať.
- readOnly - keď je parameter true, text v poli je možné focusovať a používateľ ho môže kopírovať, ale nemôže ho upravovať
- štýl textu - štýl vstupného textu. Dá sa ľahko upraviť napr. takto ⬇️
- label - štítok, ktorý sa má zobraziť vo vnútri kontajnera alebo v focusnutom stave na vrchu kontajnera. Dá sa použiť takto ⬇️
- placeholder - zástupný symbol, ktorý sa má zobraziť, ak je pole prázdne
- leadingIcon - composables, ktoré sa majú zobraziť na začiatku poľa
- trailingIcon - v zásade to isté ako leaderIcon, ale na konci poľa
- isError - označuje, či je aktuálna textová hodnota v chybovom stave. Ak je nastavený na hodnotu true, štítok chyby a koncová ikona sa zobrazia zafarbené na chybovú farbu. Ak nie je zadaný žiadny štítok a koncová ikona, iba kontajner bude zafarbený na chybovú farbu
- visualTransformation - transformuje vizuálnu reprezentáciu vstupnej hodnoty, napríklad ukazuje '*' pri písaní hesla. Pre tento prípad použitia existuje PasswordVisualTransformation, ale je ľahké implementovať svoj vlastný
- keyboardOptions - možnosti softvérovej klávesnice používané na konfiguráciu KeyboardType, ImeAction a ďalších
- keyboardActions - keď vstupná služba vyšle akciu, zavolá sa zodpovedajúci callback
- singleLine - či má byť text iba na jednom riadku s horizontálnym posúvaním. Parameter maxLines je ignorovaný, ak je singleLine pravdivé
- maxLines - maximálny počet riadkov
- actionSource - MutableInteractionSource predstavujúci prúd interakcií pre túto composable zložku. Možno použiť, ak chcete sledovať interakcie a prispôsobiť vzhľad alebo správanie skladateľných skladieb
- shape - tvar okraja polí
- colors - inštancia objektu TextFieldColors ovládajúceho farbu častí poľa. Dajú sa ľahko zmeniť týmto spôsobom ⬇️
Vyplnené textové pole v Jetpack Compose
Compose poskytuje textové pole, ktoré je možné zostaviť tak, aby spĺňalo Material Design špecifikáciu vyplneného textového poľa. Bez ďalšieho prispôsobenia vyzerá textové pole takto:
Všetky parametre composable funkcie TextField sú rovnaké ako pre OutlinedTextField (okrem iného tvaru a farieb) a majú rovnaké použitie.
Pole TextField, ktoré je nastavené ako false
Textové pole so štítkom
Textové pole s úvodnou ikonou
TextField v chybovom stave
Ďalšie články zo série Jetpack Compose Basics: