logo
Mobile
Максим Колмогоров
Максим Колмогоров
SEO

Маска ввода для телефона на Kotlin

Чтобы создать маску ввода телефона (и не только) на Kotlin для Jetpack Compose, не надо ставить специальные библиотеки, достаточно воспользоваться встроенным функционалом Android, а именно параметром visualTransformation для текстового поля.

Маска ввода для телефона на Kotlin

Создаем маску ввода для телефона на Kotlin

Если мы используем TextField или OutlinedTextField, то нам доступен параметр visualTransformation, в который мы можем передать свою маску в виде класса, которая должна наследоваться от интерфейса VisualTransformation.

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

пример использования маски ввода
Пример вызова visualTransformation в TextField. Сначала создаем маску (1), потом передаем в текстовое поле (2). Реализация MaskVisualTransformation будет показана ниже.

Вы можете передать в маску свое значение (например ##-##-##), а все символы # будут заменены на то, что вводит пользователь.

Реализация класса:

На первый взгляд все выглядит как-то сложно, но если почитать документацию Google и сам код, то все станет ясней. Основа класса - это функция filter(text: AnnotatedString) на 12 строке. Она должна вернуть TransformedText,  который состоит из результата out, который видит пользователь, и объекта offsetTranslator.

Объект offsetTranslator следит за кареткой и ее смещением по отношению к тексту в поле для ввода: без маски (функция transformedToOriginal) и с примененной маской (функция originalToTransformed). 

На этом все, копируйте код и пользуйтесь с удовольствием.

Разработка приложений
Получите персональную стоимость на разработку мобильного приложения сегодня
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

Оставьте комментарий

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности

Нет комментариев