Создание контактных пузырей в MultiAutoCompleteTextView

Быстрый ответ

Если вы стремитесь создать базовую форму для ввода контактных данных, обратите внимание на стилизацию <input> с помощью CSS:

<div class="chat-bubble">
  <input class="bubble-edit" placeholder="Введите контактные данные..." />
</div>

Для стилизации примените следующие CSS правила:

.chat-bubble {
  background: #e0e0e0;
  border-radius: 20px;
  padding: 5px 10px;
  display: inline-flex;
}

.bubble-edit {
  border: none;
  outline: none;
  width: 100%;
}

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

Из простого к изысканности

Текстовый блок – это лишь начало. Добавим привлекательности нашему всплывающему блоку.

Оживляем блок с помощью JavaScript

Для создания динамичного интерактивного блока можно использовать JavaScript:

document.querySelector('.bubble-edit').addEventListener('keyup', function(event) {
  if(event.key === 'Enter' && this.value.trim()) {
    createBubble(this.value);
    this.value = '';
  }
});

function createBubble(value) {
  const bubble = document.createElement('span');
  bubble.textContent = value;
  bubble.classList.add('contact-bubble');
  document.querySelector('.chat-bubble').appendChild(bubble);
}

После этого стилизуйте внешний вид нового блока с помощью CSS:

.contact-bubble {
  display: inline-block;
  background: #9c27b0;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  margin-right: 5px;
}

Теперь наш блок становится более привлекательным и динамичным.

Подробнее об этом расскажет наш спикер на видео

Улучшиаем визуализацию с помощью специализированных библиотек

Для того, чтобы сделать блок ярким и удобным в использовании, можно применить библиотеки ChipView и Material Components:

implementation 'com.google.android.material:material:1.2.1'

Для организации блоков используйте ChipView или Material Chips внутри ChipGroup и наслаждайтесь обилием настроек, включая визуальное оформление и реакцию на клики.

Визуализация

Вообразите интерфейс для ввода контактных данных как цветущий сад, где каждый из элементов – уникальный цветок:

            💬
           /  \
      🌼    🌻    🌺

При наборе текста каждый из элементов ведет себя по-своему:

- 🌼 (имя) мягко приветствует,
- 🌻 (email) плавно дрожит,
- 🌺 (телефон) изящно подтверждает своё присутствие.

С каждым нажатием клавиши блок поднимается вверх и каждый элемент контактных данных приобретает форму.

DCоздание продвинутых контактных блоков

Разработка продвинутых интерактивных блоков требует выполнения нескольких ключевых этапов.

Оживление контактных блоков

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

• Используйте SpannableStringBuilder для изменяемого текста.
• Преобразуйте TextView в Drawable используя, например, convertViewToDrawable().
• Совместите Drawable с текстом при помощи setSpan(), заранее определив правильные координаты.
• Добавьте "кнопку очистки" с помощью setCompoundDrawablesWithIntrinsicBounds(), интегрируя ее в блок.

Конвертация View в Drawable

При преобразовании View в Drawable, нужно помнить о следующем:

• Измерьте и расположите элемент точно перед трансформацией.
• Границы BitmapDrawable должны соответствовать размеру TextView.
• Определите область для блока с использованием Spannable.SPAN_EXCLUSIVE_EXCLUSIVE.

Работаем с библиотечными решениями

Разумно будет использовать готовые решения, такие как ChipView и Material Chips, ведь это позволит избежать лишней работы:

• Достаточно просто добавить их в проект и они будут готовы к использованию.
• Настройка будет незамысловатой и интуитивно понятной. Вы сможете адаптировать их под любую тематику, оформление и поведение.
• Они будут отзываться на нажатия и команды удаления.

Полезные материалы

1. <input>: HTML-элемент формы ввода – MDN — Детальный разбор элемента <input> от MDN.
2. HTML элемент input – W3Schools — Обучающая статья и руководство по работе с элементом HTML <input> от W3Schools.
3. Стандарты стилизации текстовых полей ввода – CSS-Tricks — Обстоятельный анализ стилизации текстовых полей ввода с CSS.
4. Полное руководство по пользовательским свойствам в CSS – CSS-Tricks — Погружение в пользовательские свойства CSS.
5. HTML Стандарт – WHATWG — Официальный стандарт HTML для элементов формы ввода.
6. Can I use... Support tables for HTML5, CSS3, etc. — Инструмент для проверки совместимости HTML5 и CSS3 в различных браузерах.