Jetpack Compose Basics –⁠ Jak používat text field composables pro splnění specifikace Material designu

Oba typy textových polí se skládají z kontejneru (1), volitelné úvodní ikony (2), štítku (3), vstupního textu (4), volitelné koncové ikony (5), indikátoru aktivace (6) a volitelného pomocného textu (7).

Obrysové textové pole v Jetpack Compose

Compose poskytuje OutlinedTextField, které je composable tak, aby splňovalo specifikaci Material designu. Bez dalšího přizpůsobení vypadá OutlinedTextField takto

Tento composable má asi 20 parametrů, ale pouze dva z nich jsou povinné.

• value – text zobrazený v textovém poli
• onValueChange – callback se spustí, když vstupní služba aktualizuje text, který je parametrem 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()
)

Volitelné parametry, které je možné přizpůsobit, jsou:

• modifier – používá se pro změny ze strany volajícího
• enabled – boolean, který určuje, zda je textové pole ve stavu enabled. Pokud je povolena možnost false, textové pole nelze upravovat, aktivovat ani vybírat.

• readOnly – pokud je parametr true, text v poli je možné aktivovat a uživatel ho může kopírovat, ale nemůže ho upravovat
• styl textu – styl vstupního textu. Dá se snadno upravit například takto ⬇️
• label – štítek, který se má zobrazit uvnitř kontejneru nebo v aktivovaném stavu na vrchu kontejneru. Dá se použít takto ⬇️

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

• placeholder – zástupný symbol, který se má zobrazit, pokud je pole prázdné

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

• leadingIcon – composables, které se mají zobrazit na začátku pole

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

//OR

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

• trailingIcon – v podstatě totéž jako leaderIcon, ale na konci pole
• isError – označuje, zda je aktuální textová hodnota v chybovém stavu. Pokud je nastavena na hodnotu true, štítek chyby a koncová ikona se zobrazí v barvě chyby. Pokud není zadán žádný štítek ani koncová ikona, bude v barvě chyby zobrazen pouze kontejner.

• visualTransformation – transformuje vizuální reprezentaci vstupní hodnoty, například zobrazuje „*“ při zadávání hesla. Pro tento případ použití existuje PasswordVisualTransformation, ale je snadné implementovat svůj vlastní

visualTransformation = PasswordVisualTransformation()

• keyboardOptions – možnosti softwarové klávesnice, které slouží ke konfiguraci KeyboardType, ImeAction a dalších parametrů

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

• keyboardActions – když vstupní služba odešle akci, zavolá se odpovídající callback

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

//OR

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

• singleLine – zda má být text pouze na jednom řádku s horizontálním posouváním. Parametr maxLines se ignoruje, pokud je hodnota singleLine true
• maxLines – maximální počet řádků
• actionSource – MutableInteractionSource reprezentující proud interakcí pro tuto composable složku. Dá se použít ke sledování interakcí a přizpůsobení vzhledu nebo chování skládatelných skladeb.
• shape – tvar okraje polí
• colors – instance objektu TextFieldColors, který určuje barvu částí pole. Dají se snadno změnit tímto způsobem ⬇️

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

Vyplněné textové pole v Jetpack Compose

Compose poskytuje textové pole, které se dá sestavit tak, aby splňovalo specifikaci Material designu pro vyplněné textové pole. Bez dalších úprav vypadá textové pole takto:

Všechny parametry composable funkce TextField jsou stejné jako u OutlinedTextField (kromě jiného tvaru a barev) a mají stejné použití.

Pole TextField, které je nastaveno na hodnotu false

Textové pole se štítkem

Textové pole s úvodní ikonou

TextField v chybovém stavu

Další články ze 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