Android textview format phone number

Вводим текст красиво

Сырые, но важные данные вроде номеров телефонов или кредиток — это именно то, что пользователи чаще всего вводят в наших приложениях. И с этим есть огромная проблема. Перепроверять 16 цифр своего Мастеркарда или 11 цифр номера телефона — это сущий ад для любого юзера. Решать эту проблему, естественно, приходится разработчикам, от лица которых я и пишу этот пост.

Поскольку современный Андроид не предоставляет инструментов для автоматического форматирования произвольного текста, эту задачу каждый решает своими костылями силами. Сначала в наших проектах эта задача решалась по месту: возникла необходимость — напиши свой TextWatcher и форматируй как надо. Но мы быстро поняли, что так делать не стоит — количество локальных костылей и специфических багов росло экспоненциально. Кроме того, задача весьма общая, так что и решать её надо системно.

Для начала хотелось следующего:

1. Указал маску вроде +7 (___) ___-__-__
2. Повесил её на EditText
3. .
4. PROFIT

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

Начав работать над этим направлением, мы осознали, что создание полноценного языка описания формата — это сродни написанию своего RegEx-движка, что, честно говоря, в наши планы не входило. В итоге мы пришли к варианту, когда такой язык при необходимости можно добавить в любой момент (даже в клиентском коде) или пользоваться простеньким DSL, доступным из коробки (что в нашей практике решило 90% задач).

Посмотрев на то, что получилось, мы решили, что это круто, и надо бы поделиться с сообществом. Так у нас и родилась библиотека для Android-разработки Decoro. И сейчас я покажу пару фокусов из её арсенала.

Подключаем:

Допустим, нам надо попросить пользователя ввести серию и номер паспорта. Задача тривиальная — надо всего лишь добавить пробельчик и ограничить длину ввода:

В примере выше мы сделали три важных вещи:

1. Описали маску ввода с помощью произвольной строки.
2. Создали свой FormatWatcher и инициализировали его этой маской.
3. Повесили FormatWatcher на EditText.

Вводим серию и номер паспорта.

Честно говоря, задачу про паспорт можно было решить чуть проще, для нее у нас есть уже есть заготовка:

Теперь, когда мы посмотрели на Decoro в действии, скажем пару слов о тех сущностях, которыми она оперирует.

• Mask. Маска ввода — сердце нашей библиотеки. Именно она определяет, как украсить наши сырые данные. Маска оперирует слотами и может использоваться как самостоятельно, так и внутри FormatWatcher’а.
• Slot. Внутри маски слот — это позиция, в которую можно вставить один единственный символ. Он определяет, какие именно символы можно вставить, и как это повлияет на соседние слоты. Подробнее о масках и слотах мы поговорим ниже.
• PredefinedSlots содержит предустановленные наборы слотов (для номера телефона, паспорта и так далее)
• FormatWatcher или форматтер — это абстрактная реализация TextWatcher’а. Он держит внутри себя маску и синхронизирует её содержимое с содержимым TextView. Именно этот парень используется для форматирования текста «на лету», пока пользователь его вводит. В коробке имеются реализации MaskFormatWatcher и DescriptorFormatWatcher, о различии между ними можно почитать в нашей вики. В этой же статье мы будем оперировать только MaskFormatWatcher, потому что он предоставляет более чистый и понятный API.
• Иногда нам хочется создать маску на основе какого-нибудь DSL (вроде +1 (___) ___-__-__ ). SlotsParser как раз призван помочь нам это сделать. Обычный String он приводит к массиву слотов, которым умеет оперировать наша маска.

Что такое слот

Теперь чуть подробнее о том, как работает Decoro. Наша маска ввода определяет, как именно будет отформатирован пользовательский текст. И главный атрибут этой маски — связный список слотов, каждый из которых отвечает за один символ. Так что в примере с паспортом у нас после ввода получилась такая структура:

Каждый слот держит один символ и указатели на соседей. Красным я обозначил hardcoded слот, его значение изменить нельзя.

Для создания маски нам нужен массив слотов. Его можно создать вручную, можно взять готовый из класса PredefinedSlots, а можно использовать какую-нибудь реализацию интерфейса SlotsParser (например, упомянутый выше UnderscoreDigitSlotsParser) и получить этот массив из простой строки. UnderscoreDigitSlotsParser работает просто — для каждого символа _ он создаст слот, в который можно записывать только цифры (ведь для каждого слота можно еще и ограничить множество допустимых символов). А для всех остальных символов создаст hardcoded слоты, и в маску они войдут как есть (это и произошло с нашим пробелом). Подобным образом можно написать свой уникальный SlotsParser и получить возможность описывать маски на своем собственном DSL.

Когда мы только начинали работать над библиотекой, мы думали, что для слота будет достаточно двух поведений hardcoded/non-hardcoded. Казалось, что в красненькие символы складывать будет нельзя, а в беленькие можно. Но это была иллюзия.

Сначала выяснилось, что всё-таки надо позволить вставлять символ в hardcoded-слот. Но только тот символ, который там уже лежит. Иначе не работает функционал копировать-вставить. Допустим, в маску про российский номер телефона я пытаюсь вставить +79991112233 (в смысле, сделать paste), а у меня получается +7 (+799) 911-12-23. Добавили такую возможность. Однако, вскоре выяснилось, что и это поведение не всегда корректно. В итоге мы пришли к так называемым правилам вставки, которые накладываются на каждый слот отдельно.

Слоты организованы в двусвязный список, и каждый из них знает про своих соседей. Вставка или удаление символа в одном из слотов может привести к модификации его соседей. Приведет или нет — зависит от правил этого слота. Варианты правил такие:

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

Все слоты в режиме вставки.

Режим замены. Это то же самое, что вводить текст с нажатой кнопкой INSERT на клавиатуре. Новое значение слота заменяет текущее, но не влияет на соседей.

Все слоты в режиме замены.

Hardcoded-режим. Новый символ «проталкивается» в следующий слот, а текущее значение не изменяется. Этот режим удобно комбинировать с режимом замены. В этом случае в hardcoded-слот можно вставить то же самое значение, которое в нем уже записано, и это не повлияет на соседей.

При попытке вставки в начало «телефонной» маски символы проталкиваются через цепочку hardcoded-слотов +43 ( .

Как выяснилось, эти простые правила позволяют описать маски практически для любых целей. Мы таким образом описываем телефонные номера (с произвольными кодами страны), даты и номера документов.

Форматируем в коде

Но забудем на время про красоту ввода в EditText. Бывает и такое, что надо всего лишь разово отформатировать строку. Создавать для этого целый TextWatcher было бы излишним. Воспользуемся маской напрямую, без посредников.

И теперь для произвольной маски:

Декоративные слоты

В примерах выше вы могли обратить внимание на метод Mask#toUnformattedString() . Он волшебным образом позволяет нам получить строку без лишней мишуры, с одними только данными. Сейчас расскажу, как это работает.

Каждый слот, помимо правил вставки и, собственно, значения, содержит еще и набор тэгов. Тэг — это просто Integer , и слот содержит их Set . Сам слот ничего с этими тэгами делать не умеет, может только хранить. Нужны они для внешнего мира (прямо как View#mKeyedTags только в плоской структуре). Тэгами можно пользоваться по своему усмотрению. Из коробки же доступен тэг Slot#TAG_DECORATION , который позволяет помечать слоты как декоративные.

Когда мы дергаем Mask#toString() , маска собирает значения со всех слотов и формирует из них единую строку. Вызов же Mask#toUnformattedString() пропускает декоративные слоты, что позволяет исключить из финальной строки незначимые символы (вроде пробелов и скобок).

Остается только пометить нужные слоты как декоративные. Если вы используете доступные из коробки наборы слотов (из класса PredefinedSlots ), там декоративные уже помечены, так что вы просто берете и пользуетесь. Если же слоты создаются из строки, то эта работа ложится на SlotsParser . Из коробки создавать декоративные слоты умеет PhoneNumberUnderscoreSlotsParser . Декоративными он сделает все позиции, кроме цифр и плюса. Если же вы пишете свой SlotsParser, то пометить слот как декоративный помогут методы Slot#getTags() и Slot#withTags(Integer. ) .

И несколько слов о том, что еще умеет Decoro:

Бесконечные маски с помощью MaskImpl#createNonTerminated() . В них последний слот бесконечно копируется, и в маску можно вставить сколько угодно текста.

Скрытие/показ цепочки hardcoded-слотов в начале маски в зависимости от заполненности маски ( Mask#setHideHardcodedHead() ). Это полезно для полей ввода номера телефона.

Запрет ввода в заполненную маску. Mask#setForbidInputWhenFilled() позволяет запретить вводить новые символы, если все свободные места уже заняты.

Отображение всей маски вне зависимости от заполненности (по умолчанию Mask#toString() вернет строку только до первого незаполненного символа). Mask#setShowingEmptySlots() позволяет включить отображение пустых слотов. На их месте будет отображаться placeholder (по умолчанию _), свой placeholder можно задать с помощью Mask#setPlaceholder() . Данная функция работает только при работе с маской напрямую и недоступна для использования внутри FormatWatcher’а.

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

Источник

EditText

Компонент EditText — это текстовое поле для пользовательского ввода, которое используется, если необходимо редактирование текста. Следует заметить, что EditText является наследником TextView.

В Android Studio на панели инструментов текстовые поля можно найти в категории Texts под разными именами.

Для быстрой разработки текстовые поля снабдили различными свойствами и дали разные имена: Plain Text, Person Name, Password, Password (Numeric), E-mail, Phone, Postal Address, Multiline Text, Time, Date, Number, Number (Signed), NumberDecimal.

Plain Text

Plain Text — самый простой вариант текстового поля без наворотов. При добавлении в разметку его XML-представление будет следующим:

Person Name

При использовании элемента Person Name в XML добавляется атрибут inputType, который отвечает за вид клавиатуры (только буквы) при вводе текста.

Password и Password (Numeric)

При использовании Password в inputType используется значение textPassword. При вводе текста сначала показывается символ, который заменяется на звёздочку. Если используется элемент Password (Numeric), то у атрибута inputType используется значение numberPassword. В этом случае на клавиатуре будут только цифры вместо букв. Вот и вся разница.

E-mail

У элемента E-mail используется атрибут android:inputType=»textEmailAddress». В этом случае на клавиатуре появляется дополнительная клавиша с символом @, который обязательно используется в любом электронном адресе.

Phone

У элемента Phone используется атрибут android:inputType=»phone». Клавиатура похожа на клавиатуру из старого кнопочного сотового телефона с цифрами, а также с кнопками звёздочки и решётки.

Postal Address

Multiline Text

У Multiline Text используется атрибут android:inputType=»textMultiLine» позволяющий сделать текстовое поле многострочным. Дополнительно можете установить свойство Lines (атрибут android:lines), чтобы указать количество видимых строк на экране.

Time и Date

Атрибут android:inputType=»time» или android:inputType=»date». На клавиатуре цифры, точка, запятая, тире.

Number, Number (Signed), Number (Decimal)

Атрибут android:inputType=»number» или numberSigned или numberDecimal. На клавиатуре только цифры и некоторые другие символы.

Текст-подсказка

Веб-мастера знают о таком атрибуте HTML5 как placeholder, когда в текстовом поле выводится строчка-подсказка приглушенным (обычно серым цветом). Живой пример приведён ниже.

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

В Android у многих элементов есть свойство Hint (атрибут hint), который работает аналогичным образом. Установите у данного свойства нужный текст и у вас появится текстовое поле с подсказкой.

Запускаем приложение и видим подсказку, которая исчезает при попытке ввести текст.

Вызов нужной клавиатуры

Не во всех случаях нужна стандартная клавиатура с буковками и цифрами. Если вы пишете калькулятор, то проще показать пользователю цифровую клавиатуру. А если нужно ввести электронный адрес, то удобнее показать клавиатуру, где уже есть символ @. Ну а если ваше приложение пишется для котов, то достаточно вывести только те буквы, из которых можно составить слова Мяу и Жрать давай (к сожалению, такой клавиатуры ещё нет, но Google работает в этом направлении).

У элемента EditText на этот случай есть атрибут inputType:

В данном случае с атрибутом inputType=»textCapWords&quot каждый первый символ каждого слова при вводе текста автоматически будет преобразовываться в прописную. Удобно, не так ли?

Значение textCapSentences делает прописным каждый первый символ предложения.

Если вам нужен режим CapsLock, то используйте значение textCapCharacters и все буквы сразу будут большими при наборе.

Для набора телефонного номера используйте phone, и тогда вам будут доступны только цифры, звёздочка (*), решётка (#).

Для ввода веб-адресов удобно использовать значение textUri. В этом случае у вас появится дополнительная кнопочка .com (при долгом нажатии на нее появятся альтернативные варианты .net, .org и др.).

Вот вам целый список доступных значений (иногда различия очень трудно различимы)

Интерфейс InputType

Кроме использования атрибута android:inputType мы можем добиться нужного поведения от текста при помощи интерфейса InputType.

Атрибут android:imeOptions — параметры для текущего метода ввода

У текстовых полей есть атрибут android:imeOptions, с помощью которого настраиваются параметры для текущего метода ввода. Например, когда EditText получает фокус и отображается виртуальная клавиатура, эта клавиатура содержит кнопку «Next» (Далее), если атрибут android:imeOptions содержит значение actionNext. Если пользователь касается этой кнопки, фокус перемещается к следующему компоненту, который принимает пользовательский ввод. Если компонент EditText получает фокус и на виртуальной клавиатуре появляется кнопка «Done» (Готово), значит использовался атрибут android:imeOptions со значением actionDone. Как только пользователь касается этой кнопки, система скрывает виртуальную клавиатуру.

Заблокировать текстовое поле

Для блокировки текстового поля присвойте значения false свойствам Focusable, Long clickable и Cursor visible.

Другие свойства

Методы

Основной метод класса EditText — getText(), который возвращает текст, содержащийся в текстовом поле. Возвращаемое значение имеет специальный тип Editable, а не String.

Соответственно, для установки текста используется метод setText().

В Kotlin может возникнуть проблема, если программист захочет использовать конструкцию присвоения через свойство.

Большинство методов для работы с текстом унаследованы от базового класса TextView: setTypeface(null, Typeface), setTextSize(int textSize), SetTextColor(int Color).

Выделение текста

У EditText есть специальные методы для выделения текста:

• selectAll() — выделяет весь текст;
• setSelection(int start, int stop) — выделяет участок текста с позиции start до позиции stop;
• setSelection(int index) — перемещает курсор на позицию index;

Предположим, нам нужно выделить популярное слово из трёх букв в большом слове (это слово «кот», а вы что подумали?).

Ещё есть метод setSelectAllOnFocus(), который позволяет выделить весь текст при получении фокуса.

Обработка нажатий клавиш

Для обработки нажатий клавиш необходимо зарегистрировать обработчик View.OnKeyListener, используя метод setOnKeyListener() элемента EditText. Например, для прослушивания события нажатия клавиши Enter во время ввода текста пользователем (или котом), используйте следующий код:

Пустой ли EditText

Чтобы проверить, пустой ли EditText, можно воспользоваться кодом:

Также можно проверять длину текста, если она равно 0, значит текст пуст.

Превращаем EditText в TextView

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

Также можно установить эти свойства через XML, кроме последнего пункта.

Дополнительное чтение

Beware EditText on API 21 — разница между версиями 21 и 22

Источник