Ввод текста, TextField и OutlinedTextField

Последнее обновление: 02.04.2024

Для ввода текста в приложении предназначен компонент TextField. Он имеет несколько версий, возьмем одну из них:

@Composable
fun TextField(
    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,
    prefix: (@Composable () -> Unit)? = null,
    suffix: (@Composable () -> Unit)? = null,
    supportingText: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = TextFieldDefaults.shape,
    colors: TextFieldColors = TextFieldDefaults.colors()
): Unit

Основные параметры компонента:

  • value: представляет введенное в текстовое поле значение в виде строки, то есть объекта String

  • onValueChange: функция обработки изменения введенного значения. Представляет функцию типа (String) -> Unit

  • modifier: объект типа Modifier, который задает модификаторы компонента

  • enabled: устанавливает, будет ли поле доступно для ввода. Представляет значение типа Boolean. По умолчанию равно true, то есть поле доступно для ввода

  • readOnly: устанавливает, будет ли поле доступно только для чтения. Представляет значение типа Boolean. По умолчанию равно false, то есть поле доступно не только для чтения, но для изменения значения

  • textStyle: объект типа TextStyle, который устанавливает стиль текста. Значение по умолчанию - LocalTextStyle.current

  • label: устанавливает дополнительную метку, которая отображается внутри поля. Для установки метки применяется функция типа () -> Unit. Значение по умолчанию - null

  • placeholder: плейсхолдер - временный текст, который отображается внутри поля. Для установки этого текста применяется функция типа () -> Unit. Значение по умолчанию - null

  • leadingIcon: устанавливает иконку, которая отображается перед текстом. Для установки применяется функция типа () -> Unit. Значение по умолчанию - null

  • trailingIcon: устанавливает иконку, которая отображается после текста. Для установки применяется функция типа () -> Unit. Значение по умолчанию - null

  • isError: указывает, является ли текущее введенное в поле значение некорректным. Представляет значение типа Boolean. По умолчанию равно false, то есть введенное значение корректно. Если равно true, то для поля устанавливаютс соответствующие индикаторы - метка, иконка, выделение цветом, которые поддчеркивают, что введенное значение некорректно.

  • visualTransformation: объект типа VisualTransformation, который задает визуальные трансформации для вводимого текста. Значение по умолчанию - VisualTransformation.None

  • keyboardOptions: объект KeyboardOptions, который задает параметры клавиатуры (например, ее тип). Значение по умолчанию - KeyboardOptions.Default

  • keyboardActions: KeyboardActions, который задает набор функций, которые вызываются в ответ на некоторые действия пользователя. Значение по умолчанию - KeyboardActions()

  • singleLine: устанавливает, будет ли текст однострочным. По умолчанию равно false, то есть поле будет многосточным

  • maxLines: задает максимальное количество строк в поле. По умолчанию равно Int.MAX_VALUE

  • minLines: задает минимальное количество строк в поле. По умолчанию равно 1

  • interactionSource: объект MutableInteractionSource, который задает поток взаимодействий для поля ввода. Значение по умолчанию - remember { MutableInteractionSource() }

  • shape: представляет объект Shape, который задает форму для поля ввода. Значение по умолчанию - MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize)

  • colors: объект TextFieldColors, который задает цвета для поля ввода. Значение по умолчанию - TextFieldDefaults.textFieldColors()

Определение простейшего поля ввода:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.TextField

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TextField(value = "Hello Work", onValueChange = {})
        }
    }
}

При создании поля необходимо задать как минимум два параметра - текущее значение (параметр value) и функцию обработки ввода текста (параметр onValueChange).

Поле ввода текста TextField в Jetpack Compose и Kotlin в Android

Обработка ввода текста

Параметр onValueChange принимает функцию обработки ввода текста. Она в качестве параметра получает введенный текст в виде объекта String:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val message = remember{mutableStateOf("")}

            Column {
                Text(message.value, fontSize = 28.sp)
                TextField(
                    value = message.value,
                    textStyle = TextStyle(fontSize=25.sp),
                    onValueChange = {newText -> message.value = newText}
                )
            }
        }
    }
}

В данном случае мы определяем переменную message, которая будет хранить введенный текст. Однако это не просто строка. Она будет представлять объект типа MutableState<String>, который создается функцией mutableStateOf(). В дальнейшем мы подробнее разберем объект MutableState и функцию mutableStateOf, а пока достуточно знать, что в эту функцию передается собственно хранимое значение, которое затем можно получить с помощью свойства value объекта MutableState<T>. А функция remember позволяет сохранить это значение.

В коде с помощью свойства value мы привязываем значение переменной к свойству text компонента Text и свойству value компонента TextField:

Text(message.value, fontSize = 28.sp)
TextField( value = message.value,

А в функции обработки ввода текста передаем в переменную введенный текст:

onValueChange = {newText -> message.value = newText}

В данном случае функция задается с помощью лямбда-выражения, где параметр newText представляет введенный текст.

В итоге при ввода текста в поле изменится значение в переменной message и соответственно изменится текст компонента Text.

TextField и обработка ввода текста с помощью onValueChange в Jetpack Compose и Kotlin в Android

Тип клавиатуры

В зависимости от задач приложения может потребоваться вводить разную информацию - когда буквы, когда числа и т.д. Для упрощения ввода Jetpack Compose предоставляет тип KeyboardType, который позволяет настроить тип клавиатуры с помощью своих свойств:

  • KeyboardType.Ascii: предоставляет ввод символов ASCII

  • KeyboardType.Email: для ввода электронного адреса

  • KeyboardType.Number: для ввода цифр

  • KeyboardType.NumberPassword: для ввода пароля из цифр

  • KeyboardType.Password: для ввода пароля

  • KeyboardType.Phone: для ввода номера телефона

  • KeyboardType.Text: предоставляет стандартную клавиатуру

  • KeyboardType.Uri: предоставляет клавиатуру для ввода URI

С помощью параметра keyboardOptions, который представляет класс KeyboardOptions, можно задать тип клавиатуры. Например, применим клавиатуру для ввода номера телефона:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val phone = remember{mutableStateOf("")}

            TextField(
                phone.value,
                {phone.value = it},
                textStyle = TextStyle(fontSize =  28.sp),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone)
            )
        }
    }
}
Тип клавиатуры для поля ввода текста TextField и тип KeyboardType в Jetpack Compose и Kotlin в Android

Установка иконок

Параметр leadingIcon задает иконку перед текстом, а параметр trailingIcon - иконку после текста. В качестве значения оба параметра принимают функцию типа () -> Unit. Определим иконки для поля ввода:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Icon
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val message = remember{mutableStateOf("")}

            TextField(
                message.value,
                {message.value = it},
                textStyle = TextStyle(fontSize =  28.sp),
                leadingIcon = { Icon(Icons.Filled.Check, contentDescription = "Проверено") },
                trailingIcon = { Icon(Icons.Filled.Info, contentDescription = "Дополнительная информация") }
            )
        }
    }
}

Для определения иконок применяется встроенный тип androidx.compose.material.Icon, в функцию которого передается значок иконки. В данном случае применяются встроенные иконки Icons.Filled.Check и Icons.Filled.Info. Второй параметр - contentDescription позволяет указать к иконке описание.

Иконки для поля ввода текста TextField и тип KeyboardType в Jetpack Compose и Kotlin в Android

Плейсхолдер

Параметр placeholder устанавливает плейсхолдер или заменитель текста, отображаемый в поле ввода, в виде другого компонента:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val message = remember{mutableStateOf("")}
            TextField(
                message.value,
                {message.value = it},
                textStyle = TextStyle(fontSize =  28.sp),
                placeholder = { Text("Hello Work!") }
            )
        }
    }
}

Установка цветовой палитры поля ввода

Параметр colors, который представляет объект интерфейса TextFieldColors, задает цвета для поля ввода. По умолчанию он принимает компонент TextFieldDefaults.textFieldColors()/TextFieldDefaults.colors(), который устанавливает цвета для самых различных состояний:

  • focusedTextColor: цвет, используемый для ввода текста этого текстового поля при фокусировке.

  • unfocusedTextColor: цвет, используемый для ввода текста этого текстового поля, когда он не сфокусирован

  • disabledTextColor: цвет, используемый для ввода текста этого текстового поля, когда он отключен.

  • errorTextColor: цвет, используемый для ввода текста этого текстового поля в состоянии ошибки.

  • focusedContainerColor: цвет контейнера текстового поля в фокусе.

  • unfocusedContainerColor: цвет контейнера текстового поля, когда он не сфокусирован.

  • disabledContainerColor: цвет контейнера текстового поля, когда он отключен.

  • errorContainerColor: цвет контейнера текстового поля в состоянии ошибки.

  • cursorColor: цвет курсора текстового поля

  • errorCursorColor: цвет курсора текстового поля в состоянии ошибки.

  • selectionColors: цвета, используемые при выборе входного текста этого текстового поля.

  • focusedIndicatorColor: цвет индикатора текстового поля при фокусировке.

  • unfocusedIndicatorColor: цвет индикатора текстового поля, когда оно не сфокусировано.

  • disabledIndicatorColor: цвет индикатора текстового поля, когда он отключен.

  • errorIndicatorColor: цвет индикатора текстового поля в состоянии ошибки.

  • focusedLeadingIconColor: цвет ведущего значка текстового поля в фокусе.

  • unfocusedLeadingIconColor: цвет ведущего значка текстового поля, когда он не сфокусирован.

  • disabledLeadingIconColor: цвет ведущего значка текстового поля, когда он отключен.

  • errorLeadingIconColor: цвет ведущего значка текстового поля в состоянии ошибки.

  • focusedTrailingIconColor: цвет конечного значка текстового поля в фокусе.

  • unfocusedTrailingIconColor: цвет конечного значка текстового поля, когда он не в фокусе.

  • disabledTrailingIconColor: цвет конечного значка текстового поля, когда он отключен.

  • errorTrailingIconColor: цвет конечного значка текстового поля в состоянии ошибки.

  • focusedLabelColor: цвет метки текстового поля при фокусировке.

  • unfocusedLabelColor: цвет метки текстового поля, когда оно не сфокусировано.

  • disabledLabelColor: цвет метки текстового поля, когда он отключен.

  • errorLabelColor: цвет метки текстового поля в состоянии ошибки.

  • focusedPlaceholderColor: цвет заполнителя текстового поля в фокусе.

  • unfocusedPlaceholderColor: цвет заполнителя текстового поля, когда он не сфокусирован.

  • disabledPlaceholderColor: цвет заполнителя текстового поля, когда он отключен.

  • errorPlaceholderColor: цвет заполнителя текстового поля в состоянии ошибки.

  • focusedSupportingTextColor: вспомогательный цвет текста текстового поля при фокусе.

  • unfocusedSupportingTextColor: вспомогательный цвет текста текстового поля, когда он не сфокусирован

  • disabledSupportingTextColor: вспомогательный цвет текста текстового поля, когда он отключен.

  • errorSupportingTextColor: вспомогательный цвет текста текстового поля в состоянии ошибки.

  • focusedPrefixColor: цвет префикса текстового поля в фокусе.

  • unfocusedPrefixColor: цвет префикса текстового поля, когда оно не сфокусировано.

  • disabledPrefixColor: цвет префикса текстового поля, когда он отключен.

  • errorPrefixColor: цвет префикса текстового поля в состоянии ошибки.

  • focusedSuffixColor: цвет суффикса текстового поля в фокусе.

  • unfocusedSuffixColor: цвет суффикса текстового поля, когда оно не сфокусировано.

  • disabledSuffixColor: цвет суффикса текстового поля, когда он отключен.

  • errorSuffixColor: цвет суффикса текстового поля в состоянии ошибки.

Мы можем использовать этот компонент для настройки цветовой гаммы поля ввода:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val message = remember{mutableStateOf("Hello")}
            TextField(
                message.value,
                {message.value = it},
                textStyle = TextStyle(fontSize =  28.sp),
                colors = TextFieldDefaults.colors(
                    unfocusedContainerColor = Color(0xffeeeeee),
                    unfocusedTextColor = Color(0xff888888),
                    focusedContainerColor = Color.White,
                    focusedTextColor = Color(0xff222222),
                )
            )
        }
    }
}

В данном случае для текста и фона устанавливаются разные цвета в зависимости от того, получило текстовое поле фокус или нет:

Настройка цветов для поля ввода текста TextField и тип TextFieldDefaults в Jetpack Compose и Kotlin в Android

OutlinedTextField

Компонент OutlinedTextField во многом похож на TextField за тем исключением, что он добавляет границу вокуг поля ввода. Простейшее определение компонента OutlinedTextField:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.OutlinedTextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val message = remember{mutableStateOf("Hello")}
            OutlinedTextField(
                message.value,
                {message.value = it},
                textStyle = TextStyle(fontSize =  30.sp)
            )
        }
    }
}
Поле ввода текста OutlinedTextField в Jetpack Compose и Kotlin в Android

В функции компонента OutlinedTextField мы видим, что в отличие от TextField, меняется стандартное значение для последнего параметра - colors, который устанавливает цвета. Теперь он по умолчанию равен компоненту TextFieldDefaults.outlinedTextFieldColors(). Фактически здесь мы можем установить те же самые цвета за тем исключением, что мы также можем настроить текст границы с помощью таких параметов как focusedBorderColor, unfocusedBorderColor, disabledBorderColor и errorBorderColor, который позволяют установить цвет границы для различных состояний поля ввода. Например:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val message = remember{mutableStateOf("Hello")}
            OutlinedTextField(
                message.value,
                {message.value = it},
                textStyle = TextStyle(fontSize =  30.sp),
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor= Color(0xff16a085), // цвет при получении фокуса
                    unfocusedBorderColor = Color(0xffcccccc)  // цвет при отсутствии фокуса
                )
            )
        }
    }
}
Настройка цветов текста в OutlinedTextField в Jetpack Compose и Kotlin в Android

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850