web-dev-qa-db-fra.com

Android EditText Gmail aime le champ

Je travaille sur une application et j'essaie de créer un champ de type Gmail "À", qui contient des blocs qui ne peuvent pas être modifiés une fois ajoutés, mais simplement supprimés complètement (comme dans l'image jointe). S'il peut aussi avoir une image, ce serait parfait. gmail "To" field

androidgmailandroid-edittext
38
Ciprian

Cette technique - appelée "puces" - est discutée par Roman Nurik dans n post Google+ . À son tour, il pointe la réponse de Macarse ici sur StackOverflow . Ils indiquent à leur tour l'implémentation de cette interface utilisateur que vous voyez dans le client de messagerie de stock.

30
CommonsWare

J'ai open-source notre solution TokenAutoComplete sur github . La mienne a été testée depuis 2.2. J'ai conçu mon code pour permettre des implémentations et des personnalisations assez simples.

Voici un exemple d'implémentation utilisant ma bibliothèque:

Sous-classe TokenCompleteTextView

public class ContactsCompletionView extends TokenCompleteTextView {
    public ContactsCompletionView(Context context, AttributeSet 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(String 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.substring(0, index), completionText);
        }
    }
}

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

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_height="wrap_content"
    Android:layout_width="wrap_content">

    <TextView Android:id="@+id/name"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/token_background"
        Android:padding="5dp"
        Android:textColor="@Android:color/white"
        Android:textSize="18sp" />

</LinearLayout>

Fond de jeton dessinable

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <solid Android:color="#ffafafaf" />
    <corners
        Android:topLeftRadius="5dp"
        Android:bottomLeftRadius="5dp"
        Android:topRightRadius="5dp"
        Android:bottomRightRadius="5dp" />
</shape>

Code objet personne

public class Person implements Serializable {
    private String name;
    private String email;

    public Person(String n, String e) { name = n; email = e; }

    public String getName() { return name; }
    public String getEmail() { return email; }

    @Override
    public String toString() { return name; }
}

Exemple d'activité

public class TokenActivity extends Activity {
    ContactsCompletionView completionView;
    Person[] people;
    ArrayAdapter<Person> 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<Person>(this, Android.R.layout.simple_list_item_1, people);

        completionView = (ContactsCompletionView)findViewById(R.id.searchView);
        completionView.setAdapter(adapter);
        completionView.setPrefix("To: ");
    }
}

Code de mise en page

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <com.tokenautocomplete.ContactsCompletionView
        Android:id="@+id/searchView"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

</RelativeLayout>
11
Marshall Weir