Как добавить Material Design Chips в поле ввода, используя автозаполнение в Android? - PullRequest
Новая
       35

Как добавить Material Design Chips в поле ввода, используя автозаполнение в Android?

4 голосов
/ 22 марта 2019

Я пытаюсь реализовать Фишки дизайна материала с AutoCompleteTextView, чтобы добавить контактные фишки в поле ввода, когда пользователь нажимает на предложение автозаполнения (например, Фишки получателя Gmail).

Желаемое поведение можно увидеть на Material Design Website .

Я решил внедрить Chips вместе с AutoCompleteTextView в мой проект с нуля, без внешних библиотек. Однако я не нашел ни одного руководства, которое бы показывало, как это сделать.

Я попытался создать автономный ChipDrawable, а затем добавить его в AutoCompleteTextView следующим образом:

Компоновка 

<chip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:chipIcon="@drawable/ic_avatar_circle_24"
    android:text="@string/contact_name"/>

Java-код 

ChipDrawable chip = ChipDrawable.createFromResource(getContext(), R.xml.standalone_chip);

chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
DrawableMarginSpan span = new DrawableMarginSpan(chip, 25);

Editable text = editText.getText();
text.setSpan(span, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

К сожалению, это не работает, как ожидалось. Во-первых, я не могу добавить больше, чем на чипе. Кроме того, у Чипа очень странный стиль (слишком большая высота, не по центру).

Итак, как я могу создать контактные фишки, как в приложениях Gmail или SMS, с использованием входных чипов дизайна материалов? Возможно, кто-то знает руководство по его реализации?

Заранее спасибо, ваша помощь будет по-настоящему оценена!

1 Ответ

1 голос
/ 23 марта 2019

Если вы ищете окно редактирования получателя, такое же как поле редактирования контакта Gmail, вот видео реализации, которое должно вам помочь:

Как реализовать чипы с AutoCompleteTextView для Android

Если у вас есть класс контактных данных, вот как это сделать:

Настройка MultiAutoCompleteTextView 

MultiAutoCompleteTextView contactAutoCompleteTextView = findViewById(R.id.recipient_auto_complete_text_view);
List<Contact> contacts = new ArrayList<Contact>() {{
    add(new Contact("Adam Ford", R.drawable.adam_ford));
    add(new Contact("Adele McCormick", R.drawable.adele_mccormick));
    add(new Contact("Alexandra Hollander", R.drawable.alexandra_hollander));
    add(new Contact("Alice Paul", R.drawable.alice_paul));
    add(new Contact("Arthur Roch", R.drawable.arthur_roch));
}};

contactAutoCompleteTextView.setAdapter(new ContactAdapter(this,
        R.layout.contact_layout, contacts));
contactAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
// Minimum number of characters the user has to type before the drop-down list is shown
contactAutoCompleteTextView.setThreshold(1);
contactAutoCompleteTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Contact selectedContact = (Contact) adapterView.getItemAtPosition(i);
        createRecipientChip(selectedContact);
    }
});

Ресурс чипа 

<chip style="@style/Widget.MaterialComponents.Chip.Action"/>

Создание чипа 

private void createRecipientChip(Contact selectedContact) {
    ChipDrawable chip = ChipDrawable.createFromResource(this, R.xml.standalone_chip);
    CenteredImageSpan span = new CenteredImageSpan(chip, 40f, 40f);
    int cursorPosition = contactAutoCompleteTextView.getSelectionStart();
    int spanLength = selectedContact.getName().length() + 2;
    Editable text = contactAutoCompleteTextView.getText();
    chip.setChipIcon(ContextCompat.getDrawable(MainActivity.this,
        selectedContact.getAvatarResource()));
    chip.setText(selectedContact.getName());
    chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
    text.setSpan(span, cursorPosition - spanLength, cursorPosition, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}

CenteredImageSpan - это пользовательский ImageSpan, который центрирует чертеж по вертикали. Это также позволяет нам устанавливать заполнение чипа. Полный код указан в ссылке.

В этом примере контакты можно выбирать из списка предложений по мере ввода. Затем создается контактный чип (с именем и аватаром) для замены поискового запроса. Что касается обработки нескольких контактов, вы ищете MultiAutoCompleteTextView. Это описано в видео.

Надеюсь, это поможет.

...