[英]How to add chips from Material Components library to input field in android?
[英]How to add Material Design Chips to input field using autocomplete in android?
我正在嘗試使用AutoCompleteTextView實現Material Design Chips,以便在用戶單擊自動完成建議(例如Gmail Recipient Chips)時在輸入字段中添加Contact Chips。
可以在Material Design網站上看到所需的行為。
我決定在沒有外部庫的情況下從頭開始在我的項目中與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應用程序中的聯系芯片? 也許有人知道一些實施指南?
在此先感謝您的幫助,我們將不勝感激!
如果您正在尋找“收件人編輯”框(如Gmail聯系人“編輯”框),則以下是一個實施視頻,可以幫助您:
如何使用Android的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,可將繪制對象垂直居中。 它還允許我們設置Chip padding。 鏈接中提供了完整的代碼。
在此示例中,您可以在輸入建議時從建議列表中選擇聯系人。 然后,創建聯系人芯片(帶有名稱和頭像)以替換搜索查詢。 至於多個聯系人的處理,您正在尋找MultiAutoCompleteTextView。 在視頻中有介紹。
希望能幫助到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.