ユーザーがオートコンプリートの提案をクリックしたときに入力フィールドに連絡先チップを追加するために、AutoCompleteTextViewを使用してマテリアルデザインチップを実装しようとしています（Gmail受信者チップなど）。
望ましい動作は、マテリアルデザインのWebサイトで確認できます。
私は、外部ライブラリを使用せずに、プロジェクトに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);
残念ながら、期待どおりに機能しません。まず、チップ上に追加することはできません。さらに、チップのスタイルは非常に奇妙です（高さが大きすぎて中央に配置されていません）。
では、マテリアルデザインの入力チップを使用して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です。また、チップパディングを設定することもできます。完全なコードはリンクで提供されています。
この例では、入力時に候補のリストから連絡先を選択できます。次に、検索クエリを置き換えるための連絡先チップ（名前とアバターを含む）が作成されます。複数の連絡先の処理に関しては、MultiAutoCompleteTextViewを探しています。それはビデオで説明されています。
それが役に立てば幸い。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加