Jetpack Compose Basics - Ako používať text field composables pre splnenie Material design špecifikácie

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:

• Vyskúšaj Scaffold a zostav niekoľko materiálových komponentov so správnym rozložením!
• Nauč sa používať Snackbar správne
• Ako načítať obrázky z Bitmapy, Vectoru, Painteru alebo z URL pomocou funkcie Coil
• Ako používať Backdrop Scaffold composable
• Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet
• Ako používať a vytvoriť vlastný CompositionLocal