Étiquettes ou bulles Android dans EditText

entrer la description de l'image ici Quelqu’un peut-il s’il vous plaît me diriger dans la bonne direction comment faire ces bulles ou étiquettes dans EditText quelque chose comme ceux que vous voyez quand vous voulez composer quelque chose dans Stream pour Google+ lorsque vous ajoutez un cercle ou un contact? Le rectangle est un edittext automatique complet.

Ce que vous montrez est le même comportement que l’application stock SMS. Recherchez le code ici pour voir comment cela se passe.

MODIFIER:

Le code doit être dans platform_packages_apps_mms . Jetez un oeil à la classe RecipientsEditor .

J’ai construit TokenAutoComplete sur github pour résoudre un problème similaire et cela devrait également fonctionner pour vous. Voici une implémentation de base d’une application de démonstration:

public class ContactsCompletionView extends TokenCompleteTextView { public ContactsCompletionView(Context context, AtsortingbuteSet attrs) { super(context, attrs); } @Override protected View getViewForObject(Object object) { Person p = (Person)object; LayoutInflater l = (LayoutInflater)getContext().getSystemService(Activity.LAYOUT_INFLATER_SERVICE); LinearLayout view = (LinearLayout)l.inflate(R.layout.contact_token, (ViewGroup)ContactsCompletionView.this.getParent(), false); ((TextView)view.findViewById(R.id.name)).setText(p.getEmail()); return view; } @Override protected Object defaultObject(Ssortingng completionText) { //Stupid simple example of guessing if we have an email or not int index = completionText.indexOf('@'); if (index == -1) { return new Person(completionText, completionText.replace(" ", "") + "@example.com"); } else { return new Person(completionText.subssortingng(0, index), completionText); } } } 

Code de mise en page pour contact_token (vous pouvez utiliser n’importe quel type de mise en page ici ou vous pouvez lancer une image si vous voulez des images dans le jeton)

    

Jetable backgound dessinable

     

Code object personne

 public class Person implements Serializable { private Ssortingng name; private Ssortingng email; public Person(Ssortingng n, Ssortingng e) { name = n; email = e; } public Ssortingng getName() { return name; } public Ssortingng getEmail() { return email; } @Override public Ssortingng toSsortingng() { return name; } } 

Activité de l’échantillon

 public class TokenActivity extends Activity { ContactsCompletionView completionView; Person[] people; ArrayAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); people = new Person[]{ new Person("Marshall Weir", "[email protected]"), new Person("Margaret Smith", "[email protected]"), new Person("Max Jordan", "[email protected]"), new Person("Meg Peterson", "[email protected]"), new Person("Amanda Johnson", "[email protected]"), new Person("Terry Anderson", "[email protected]") }; adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, people); completionView = (ContactsCompletionView)findViewById(R.id.searchView); completionView.setAdapter(adapter); } } 

Code de mise en page

    

Vous pouvez le faire en créant une sous-classe de android.text.style.DynamicDrawableSpan . ImageSpan est un exemple: il remplace une plage de texte par une image.

Cet exemple mettra une écanvas dans un champ d’édition, remplaçant le texte “test”. Créez un EditText dans votre mise en page avec l’id de “text” et mettez-le dans onCreate() (ou ailleurs):

  EditText mText = (EditText) findViewById(R.id.text); final Editable e = mText.getEditableText(); final SpannableSsortingngBuilder sb = new SpannableSsortingngBuilder(); sb.append("test"); sb.setSpan(new ImageSpan(this, android.R.drawable.btn_star), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); e.append(sb); 

Je n’ai pas vu de classes qui semblaient pouvoir envelopper un texte normal dans un dessin, mais cela pourrait être assez facilement résolu en getDrawable() méthode getDrawable() et en rendant le texte vous-même.

J’ai résolu ce HERE Contact Bubble EditText

 final SpannableSsortingngBuilder sb = new SpannableSsortingngBuilder(); TextView tv = createContactTextView(contactName); BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv); bd.setBounds(0, 0, bd.getInsortingnsicWidth(),bd.getInsortingnsicHeight()); sb.append(contactName + ","); sb.setSpan(new ImageSpan(bd), sb.length()-(contactName.length()+1),sb.length()-1,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); to_input.setText(sb); public static Object convertViewToDrawable(View view) { int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); view.measure(spec, spec); view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight()); Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888); Canvas c = new Canvas(b); c.translate(-view.getScrollX(), -view.getScrollY()); view.draw(c); view.setDrawingCacheEnabled(true); Bitmap cacheBmp = view.getDrawingCache(); Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true); view.destroyDrawingCache(); return new BitmapDrawable(viewBmp); } public TextView createContactTextView(Ssortingng text){ //creating textview dynamically TextView tv = new TextView(this); tv.setText(text); tv.setTextSize(20); tv.setBackgroundResource(R.drawable.oval); tv.setCompoundDrawablesWithInsortingnsicBounds(0, 0, R.drawable.ic_clear_search_api_holo_light, 0); return tv; } 

Si vous voulez dire les conseils, vous pouvez append le simple avec:

 android:hint="@ssortingng/myHint" 

Cela mettra l’étiquette grise dans le texte d’édition lorsqu’il est vide.

Pour définir l’icône du cercle à gauche du EditText vous pouvez modifier le leftDrawable .

Vous pouvez le faire sur le fichier XML de présentation android:drawableRight="@drawable/search_icon" ou par programmation à l’aide de la fonction setCompoundDrawablesWithInsortingnsicBounds .

Si vous voulez aussi donner le style de la bulle, vous devez changer le motif pouvant être dessiné par un patch de 9 qui a le style. Vous avez ici un tutoriel pour une bulle de 9 patchs pour Google Maps.

J’espère que ça a aidé! 🙂

Je pense qu’il utilise la méthode setCompoundDrawables () pour insérer cette image dans le texte de modification

J’ai décidé de donner quelque chose en retour à la communauté et j’ai créé une bibliothèque destinée à résoudre ce problème précis. La bibliothèque avec un exemple de projet est disponible sur GitHub: https://github.com/RafalManka/BubbleEditText