我正在尝试使用AutoCompleteTextView实现材料设计芯片,以便在用户单击自动完成建议时(例如Gmail收件人芯片)在输入字段中添加联系芯片。
可以在Material Design Website上看到所需的行为。
我决定从头开始在我的项目中与AutoCompleteTextView一起实现Chips,而无需外部库。但是,我没有找到任何显示该操作方法的指南。
我试图创建一个独立的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);
不幸的是,它没有按预期运行。首先,我不能添加超过片上的东西。此外,Chip具有非常奇怪的样式(高度太大,没有居中)。
那么,如何使用Material Design输入芯片来创建Gmail或SMS应用程序中的联系芯片?也许有人知道一些实施指南?
在此先感谢您的帮助!
答案 0 :(得分:1)
如果您正在像“ Gmail联系人编辑”框一样寻找“收件人编辑”框,则以下是一个实施视频,可以为您提供帮助:
How to implement Chips with AutoCompleteTextView for 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,可将绘制对象垂直居中。它还允许我们设置Chip padding。链接中提供了完整的代码。
在此示例中,您可以在输入建议时从建议列表中选择联系人。然后,创建联系人芯片(带有名称和头像)以替换搜索查询。至于多个联系人的处理,您正在寻找MultiAutoCompleteTextView。在视频中有介绍。
希望有帮助。