如何添加材料设计芯片到输入字段使用自动完成在android？

Question

我试图用AutoCompleteTextView实现材料设计芯片，以便在用户单击自动完成建议(如Gmail收件人芯片)时，在输入字段中添加联系人芯片。

期望的行为可以在材料设计网站上看到。

我决定在我的项目中从零开始，在没有外部库的情况下，与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应用程序中的联系人芯片和材料设计输入芯片呢？也许有人知道些什么指南来实现它？

提前感谢，您的帮助将是真正的感谢！

Answer 1

如果您正在寻找一个与Gmail联系人编辑框一样的收件人编辑框，下面是一个应该帮助您的实现视频：

如何用AutoCompleteTextView实现安卓芯片

假设您有一个联系人数据类，下面是如何做到这一点：

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。视频中对此进行了描述。

希望能帮上忙。