Jetpack Compose Basics - Text Input
Technology
3
 min read
November 2, 2021

Jetpack Compose Basics - Text Input

Peter Šuly
Peter Šuly
Android developer

Textové pole je súčasť používateľského rozhrania, ktorá umožňuje používateľom zadávať textové informácie, spravidla vo formulároch. Textové polia v Material dizajne majú dva typy: Vyplnené textové polia alebo Obrysové textové polia. Oba poskytujú rovnakú funkcionalitu, takže tvoj výber by mal byť založený na preferenciách štýlu. Neodporúča sa ich miešať.

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)

Anatomy of text field as stated in Material design guidelines

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

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.