Метки, заполнители и ведущие иконки
Делайте поля ввода понятными и удобными.
«Метки, заполнители и ведущие иконки» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Сделайте поля понятными
Пустое поле заставляет пользователей гадать. Подписи, подсказки и значки превращают обычное поле в такое, которое направляет пользователя. 🧭
Слот подписи
Подпись называет поле. Пока оно пустое, подпись находится внутри, а после получения фокуса или заполнения перемещается к рамке.
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") }
)Добавьте подсказку
Подсказка — это текст, отображаемый только пока поле пусто. Используйте её для примера, а не для названия поля.
placeholder = { Text("you@example.com") }Подпись и подсказка
Подпись всегда остаётся видимой и обозначает поле. Подсказка исчезает сразу после начала ввода. Используйте их вместе.
Начальные значки
leadingIcon находится в начале поля. Конверт рядом с полем электронной почты сразу подсказывает его назначение.
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = null)
}Конечные значки тоже
trailingIcon находится в конце поля. Он отлично подходит для кнопки очистки или переключателя видимости пароля.
trailingIcon = {
Icon(Icons.Default.Clear, contentDescription = "Clear")
}Всегда описывайте значки
Укажите для каждого значка contentDescription, чтобы программы чтения с экрана могли его озвучить. Передавайте null только для чисто декоративного значка.
Сделайте конечный значок нажимаемым
Оберните конечный значок в IconButton, чтобы пользователь мог нажать его, например для очистки поля одним касанием.
trailingIcon = {
IconButton(onClick = { email = "" }) {
Icon(Icons.Default.Clear, "Clear")
}
}Вспомогательный текст
supportingText показывает небольшую подсказку под полем — например, напоминание о формате или ограничение числа символов, не загромождая ввод.
supportingText = { Text("We never share your email.") }Сочетайте их продуманно
Подписи, значка и короткой подсказки вполне достаточно. Слишком много подсказок создаёт шум, поэтому каждое поле должно оставаться спокойным и понятным.
Слоты — это просто компонуемые элементы
Каждый слот, например label и leadingIcon, представляет собой лямбду, содержащую компонуемые элементы. Поэтому внутрь можно поместить любой нужный интерфейс.
Быстрая проверка
Когда подсказка исчезает из текстового поля?
Итоги
Вы улучшили поля с помощью подписи, подсказок, начальных и конечных значков, а также вспомогательного текста. Понятные поля — довольные пользователи. 😊
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Метки, заполнители и ведущие иконки» бесплатный?
Да — полный текст урока «Метки, заполнители и ведущие иконки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Метки, заполнители и ведущие иконки»?
Делайте поля ввода понятными и удобными. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Метки, заполнители и ведущие иконки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- TextField и OutlinedTextField
- Метки, заполнители и ведущие иконки
- Типы клавиатуры и действия IME
- Встроенная проверка и состояния ошибок