web-dev-qa-db-fra.com

Composant Chips dans Android?

Ce la vitrine de conception matérielle dit sur le composant des puces. Mais je n'ai pas pu trouver d'exemple de code de ce composant?

Comment puis-je l'utiliser?

veuillez me montrer le code XML et Java code.

30
Knowledge Drilling

Essayez cette bibliothèque: https://github.com/klinker41/Android-chips

Vérifiez l'échantillon pour savoir comment l'utiliser.

4
razzledazzle

Vous n'avez pas besoin d'utiliser une bibliothèque tierce pour faire chips .

Une puce est essentiellement un TextView avec un arrière-plan arrondi. Vous pouvez également ajouter un bouton de suppression et un ImageView pour créer une vue telle que celle utilisée pour les contacts Google.

Pour les besoins de l'exemple, je n'utiliserai qu'un simple TextView. Créez d'abord l'interface utilisateur pour la puce.

-> shape_chip_drawable.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <solid Android:color="@color/colorPrimary" />

    <padding
        Android:bottom="12dp"
        Android:left="12dp"
        Android:right="12dp"
        Android:top="12dp" />

    <corners Android:radius="30dp" />
</shape>

Dans votre fichier de mise en page d'activité, définissez simplement ce fichier de ressources dessinable comme l'arrière-plan TextView comme ceci:

<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_centerInParent="true"
    Android:background="@drawable/shape_chip_drawable"
    Android:text="Hello, I'm a simple Chip!"
    Android:textColor="@Android:color/white"
    Android:textStyle="bold" />

C'est la vue qui est créée:

Chip view created

Nous pouvons maintenant utiliser HorizontalScrollView pour afficher une rangée de puces (comme l'application GooglePlay) ou utiliser StaggeredGridLayoutManager pour construire une grille de puces échelonnée.

[MODIFIER]

Si vous souhaitez afficher les puces sous la forme d'un FlowLayout, qui n'est pas intrinsèquement pris en charge dans Android, nous devons utiliser une bibliothèque. Ne vous inquiétez pas, c'est un tout petit changement.

Vous avez ajouté la ligne suivante à vos dépendances Gradle:

compile 'com.xiaofeng.Android:flowlayoutmanager:1.2.3.2'

et définissez votre gestionnaire de disposition de vue recycleur avec:

recyclerView.setLayoutManager(new FlowLayoutManager());

Détails supplémentaires ici sur GitHub

Passez une bonne journée! Faites des votes positifs si cela vous aide.

55
Ankit Aggarwal

Je sais que je suis en retard, mais cela peut aider d'autres personnes. J'aime vraiment aussi cette implémentation https://github.com/robertlevonyan/materialChipView . Cette bibliothèque nécessite au moins com.Android.support:appcompat-v7:25.2.0 de la bibliothèque de support. Je l'utilise avec ce gestionnaire de mise en page https://github.com/BelooS/ChipsLayoutManager . Vérifiez-les et voyez s'ils répondent à vos besoins.

4
ninyarko