Автоматическое форматирование номера телефона в текстовом поле

В вашем приложении можно автоматически форматировать номер телефона в текстовом поле, экономя время пользователей, поскольку номер телефона будет форматироваться по мере ввода цифр. Следуйте этим инструкциям, чтобы автоматически форматировать номер телефона:

• Создайте текстовое поле.
• Автоматическое форматирование числа в текстовом поле.

Результаты

Совместимость версий

Для данной реализации требуется, чтобы в вашем проекте был установлен уровень API 21 или выше.

Зависимости

Создайте текстовое поле

Сначала настройте TextField . В этом примере показан номер телефона, отформатированный в соответствии с Североамериканской системой нумерации (NANP). NanpVisualTransformation форматирует исходную строку чисел в соответствии с NANP, например, 1234567890 в (123) 456-7890.

@Composable
fun PhoneNumber() {
    var phoneNumber by rememberSaveable { mutableStateOf("") }
    val numericRegex = Regex("[^0-9]")
    TextField(
        value = phoneNumber,
        onValueChange = {
            // Remove non-numeric characters.
            val stripped = numericRegex.replace(it, "")
            phoneNumber = if (stripped.length >= 10) {
                stripped.substring(0..9)
            } else {
                stripped
            }
        },
        label = { Text("Enter Phone Number") },
        visualTransformation = NanpVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}
TextSnippets.kt

Основные моменты, касающиеся кода.

• Компонент TextField , в котором метод onValueChange использует регулярное выражение для удаления всех нечисловых символов и ограничивает длину до максимум 10 символов перед обновлением состояния phoneNumber .
• В атрибуте visualTransformation TextField задан пользовательский экземпляр класса VisualTransformation . Класс NanpVisualTransformation , созданный здесь, определен в следующем разделе.

Автоматическое форматирование числа в текстовом поле

Для форматирования строки чисел в исходном виде используйте реализацию пользовательского класса NanpVisualTransformation :

class NanpVisualTransformation : VisualTransformation {

    override fun filter(text: AnnotatedString): TransformedText {
        val trimmed = if (text.text.length >= 10) text.text.substring(0..9) else text.text

        var out = if (trimmed.isNotEmpty()) "(" else ""

        for (i in trimmed.indices) {
            if (i == 3) out += ") "
            if (i == 6) out += "-"
            out += trimmed[i]
        }
        return TransformedText(AnnotatedString(out), phoneNumberOffsetTranslator)
    }

    private val phoneNumberOffsetTranslator = object : OffsetMapping {

        override fun originalToTransformed(offset: Int): Int =
            when (offset) {
                0 -> offset
                // Add 1 for opening parenthesis.
                in 1..3 -> offset + 1
                // Add 3 for both parentheses and a space.
                in 4..6 -> offset + 3
                // Add 4 for both parentheses, space, and hyphen.
                else -> offset + 4
            }

        override fun transformedToOriginal(offset: Int): Int =
            when (offset) {
                0 -> offset
                // Subtract 1 for opening parenthesis.
                in 1..5 -> offset - 1
                // Subtract 3 for both parentheses and a space.
                in 6..10 -> offset - 3
                // Subtract 4 for both parentheses, space, and hyphen.
                else -> offset - 4
            }
    }
}
TextSnippets.kt

Основные моменты, касающиеся кода.

• Функция filter() вставляет нечисловые символы форматирования в соответствующие места.
• Объект phoneNumberOffsetTranslator содержит два метода. Один сопоставляет смещения между исходной строкой и отформатированной, а другой выполняет обратное сопоставление. Эти сопоставления позволяют пропускать символы форматирования, когда пользователь изменяет положение курсора в текстовом поле.
• Отформатированная строка и phoneNumberOffsetTranslator используются в качестве аргументов для возвращаемого экземпляра TransformedText , который затем используется TextField для выполнения форматирования.

Коллекции, содержащие это руководство

Данное руководство является частью подборки кратких руководств, охватывающих более широкие цели разработки под Android:

Отобразить текст

Текст — центральный элемент любого пользовательского интерфейса. Узнайте о различных способах представления текста в вашем приложении, чтобы обеспечить приятный пользовательский опыт.

Краткий справочник

Запросить ввод данных от пользователя

Узнайте, как реализовать способы взаимодействия пользователей с вашим приложением, включая ввод текста и использование других методов ввода.

Краткий справочник

Есть вопросы или отзывы?

Перейдите на страницу часто задаваемых вопросов и ознакомьтесь с краткими руководствами или свяжитесь с нами и поделитесь своими мыслями.

Перейти к разделу часто задаваемых вопросов Оставить отзыв