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
   

@Composable
fun OutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
)

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 ⬇️

label = { Text(text = "Label for text") }

• placeholder - zástupný symbol, ktorý sa má zobraziť, ak je pole prázdne

placeholder = { Text(text = "Placeholder for text") }

• leadingIcon - composables, ktoré sa majú zobraziť na začiatku poľa

leadingIcon = { Icon(imageVector = Icons.Default.Info, contentDescription = "") }

//OR

leadingIcon = { Text(text = "$") }

• 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ý

visualTransformation = PasswordVisualTransformation()

• keyboardOptions - možnosti softvérovej klávesnice používané na konfiguráciu KeyboardType, ImeAction a ďalších

keyboardOptions = KeyboardOptions.Default.copy(
    capitalization = KeyboardCapitalization.Words,
    autoCorrect = false,
    keyboardType = KeyboardType.Text,
    imeAction = ImeAction.Search
)

• keyboardActions - keď vstupná služba vyšle akciu, zavolá sa zodpovedajúci callback

keyboardActions = KeyboardActions(
    onAny = {} // do when ANY of ime actions is emitted
)

//OR

keyboardActions = KeyboardActions(
    onDone = {}, // do when SPECIFIED action is emitted
    onSearch = {},
    .
    .
}

• 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 ⬇️

colors = TextFieldDefaults.outlinedTextFieldColors(
    focusedBorderColor = Color.Yellow,
    leadingIconColor = Color.Yellow
)

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