Exemples simples de ListView Android basés sur le travail avec des collections et l'écoute de divers événements.

Un ListView est un widget Android qui nous permet de rendre une liste d'éléments déroulants.

ListView est un adapterview comme gridview et spinner. Cela signifie qu'elle nécessite un adaptateur pour pouvoir insérer ses éléments. L'adaptateur est responsable de l'extraction des données d'une source de contenu.

Cette source peut être un tableau ou quelque chose de plus complexe comme une base de données ou le réseau. En outre, l'adaptateur sera également chargé de convertir le résultat de chaque élément en une vue qui sera placée dans la vue de liste.

En effet, en tant que vue adaptatrice, la ListView ne connaît pas les détails, tels que le type et le contenu, des vues qu'elle contient. Elle demandera donc les vues à la demande à un ListAdapter selon les besoins. Par exemple, il demande ces vues lorsque l'utilisateur fait défiler la page vers le haut ou vers le bas.

Chacune des vues de la liste est positionnée immédiatement en dessous de la vue précédente dans la liste.

Définition de l'API ListView

Voici la définition de l'API de ListView.

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.AdapterView<android.widget.ListAdapter>
               ↳    android.widget.AbsListView
                   ↳    android.widget.ListView

Vous pouvez clairement voir que ListView réside dans le paquet android.widget et dérive de la classe abstraite AbsListView.

Comment afficher une ListView ?

Eh bien, pour afficher un ListView, il suffit d'ajouter le ListView dans le layout XML.

<ListView
      android_id="@+id/list_view"
      android_layout_width="match_parent"
      android_layout_height="match_parent" />
  1. android:id="@+id/list_view" - Nous attribuons un ID à la ListView.
  2. android:layout_width="match_parent" - Nous définissons la largeur de notre ListView pour qu'elle corresponde à celle du Layout sur lequel la ListView est rendue.
  3. android:layout_height="match_parent" - Nous définissons la hauteur de notre ListView pour qu'elle corresponde à celle du Layout sur lequel le ListView est rendu.
Réglage des ItemClicks pour une ListView simple.

Voici comment nous allons écouter les clics sur les éléments de notre ListView, et ainsi afficher un simple message de toast.

Nous devons invoquer la méthode setOnItemClickListener() de notre ListView et lui passer une classe annonyme AdapterView.OnItemClickListener(), puis surcharger la méthode onItemClick().

Dans ce cas, pos est la position de l'élément cliqué dans le ListView.

        myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int pos, long id) {
                Toast.makeText(MainActivity.this, languages.get(i), Toast.LENGTH_SHORT).show();
            }
        });
Comment créer un adaptateur personnalisé pour ListView.

Vous pouvez utiliser plusieurs adaptateurs, mais le plus utilisé est BaseAdapter.

private class MyCustomAdapter extends BaseAdapter {

      // override other abstract methods here

      @Override
      public View getView(int position, View convertView, ViewGroup container) {
          if (convertView == null) {
              convertView = getLayoutInflater().inflate(R.layout.my_list_item, container, false);
          }

          ((TextView) convertView.findViewById(android.R.id.nameTxt))
                  .setText(getItem(position));
          return convertView;
      }
  }

Comment définir un adaptateur pour un ListView ?

Nous définissons un adaptateur à un ListView en utilisant la méthode setAdapter(). Cette méthode est la suivante :

public void setAdapter (ListAdapter adapter)

La méthode setAdapter() est responsable de la liaison de nos données à notre ListView.

Nous devons passer un adaptateur à cette méthode. Cet adaptateur peut être enveloppé par un WrapperListAdapter, en fonction des caractéristiques de ListView actuellement utilisées. Par exemple, l'ajout d'en-têtes et/ou de pieds de page entraînera l'enveloppement de l'adaptateur.

Un WrapperListAdapter est un adaptateur de liste qui enveloppe un autre adaptateur de liste.

Adaptateur de liste : L'adaptateur de liste qui est responsable de la maintenance des données de cette liste et de la production d'une vue pour représenter un élément dans cet ensemble de données.

Quels attributs XML sont définis dans la classe ListView ?

La majorité des attributs XML que vous utiliserez sont définis dans les classes parentes comme AbsListView, qui hérite également d'autres classes de base comme ViewGroup et View.

Cependant, les attributs suivants sont également définis dans ListView :

1. android:divider Dessinable ou couleur à dessiner entre les éléments de la liste.
2. android:divider Dessinable ou couleur à dessiner entre les éléments de la liste.
3. android:dividerHeight Hauteur du diviseur.
4. android:entries Référence à un tableau de ressources qui alimentera la ListView.
5. android:footerDividersEnabled Lorsqu'il a la valeur false, le ListView ne dessinera pas le diviseur avant chaque vue de pied de page.
6. android:headerDividersEnabled Lorsqu'elle est définie à false, la liste d'affichage ne dessinera pas le séparateur après chaque vue d'en-tête.

Avec quels types d'adaptateurs ListView peut-il être utilisé ?

Voici quelques-uns des adaptateurs qui peuvent être utilisés avec une ListView :

BaseAdapter Une super classe d'implémentations communes pour une interface android.widget.Adapter. Elle implémente les interfaces ListAdapter et SpinnerAdapter.
La classe ArrayAdapter est un enfant de BaseAdapter qui utilise un tableau d'objets arbitraires comme source de données.
3. CursorAdapter Un enfant abstrait de BaseAdapter utilisé pour exposer les données de android.database.Cursor à une ListView.

Exemple de ListView simple

Regardons un [exemple simple de ListView] (/source/android-simple-listview-onitemclick) qui va afficher une liste de langages de programmation.

Lorsque l'utilisateur clique sur un seul élément, le langage cliqué est affiché dans un message Toast.

Exemple 1 : ListView Android - Remplir avec un tableau

Il s'agit d'un simple tutoriel sur les ListView, voici ce que nous faisons :

  • Remplir ListView avec des données provenant d'un simple tableau.
  • Nous utilisons ArrayAdapter.
  • Gérer ItemClicks.*

    Démonstration de ListView Android Array #### Notre activité principale

Voici notre [activité] principale (/android/activity). C'est notre activité de lancement. Cette classe sera le point d'entrée de notre application.

Tout d'abord, nous définissons notre package puis nous importons d'autres packages via les déclarations import.

Ensuite, nous faisons en sorte que notre classe dérive de AppCompatActivity.

Nous allons maintenir un tableau qui servira de source de données :

 String[] spacecrafts={"Juno","Hubble","Casini","WMAP","Spitzer","Pioneer","Columbia","Challenger","Apollo","Curiosity"};

Nous allons passer ce tableau dans notre constructeur arrayadapetr et définir son instance à notre ListView :

    ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,spacecrafts);
    lv.setAdapter(adapter);

Regardons le code source complet.

public class MainActivity extends AppCompatActivity {

 ListView lv;
 String[] spacecrafts={"Juno","Hubble","Casini","WMAP","Spitzer","Pioneer","Columbia","Challenger","Apollo","Curiosity"};

 @Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    lv= (ListView) findViewById(R.id.lv);

    //ADAPTER
    ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,spacecrafts);
    lv.setAdapter(adapter);

     //LISTENER
    lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Toast.makeText(MainActivity.this, spacecrafts[i], Toast.LENGTH_SHORT).show();
    }
    });

 }

}

Notre mise en page XML

Voici le layout de notre activité principale. Il s'agit de notre fichier activity_main.xml.

Nous utilisons les éléments suivants :

  1. RelativeLayout - Notre ViewGroup.
  2. ListView - Notre vue adaptatrice.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context="com.tutorials.hp.listviewarray.MainActivity">

    <ListView
        android_id="@+id/lv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
         />
</RelativeLayout>

Comment exécuter

  1. Téléchargez le projet.
  2. Vous obtiendrez un fichier zippé, extrayez-le.
  3. Ouvrez le Android Studio.
  4. Fermez maintenant le projet déjà ouvert.
  5. Dans la barre de menu, cliquez sur File >New> Import Project.
  6. Choisissez maintenant un dossier de destination, à partir duquel vous voulez importer le projet.
  7. Choisissez un projet Android.
  8. Cliquez maintenant sur "OK".
  9. C'est fait, vous avez fini d'importer le projet, maintenant éditez-le.

Plus de ressources

Parcourir GitHub Parcourir
Lien de téléchargement GitHub Download

Exemple 2 : Comment remplir un ListView à partir d'une ArrayList ?

Il s'agit d'un simple tutoriel sur les ListView, voici ce que nous faisons :

  • Remplir ListView avec des données provenant d'une simple ArrayList.
  • Nous utilisons ArrayAdapter.
  • Gérer les clics sur les éléments.

Notre activité principale

Voici notre classe MainActivity.

public class MainActivity extends AppCompatActivity {

    ArrayList<String> numbers=new ArrayList<>();
    ListView lv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lv = (ListView) findViewById(R.id.lv);

        //FILL DATA
        fillData();

        //ADAPTER
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, numbers);
        lv.setAdapter(adapter);

        //LISTENER
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, numbers.get(i), Toast.LENGTH_SHORT).show();
            }
        });
    }

    //FILL DATA
    private void fillData()
    {
        for (int i=0;i<10;i++)
        {
            numbers.add("Number "+String.valueOf(i));
        }
    }
}

Notre mise en page XML

Le layout de notre activité se trouve ici.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context="com.tutorials.hp.listviewarraylist.MainActivity">

    <ListView
        android_id="@+id/lv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
         />
</RelativeLayout>

Bonne journée.

Exemple 2 : Android Simple ListView OnItemClick

Voici un exemple simple de la façon de remplir une listview avec une arraylist de chaînes de caractères et de gérer notre ListView itemClicks.

Exemple

MainActivity.java

Voici notre activité principale.

Tout d'abord, nous spécifions le nom du paquetage, puis nous ajoutons nos déclarations d'importation.

Nous créons ensuite notre classe MainActivity, en la faisant dériver de AppCompatActivity.

Nous maintenons une simple liste de tableaux comme champ d'instance, qui contiendra nos données que nous rendrons dans notre listview.

Nous utiliserons ArrayAdapter comme adaptateur.

Voici comment nous allons procéder


public class MainActivity extends AppCompatActivity {

    ArrayList<String> languages=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //LISTVIEW
        ListView lv= (ListView) findViewById(R.id.lv);

        //FILL DATA
        fillData();

        //ADAPTR
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,languages);
        lv.setAdapter(adapter);

        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, languages.get(i), Toast.LENGTH_SHORT).show();
            }
        });
    }

    //FILL DATA
    private void fillData()
    {
        languages.clear();

        //FILL
        languages.add("Java");
        languages.add("C#");
        languages.add("VB.NET");
        languages.add("PHP");
        languages.add("Python");
        languages.add("Ruby");
        languages.add("C");
        languages.add("C++");
        languages.add("Fortran");
        languages.add("Cobol");
        languages.add("Perl");
        languages.add("Prolog");
    }

}
activity_main.xml

Voici le layout de notre activité principale. Nous l'appelons activity_main.xml.

Nous utilisons les éléments suivants :

  1. RelativeLayout - Notre ViewGroup.
  2. ListView - Notre vue adaptatrice.

C'est le ListView qui assurera le rendu de nos données.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context="com.tutorials.hp.simplelistview.MainActivity">

    <ListView
        android_id="@+id/lv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
         />
</RelativeLayout>

SECTION 2 : Code source

Téléchargez le code source ci-dessous.

GitHub Browse Browse
Lien de téléchargement GitHub Download

Exemple 3 : Comment remplir une listView à partir d'une liste d'objets POJO

Comment remplir une simple ListView avec une Liste d'objets POJO.

Dans ce tutoriel, nous voyons comment remplir une simple liste d'objets "Person" et comment afficher le nom de la personne dans un message Toast lorsqu'elle clique dessus.

Concepts que vous apprendrez dans cet exemple

  1. Qu'est-ce qu'une [ListView] (/android/listview) ?
  2. Qu'est-ce qu'une collection List ?
  3. Comment remplir un ListView à partir d'une structure de données List d'objets POJO dans android studio ? 4.
  4. Comment faire un simple écouteur de clics dans une vue de liste. 5.
  5. Qu'est-ce qu'un ArrayAdapter ?
  6. Comment utiliser ArrayAdapter pour lier une liste java à une liste simple.

**Comment définir un ListView dans une mise en page XML ?

Vous utilisez l'objet ListView comme élément :

    <ListView
        android_id="@+id/lv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
         />

Comment référencer une ListView en code Java

Voici comment référencer un ListView. Vous utilisez la méthode findViewById() :

ListView lv= (ListView) findViewById(R.id.lv);

(a). Initialisation d'une liste Java

Voici comment vous pouvez initialiser une liste. Vous ne pouvez pas directement l'instancier puisque comme nous l'avons dit c'est une interface :

    List<String> people=new ArrayList<>();

(b). Comment effacer une liste Java

Vous pouvez supprimer tous les éléments d'une liste java en utilisant la méthode clear() :

    people.clear();

(c). Remplir une liste Java avec des objets

Vous pouvez peupler une liste java en utilisant la méthode add() :

    private void fillPeople()
    {
        Person p=new Person();
        p.setName("Mike");
        people.add(p.getName());

        p=new Person();
        p.setName("John");
        people.add(p.getName());
        .....

En savoir plus sur les listes java ici.

Qu'est-ce qu'un ArrayAdapter ?

Nous avons besoin d'un adaptateur pour travailler avec un listview.

Un adaptateur est une classe qui agit comme un pont entre une vue adaptateur et la source de données sous-jacente.

Dans ce cas, nous utiliserons un ArrayAdapter.

Vous pouvez en savoir plus sur ArrayAdapter ici.

1. Démonstration du projet

Voici la démo de l'exemple :

2. Ceation d'Android Studio et du projet

(a). Qu'est-ce qu'Android Studio ?

Nous utiliserons Android Studio, l'IDE officiel pour le développement d'android. Android Studio est maintenu par Google et Jetbrains.

Android Studio est fourni avec l'Android SDK Manager, qui est un outil permettant de télécharger les composants Android SDK nécessaires au développement d'applications android.

Pour en savoir plus sur Android Studio, allez [ici] (/android/android-studio).

(b). Comment créer une activité vide dans Android Studio ?
  1. Tout d'abord, créez un projet vide dans Android Studio. Allez à File -> New Project.
  2. Tapez le nom de l'application et choisissez le nom de l'entreprise.
  3. Choisissez le SDK minimum.
  4. Choisissez Empty activity.
  5. Cliquez sur Terminer.

Cela va générer pour nous un projet avec ce qui suit :

1. activity_main.xml XML Layout Sera gonflé dans la vue MainActivity. Vous ajoutez vos vues et widgets ici.
2. MainActivity.java Classe Notre lanceur activité

Pour en savoir plus sur la création d'un projet android dans android studio, allez ici.

(c). Structure du projet généré dans Android Stduo

Android Studio va générer pour vous un projet avec des configurations par défaut via un ensemble de fichiers et de répertoires.

2. Ressources.

La plate-forme Android offre un moyen puissant et flexible d'ajouter du contenu statique en tant que ressource.

Ce contenu statique sera également intégré dans le fichier APK. Le contenu statique sera stocké soit comme une ressource, soit comme un actif.

Les ressources appartiennent à un type donné. Ces types peuvent être :

  1. Dessinable.
  2. Mise en page.
  3. Valeur.

Commençons par examiner les ressources de mise en page

(a). activité_main.xml

Ce layout sera gonflé dans l'interface utilisateur de l'activité principale. Cela se fera via la méthode setContentView() de l'activité qui nous demandera de lui passer le layout.

Nous le ferons à l'intérieur de la méthode onCreate() de Activity.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context="com.tutorials.hp.listviewandobjects.MainActivity">

    <ListView
        android_id="@+id/lv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
         />
</RelativeLayout>

3. Code Java.

Les applications Android peuvent être principalement écrites en Java ou en Kotlin. Ces jours-ci cependant il y a beaucoup de frameworks comme Flutter aussi qui utilisent des langages comme Dart.

Dans ce cours, nous utilisons le langage de programmation Java.

Nous aurons ces classes dans notre projet.

(a). Personne.java

C'est notre objet de données. Cette classe représente une seule personne.

Une personne unique aura les propriétés suivantes :

  1. id - un nombre entier. L'identifiant de la personne.
  2. name - Le nom de la personne. Une chaîne de caractères.

Notre liste sera donc composée d'objets Person.


public class Person {

    int id;
    String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
(b). MainActivity.java

C'est notre activité de lancement comme son nom l'indique. Cela signifie qu'elle sera le point d'entrée principal de notre application en ce sens que lorsque l'utilisateur clique sur l'icône de notre application, cette activité sera rendue en premier.

Nous surchargeons une méthode appelée onCreate(). Ici, nous allons commencer par gonfler notre layout principal via la méthode setContentView().

Notre activité principale est en fait une activity puisqu'elle dérive de l'AppCompatActivity.

public class MainActivity extends AppCompatActivity {

    List<String> people=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //LISTVIEW
        ListView lv= (ListView) findViewById(R.id.lv);

        //FILL LIST
        fillPeople();

        //ADAPTER
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,people);
        lv.setAdapter(adapter);

        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, people.get(i), Toast.LENGTH_SHORT).show();

            }
        });
    }

    private void fillPeople()
    {
        people.clear();
        Person p=new Person();
        p.setName("Mike");
        people.add(p.getName());

        p=new Person();
        p.setName("John");
        people.add(p.getName());

        p=new Person();
        p.setName("Lucy");
        people.add(p.getName());

        p=new Person();
        p.setName("Rebecca");
        people.add(p.getName());

        p=new Person();
        p.setName("Kris");
        people.add(p.getName());

        p=new Person();
        p.setName("Kurt");
        people.add(p.getName());

        p=new Person();
        p.setName("Vin");
        people.add(p.getName());
    }
}

4. Télécharger

Tout est dans la référence du code source. Il est bien commenté et facile à comprendre et peut être téléchargé ci-dessous.

Consultez aussi notre tutoriel vidéo il est plus détaillé et expliqué en pas à pas.

1. GitHub Téléchargement direct
2. GitHub Browse 3.
3. YouTube Notre chaîne YouTube

Exemple 4 : ListView - Comment écouter les événements LongClick

Ceci est un tutoriel android pour explorer comment gérer les événements longclick dans une listview personnalisée avec des images et du texte.

C'est parti.

1. Créer un projet d'activité de base

  1. Tout d'abord, créez un nouveau projet dans android studio. Allez à File -> New Project.
  2. Tapez le nom de l'application et choisissez le nom de l'entreprise.
    ! Dialogue Nouveau Projet
  3. Choisissez le SDK minimum.
    Choisir le SDK minimum
  4. Choisissez l'activité de base.
    Choisir l'activité vide
  5. Cliquez sur Finish.
    Terminer

L'activité de base aura une barre d'outils et un bouton d'action flottant déjà ajoutés dans la mise en page.

2. Dépendances

Nous n'avons pas vraiment de dépendances externes. Au lieu de cela, nous spécifions simplement un couple de dépendances de bibliothèque de soutien.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    testImplementation 'junit:junit:4.12'
    implementation `com.android.support:appcompat-v7:23.2.1'
    implementation `com.android.support:design:23.2.1'
    implementation `com.android.support:cardview-v7:23.2.1'
}

3. Créer l'interface utilisateur

Les interfaces utilisateur sont généralement créées dans android en utilisant des mises en page XML par opposition au codage direct en java.

(a). activité_main.xml
  • Ce modèle est gonflé en interface utilisateur MainActivity.
  • Il inclut le fichier content_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.listviewlongclick.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
(b). content_main.xml

Ajoutons notre ListView ici.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.listviewlongclick.MainActivity"
    tools_showIn="@layout/activity_main">

    <ListView
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_id="@+id/lv"
        android_layout_alignParentLeft="true"
        android_layout_alignParentStart="true" />
</RelativeLayout>
(c). model.xml

Ce modèle définira le modèle de ligne personnalisé pour notre ListView.

Dans ce cas, notre ListView aura des images et du texte.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android_orientation="horizontal" android_layout_width="match_parent"

    android_layout_margin="10dp"
    card_view_cardCornerRadius="10dp"
    card_view_cardElevation="10dp"

    android_layout_height="wrap_content">

    <RelativeLayout
        android_layout_width="match_parent"
        android_layout_height="match_parent">

        <ImageView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_id="@+id/movieImage"
            android_padding="10dp"
            android_src="@drawable/ghost" />

        <TextView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textAppearance="?android:attr/textAppearanceLarge"
            android_text="Name"
            android_id="@+id/nameTxt"
            android_padding="10dp"
            android_textColor="@color/colorAccent"
            android_layout_below="@+id/movieImage"
            android_layout_alignParentLeft="true"
             />

        <TextView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textAppearance="?android:attr/textAppearanceLarge"
            android_text=" John Doe a former FBI Agent and now Physics teacher .is wrongly accussed of murdering an innocent child.He makes it his business to find the bad guys who did taht.He convinces hacker Aram to join him.....
            "
            android_id="@+id/descTxt"
            android_padding="10dp"
            android_layout_below="@+id/nameTxt"
            android_layout_alignParentLeft="true"
            />

        <TextView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textAppearance="?android:attr/textAppearanceMedium"
            android_text="TV Show"
            android_id="@+id/posTxt"
            android_padding="10dp"

            android_layout_below="@+id/movieImage"
            android_layout_alignParentRight="true" />

        <CheckBox
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_id="@+id/chk"
            android_layout_alignParentRight="true"
            />

    </RelativeLayout>
</android.support.v7.widget.CardView>

Venons-en maintenant à nos classes Java :

4. Movie.java

Notre objet de données. Va représenter un seul film.

package com.tutorials.hp.listviewlongclick;

public class Movie {

    private String name;
    private int image;

    public Movie(String name, int image) {
        this.name = name;
        this.image = image;
    }

    public String getName() {
        return name;
    }

    public int getImage() {
        return image;
    }
}

5. ItemLongClickListener.java

Notre interface d'écouteur de clics longs.


public interface ItemLongClickListener {

    void onLongItemClick(View v);

}

6. MyViewHolder.java

Va contenir nos widgets à recycler.


public class MyViewHolder implements View.OnLongClickListener {

    ImageView img;
    TextView nameTxt;
    ItemLongClickListener itemLongClickListener;

    public MyViewHolder(View v) {
        img= (ImageView) v.findViewById(R.id.movieImage);
        nameTxt= (TextView) v.findViewById(R.id.nameTxt);

        v.setOnLongClickListener(this);

    }

    public void setItemLongClickListener(ItemLongClickListener ic)
    {
        this.itemLongClickListener=ic;
    }

    @Override
    public boolean onLongClick(View v) {
        this.itemLongClickListener.onLongItemClick(v);
        return false;
    }
}

7. CustomAdapter.java

Gonflera notre model.xml et liera les données aux vues résultantes.

public class CustomAdapter extends BaseAdapter {

    Context c;
    ArrayList<Movie> movies;
    LayoutInflater inflater;

    public CustomAdapter(Context c, ArrayList<Movie> movies) {
        this.c = c;
        this.movies = movies;
    }

    @Override
    public int getCount() {
        return movies.size();
    }

    @Override
    public Object getItem(int position) {
        return movies.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    //SHALL RETURN A ROW
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        if(inflater==null)
        {
            inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        //CONVERT FROM XML TO JAVA
        if(convertView==null)
        {
            convertView=inflater.inflate(R.layout.model,parent,false);
        }

        //BIND DATA TO VIEWS
        MyViewHolder holder=new MyViewHolder(convertView);
        holder.nameTxt.setText(movies.get(position).getName());
        holder.img.setImageResource(movies.get(position).getImage());

        holder.setItemLongClickListener(new ItemLongClickListener() {
            @Override
            public void onLongItemClick(View v) {
                Toast.makeText(c,movies.get(position).getName(),Toast.LENGTH_SHORT).show();
            }
        });

        return convertView;
    }
}

8. MainActivity.java

Notre activité principale.

public class MainActivity extends AppCompatActivity {

    ListView lv;
    CustomAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        lv= (ListView) findViewById(R.id.lv);
        adapter=new CustomAdapter(this,getMovies());

        //SET ADAPTER
        lv.setAdapter(adapter);

    }

    private ArrayList<Movie> getMovies() {

        //COLECTION OF CRIME MOVIES
        ArrayList<Movie> movies=new ArrayList<>();

        Movie movie=new Movie("Shuttle Carrier",R.drawable.shuttlecarrier);

        //ADD ITR TO COLLECTION
        movies.add(movie);

        movie=new Movie("Fruts",R.drawable.fruits);
        movies.add(movie);

        movie=new Movie("Breaking Bad",R.drawable.breaking);
        movies.add(movie);

        movie=new Movie("Crisis",R.drawable.crisis);
        movies.add(movie);

        movie=new Movie("Ghost Rider",R.drawable.rider);
        movies.add(movie);

        movie=new Movie("Star Wars",R.drawable.starwars);
        movies.add(movie);

        movie=new Movie("BlackList",R.drawable.red);
        movies.add(movie);

        movie=new Movie("Men In Black",R.drawable.meninblack);
        movies.add(movie);

        movie=new Movie("Game Of Thrones",R.drawable.thrones);
        movies.add(movie);

        return movies;
    }

}

Télécharger le code

Parcourir GitHub Télécharger

Exemple 4 : Android Custom ListView Master Detail [Ouvrir une nouvelle activité].

**Aujourd'hui, nous allons parler de l'interface Android Custom ListView Master Detail.

Notre ListView doit contenir des images et du texte.

SECTION 1 : Notre activité principale

Voici notre [activité] principale (/android/activity).

C'est notre vue principale.

La vue principale affichera une ListView avec des objets Player.

public class MainActivity extends Activity {

  ListView lv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lv=(ListView) findViewById(R.id.listView1);

        //ADAPTER
        CustomAdapter adapter=new CustomAdapter(this);
        lv.setAdapter(adapter);

        //EVENTS
        lv.setOnItemClickListener(new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> arg0, View v, int pos,
          long id) {
        // TODO Auto-generated method stub

        Intent i=new Intent(getApplicationContext(), PlayerActivity.class);

        //PASS INDEX OR POS
        i.putExtra("Position", pos);
        startActivity(i);

      }
    });

    }

SECTION 2 : Notre DetailActivity

C'est notre [activité] de détail (/android/activity).

Cette classe va afficher les détails d'un seul objet joueur.


public class PlayerActivity extends Activity {

  int pos=0;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_player);

    //GET PASSED DATA
    Intent i=getIntent();
    pos=i.getExtras().getInt("Position");

    //GET VIEWS
    final CustomAdapter adapter=new CustomAdapter(this);
    final ImageView img=(ImageView) findViewById(R.id.imageView1);
     final TextView nameTv=(TextView)findViewById(R.id.nameTxt);
     final TextView goalTv=(TextView) findViewById(R.id.goalTxt);

     //SET DATA
     img.setImageResource(adapter.images[pos]);
     nameTv.setText(adapter.names[pos]);
     goalTv.setText(adapter.goals[pos]);

     Button nextBtn=(Button) findViewById(R.id.button1);
     //NEXT CLICKED
     nextBtn.setOnClickListener(new OnClickListener() {

      @Override
      public void onClick(View arg0) {
        // TODO Auto-generated method stub

        int position=pos+1;

        //set data
        img.setImageResource(adapter.images[position]);
         nameTv.setText("Name: "+adapter.names[position]);
         goalTv.setText("Goals: "+adapter.goals[position]);

         if(!(position>=adapter.getCount()-1))
         {
           pos +=1;
         }else
         {
           pos = -1;
         }

      }
    });

  }

}

SECTION 3 : Notre CustomAdapter :

Voici notre classe d'adaptateur.

Cette classe dérivera de la classe android.widget.BaseAdapter.

En tant qu'adaptateur, elle sera responsable d'abord de gonfler notre model.xml dans un objet de vue. Ensuite, il liera les données à cette vue gonflée.

Nous allons également écouter les événements de clics pour cette vue puis ouvrir le détail activité.

public class CustomAdapter extends BaseAdapter {

  private Context c;

  String[] names={"Michael Carrick","Diego Costa","Ander Herera","Juan Mata","Oscar","Aaron Ramsey","Wayne Rooney","Alexis Sanchez","Van Persie"};
    String[] goals={"3","25","9","11","9","11","14","18","13"};
    int[] images={R.drawable.carrick,R.drawable.costa,R.drawable.herera,R.drawable.mata,R.drawable.oscar,R.drawable.ramsey,R.drawable.rooney,R.drawable.sanchez,R.drawable.vanpersie};

;   public CustomAdapter(Context ctx) {
    // TODO Auto-generated constructor stub

    this.c=ctx;
  }

  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return names.length;
  }

  @Override
  public Object getItem(int pos) {
    // TODO Auto-generated method stub
    return names[pos];
  }

  @Override
  public long getItemId(int pos) {
    // TODO Auto-generated method stub
    return pos;
  }

  @Override
  public View getView(int pos, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    if(convertView==null)
    {
      LayoutInflater inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView=inflater.inflate(R.layout.player, null);
    }

    //GET VIEWS
    TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv);
        TextView goalsTxt=(TextView) convertView.findViewById(R.id.goalsTv);
        ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);

        //SET DATA
        nameTxt.setText(names[pos]);
        goalsTxt.setText(goals[pos]);
        img.setImageResource(images[pos]);

    return convertView;
  }

}

SECTION 4 : Notre mise en page MainActivity

Ce layout sera gonflé en interface utilisateur pour notre activité principale.

Ce layout contiendra un ListView.

<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context=".MainActivity" >

    <ListView
        android_id="@+id/listView1"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true" >

    </ListView>

</RelativeLayout>

SECTION 5 : Notre mise en page DetailActivity

Voici notre layout de détail activité. Il contiendra un imageview, un textview et un bouton.

<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context=".PlayerActivity" >

    <ImageView
        android_id="@+id/imageView1"
        android_layout_width="190dp"
        android_layout_height="275dp"
        android_layout_alignParentTop="true"
        android_scaleType="fitCenter"
        android_src="@drawable/carrick" />

    <Button
        android_id="@+id/button1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentBottom="true"
        android_layout_alignParentRight="true"
        android_text="Next" />

    <TextView
        android_id="@+id/goalTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_below="@+id/nameTxt"
        android_layout_marginTop="24dp"
        android_text="Goals : "
        android_textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android_id="@+id/textView1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_below="@+id/imageView1"
        android_text="PLAYER PROFILE"
        android_textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android_id="@+id/nameTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_below="@+id/textView1"
        android_layout_marginTop="17dp"
        android_text="Name"
        android_textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

SECTION 6 : Notre modèle de rangée RowModel Layout

Il s'agit de notre modèle de rangée de listview personnalisé.
Il définit comment chaque rangée de listview apparaîtra.
Dans ce cas, nous avons une imageview et deux textviews.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="horizontal" >

    <TextView
        android_id="@+id/nameTv"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="28dp"
        android_layout_toRightOf="@+id/imageView1"
        android_text="Name"
        android_textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android_id="@+id/goalsTv"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignBottom="@+id/imageView1"
        android_layout_alignLeft="@+id/nameTv"
        android_layout_marginBottom="16dp"
        android_text="Goals"
        android_textAppearance="?android:attr/textAppearanceSmall" />

    <ImageView
        android_id="@+id/imageView1"
        android_layout_width="65dp"
        android_layout_height="71dp"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="26dp"
        android_padding="10dp"
        android_src="@drawable/herera" />

</RelativeLayout>

SECTION 7 : Notre manifeste

Ceci est notre manifeste android. Assurez-vous simplement que nos deux activités sont enregistrées.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    package="com.example.listviewmasterdetail"
    android_versionCode="1"
    android_versionName="1.0" >

    <uses-sdk
        android_minSdkVersion="19"
        android_targetSdkVersion="19" />

    <application
        android_allowBackup="true"
        android_icon="@drawable/ic_launcher"
        android_label="@string/app_name"
        android_theme="@style/AppTheme" >
        <activity
            android_name="com.example.listviewmasterdetail.MainActivity"
            android_label="@string/app_name" >
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android_name="com.example.listviewmasterdetail.PlayerActivity"
            android_label="@string/title_activity_player" >
        </activity>
    </application>

</manifest>

Exemple 5 : Android ListView - CRUD - ADD UPDATE DELETE.

Bonjour, Nous voyons comment effectuer des opérations CRUD de base contre une arrayist et une ListView.

  • Ajout, mise à jour et suppression d'une ArrayList et d'une ListView.
  • Nous travaillons avec ArrayAdapter.
  • gérer les clics sur les éléments et saisir des données à partir d'un dialogue.

    Android ListView CRUD #### 1. Niveau de l'application Build.Gradle

  • Ajouter les dépendances pour les bibliothèques AppCompat et Design support.
  • Notre MainActivity dérivera de AppCompatActivity tandis que nous utiliserons également le bouton d'action flottant des bibliothèques de support de conception.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "24.0.1"

    defaultConfig {
        applicationId "com.tutorials.hp.listview_crud"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    testImplementation 'junit:junit:4.12'
    implementation `com.android.support:appcompat-v7:24.1.1'
    implementation `com.android.support:design:24.1.1'
}

2. CRUD.java

  • Ajouter, mettre à jour, supprimer des données. Responsable de l'exécution des opérations CRUD.


public class CRUD {

    private ArrayList<String> names =new ArrayList<>();

    public void save(String name)
    {
       names.add(name);
    }

    public ArrayList<String> getNames()
    {

        return names;
    }

    public Boolean update(int position,String newName)
    {
       try {
           names.remove(position);
           names.add(position,newName);

           return true;
       }catch (Exception e)
       {
           e.printStackTrace();
          return false;
        }
    }

    public Boolean delete(int position)
    {
        try {
            names.remove(position);

            return true;
        }catch (Exception e)
        {
            e.printStackTrace();
            return false;

        }
    }
}

3. MainActivity.java

  • Activité de lancement.
  • ActivityMain.xml gonflé comme le contentview pour cette activité.
  • Référence notre ListView.

public class MainActivity extends AppCompatActivity {

    ListView lv;
    ArrayAdapter<String> adapter;
    CRUD crud=new CRUD();
    Dialog d;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        lv= (ListView) findViewById(R.id.lv);

        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                if(d != null) {
                    if(!d.isShowing())
                    {
                        displayInputDialog(i);
                    }else
                    {
                        d.dismiss();
                    }
                }
            }
        });

        final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                displayInputDialog(-1);
            }
        });
    }
    private void displayInputDialog(final int pos)
    {
        d=new Dialog(this);
        d.setTitle("LISTVIEW CRUD");
        d.setContentView(R.layout.input_dialog);

        final EditText nameEditTxt= (EditText) d.findViewById(R.id.nameEditText);
        Button addBtn= (Button) d.findViewById(R.id.addBtn);
        Button updateBtn= (Button) d.findViewById(R.id.updateBtn);
        Button deleteBtn= (Button) d.findViewById(R.id.deleteBtn);

        if(pos== -1)
        {
            addBtn.setEnabled(true);
            updateBtn.setEnabled(false);
            deleteBtn.setEnabled(false);
        }else
        {
            addBtn.setEnabled(true);
            updateBtn.setEnabled(true);
            deleteBtn.setEnabled(true);
            nameEditTxt.setText(crud.getNames().get(pos));
        }

        addBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //GET DATA
                String name=nameEditTxt.getText().toString();

                //VALIDATE
                if(name.length()>0 && name != null)
                {
                    //save
                    crud.save(name);
                    nameEditTxt.setText("");
                    adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
                    lv.setAdapter(adapter);

                }else
                {
                    Toast.makeText(MainActivity.this, "Name cannot be empty", Toast.LENGTH_SHORT).show();
                }
            }
        });
        updateBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //GET DATA
                String newName=nameEditTxt.getText().toString();

                //VALIDATE
                if(newName.length()>0 && newName != null)
                {
                    //save
                    if(crud.update(pos,newName))
                    {
                        nameEditTxt.setText(newName);
                        adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
                        lv.setAdapter(adapter);
                    }

                }else
                {
                    Toast.makeText(MainActivity.this, "Name cannot be empty", Toast.LENGTH_SHORT).show();
                }
            }
        });
        deleteBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //DELETE
                if( crud.delete(pos))
                {
                    nameEditTxt.setText("");
                    adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
                    lv.setAdapter(adapter);
                }
            }
        });

        d.show();
    }
}

4. ActivityMain.xml

  • Contenir notre ContentMain.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.listview_crud.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

5. ContentMain.xml

  • Pour contenir notre ListView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.listview_crud.MainActivity"
    tools_showIn="@layout/activity_main">

    <ListView
        android_id="@+id/lv"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
         />
</RelativeLayout>

6. inputdialog.xml

  • gère les entrées.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent">

    <LinearLayout
        android_layout_width="fill_parent"
        android_layout_height="match_parent"
        android_layout_marginTop="?attr/actionBarSize"
        android_orientation="vertical"
        android_paddingLeft="15dp"
        android_paddingRight="15dp"
        android_paddingTop="10dp">

        <android.support.design.widget.TextInputLayout
            android_id="@+id/nameLayout"
            android_layout_width="match_parent"
            android_layout_height="wrap_content">

            <EditText
                android_id="@+id/nameEditText"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_singleLine="true"
                android_hint= "Name" />
        </android.support.design.widget.TextInputLayout>

<LinearLayout
    android_orientation="horizontal"
    android_layout_width="match_parent"
    android_layout_height="wrap_content">
    <Button android_id="@+id/addBtn"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="ADD"
        android_clickable="true"
        android_background="@color/colorAccent"
        android_layout_marginTop="20dp"
        android_textColor="@android:color/white"/>

    <Button android_id="@+id/updateBtn"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="UPDATE"
        android_clickable="true"
        android_background="#009968"
        android_layout_marginTop="20dp"
        android_textColor="@android:color/white"/>

    <Button android_id="@+id/deleteBtn"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="DELETE"
        android_clickable="true"
        android_background="#2fc1b9"
        android_layout_marginTop="20dp"
        android_textColor="@android:color/white"/>
</LinearLayout>
         </LinearLayout>

</LinearLayout>

Comment exécuter

  1. Téléchargez le projet.
  2. Vous obtiendrez un fichier zippé, extrayez-le.
  3. Ouvrez le Android Studio.
  4. Fermez maintenant le projet déjà ouvert.
  5. Dans la barre de menu, cliquez sur File >New> Import Project.
  6. Choisissez maintenant un dossier de destination, à partir duquel vous voulez importer le projet.
  7. Choisissez un projet Android.
  8. Cliquez maintenant sur "OK".
  9. C'est fait, vous avez fini d'importer le projet, maintenant éditez-le.

Plus de ressources

Parcourir GitHub Parcourir
Lien de téléchargement GitHub Télécharger

Bonne journée.

Exemple : ListView Android - ContextMenu

*Tutoriel sur les ListView personnalisés d'Android avec images, texte et menu contextuel.

La ListView aura une liste d'éléments. L'utilisateur peut alors faire un clic droit sur un élément donné et un menu contextuel s'affiche.

Concepts que vous apprendrez à partir de cet exemple

  1. Qu'est-ce qu'une ListView ?
  2. Qu'est-ce qu'un ContextMenu ?
  3. Comment créer une liste personnalisée avec des images, du texte et un menu contextuel dans android studio.
  4. Comment implémenter un écouteur de clics longs dans une liste ? 5.
  5. Comment afficher un menu contextuel avec des éléments de menu lorsque l'on clique avec le bouton droit de la souris sur un listview cardview. 6.
  6. Comment créer un adaptateur personnalisé avec baseadapter.

Qu'est-ce que BaseAdapter ?

Nous avons besoin d'un adaptateur pour travailler avec un listview.

Un adaptateur est une classe qui agit comme un pont entre un adaptateur et la source de données sous-jacente.

Dans ce cas, nous utiliserons BaseAdapter.

1. Fichiers Gradle

Tout d'abord, nous ajoutons les dépendances dans le fichier build.gradle au niveau de l'application.

(a). Build.gradle

Ajoutons quelques dépendances. Notre ListView comprendra des cardviews :

    apply plugin: 'com.android.application'

    android {
        compileSdkVersion 23
        buildToolsVersion "23.0.2"

        defaultConfig {
            applicationId "com.tutorials.hp.listviewcontextmenu"
            minSdkVersion 15
            targetSdkVersion 23
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }

    dependencies {
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        testImplementation 'junit:junit:4.12'
        implementation `com.android.support:appcompat-v7:23.2.1'
        implementation `com.android.support:design:23.2.1'
        implementation `com.android.support:cardview-v7:23.2.1'
    }

2. Fichiers de mise en page

Voyons nos fichiers de mise en page. Nous en aurons trois :

  1. activité_main.xml
  2. content_main.xml
  3. modèle.xml
(a). activity_main.xml
  • Notre modèle de mise en page pour l'activité principale.
  • Il sera gonflé à la vue de l'activité principale.
  • Il contiendra le content_main.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout

        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_fitsSystemWindows="true"
        tools_context="com.tutorials.hp.listviewcontextmenu.MainActivity">

        <android.support.design.widget.AppBarLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android_id="@+id/toolbar"
                android_layout_width="match_parent"
                android_layout_height="?attr/actionBarSize"
                android_background="?attr/colorPrimary"
                app_popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/content_main" />

        <android.support.design.widget.FloatingActionButton
            android_id="@+id/fab"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_gravity="bottom|end"
            android_layout_margin="@dimen/fab_margin"
            android_src="@android:drawable/ic_dialog_email" />

    </android.support.design.widget.CoordinatorLayout>
(b). content_main.xml
  • Ceci contiendra notre ListView.
  • Il sera inclus à l'intérieur du activity_main.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout

        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_paddingBottom="@dimen/activity_vertical_margin"
        android_paddingLeft="@dimen/activity_horizontal_margin"
        android_paddingRight="@dimen/activity_horizontal_margin"
        android_paddingTop="@dimen/activity_vertical_margin"
        app_layout_behavior="@string/appbar_scrolling_view_behavior"
        tools_context="com.tutorials.hp.listviewcontextmenu.MainActivity"
        tools_showIn="@layout/activity_main">

        <ListView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_id="@+id/lv"

            android_layout_alignParentLeft="true"
            android_layout_alignParentStart="true" />
    </RelativeLayout>
(c). model.xml
  • Est notre mise en page de ligne de listview personnalisée.
  • Sera gonflé en une seule ligne.
  • Contient un cardview avec des images et du texte.

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
        android_orientation="horizontal" android_layout_width="match_parent"

        android_layout_margin="10dp"
        card_view_cardCornerRadius="10dp"
        card_view_cardElevation="10dp"

        android_layout_height="wrap_content">

        <RelativeLayout
            android_layout_width="match_parent"
            android_layout_height="match_parent">

            <ImageView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_id="@+id/movieImage"
                android_padding="10dp"
                android_src="@drawable/ghost" />

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_textAppearance="?android:attr/textAppearanceLarge"
                android_text="Name"
                android_id="@+id/nameTxt"
                android_padding="10dp"
                android_textColor="@color/colorAccent"
                android_layout_below="@+id/movieImage"
                android_layout_alignParentLeft="true"
                 />

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_textAppearance="?android:attr/textAppearanceLarge"
                android_text=" John Doe a former FBI Agent and now Physics teacher .is wrongly accussed of murdering an innocent child.He makes it his business to find the bad guys who did taht.He convinces hacker Aram to join him.....
                "
                android_id="@+id/descTxt"
                android_padding="10dp"
                android_layout_below="@+id/nameTxt"
                android_layout_alignParentLeft="true"
                />

            <TextView
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_textAppearance="?android:attr/textAppearanceMedium"
                android_text="TV Show"
                android_id="@+id/posTxt"
                android_padding="10dp"

                android_layout_below="@+id/movieImage"
                android_layout_alignParentRight="true" />

            <CheckBox
                android_layout_width="wrap_content"
                android_layout_height="wrap_content"
                android_id="@+id/chk"
                android_layout_alignParentRight="true"
                />

        </RelativeLayout>
    </android.support.v7.widget.CardView>

3. Classes Java

Nous utilisons le langage de programmation java.

Nous aurons 5 classes :

(a). Movie.java
  • Est notre objet de données, une classe POJO.
  • Représente un seul objet film avec diverses propriétés.
  • Chaque CardView contiendra un film.

    public class Movie {

        private String name;
        private int image;

        public Movie(String name, int image) {
            this.name = name;
            this.image = image;
        }

        public String getName() {
            return name;
        }

        public int getImage() {
            return image;
        }
    }
(b). LongClickListener
  • Est une interface.
  • Contient la signature de notre écouteur LongClick.

    public interface LongClickListener {
        void onItemLongClick();
    }
(c). MyViewHolder.java
  • Notre classe ViewHolder.
  • Contiendra les vues à recycler.
  • Implémentera View.OnLongClickListener et View.OnCreateContextMenuListener.

    public class MyViewHolder implements View.OnLongClickListener,View.OnCreateContextMenuListener {

        ImageView img;
        TextView nameTxt;
        LongClickListener longClickListener;

        public MyViewHolder(View v) {
            img= (ImageView) v.findViewById(R.id.movieImage);
            nameTxt= (TextView) v.findViewById(R.id.nameTxt);

            v.setOnLongClickListener(this);
            v.setOnCreateContextMenuListener(this);
        }

        public void setLongClickListener(LongClickListener lc)
        {
            this.longClickListener=lc;
        }

        @Override
        public boolean onLongClick(View v) {
            this.longClickListener.onItemLongClick();
            return false;
        }

        @Override
        public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
            menu.add(0,0,0,"Share");
            menu.add(0,1,0,"Rate");
            menu.add(0,2,0,"Watch");
        }
    }
(d). CustomAdapter.java
  • Notre classe d'adaptateur.
  • Dérive de BaseAdapter.

Va adapter nos données à nos vues personnalisées.


    public class CustomAdapter extends BaseAdapter {
        Context c;
        ArrayList<Movie> movies;
        LayoutInflater inflater;
        String name;

        public CustomAdapter(Context c, ArrayList<Movie> movies) {
            this.c = c;
            this.movies = movies;
        }

        @Override
        public int getCount() {
            return movies.size();
        }

        @Override
        public Object getItem(int position) {
            return movies.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {

            if(inflater==null)
            {
                inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            }

            if(convertView==null)
            {
                convertView=inflater.inflate(R.layout.model,parent,false);
            }

            //BIND DATA TO VIEWS
            MyViewHolder holder=new MyViewHolder(convertView);
            holder.nameTxt.setText(movies.get(position).getName());
            holder.img.setImageResource(movies.get(position).getImage());

            holder.setLongClickListener(new LongClickListener() {
                @Override
                public void onItemLongClick() {
                    name=movies.get(position).getName();
                    Toast.makeText(c,name,Toast.LENGTH_SHORT).show();
                }
            });

            return convertView;
        }

        public void getSelecetedItem(MenuItem item)
        {
            Toast.makeText(c,name+" "+item.getTitle(),Toast.LENGTH_SHORT).show();
        }
    }
(e). MainActivity.java
  • Notre MainActivity.
  • Fait référence à ListView à partir de layout.
  • Instancie l'adaptateur personnalisé et le fixe à notre ListView.

    public class MainActivity extends AppCompatActivity {

       ListView lv;
        CustomAdapter adapter;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);

            FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                            .setAction("Action", null).show();
                }
            });

            lv= (ListView) findViewById(R.id.lv);
            adapter=new CustomAdapter(this,getMovies());

            lv.setAdapter(adapter);

        }

        @Override
        public boolean onContextItemSelected(MenuItem item) {

             adapter.getSelecetedItem(item);
            return super.onContextItemSelected(item);
        }

        private ArrayList<Movie> getMovies() {
            //COLECTION OF CRIME MOVIES
            ArrayList<Movie> movies=new ArrayList<>();

            Movie movie=new Movie("Shuttle Carrier",R.drawable.shuttlecarrier);

            //ADD ITR TO COLLECTION
            movies.add(movie);

            movie=new Movie("Fruits",R.drawable.fruits);
            movies.add(movie);

            movie=new Movie("Breaking Bad",R.drawable.breaking);
            movies.add(movie);

            movie=new Movie("Crisis",R.drawable.crisis);
            movies.add(movie);

            movie=new Movie("Ghost Rider",R.drawable.rider);
            movies.add(movie);

            movie=new Movie("Star Wars",R.drawable.starwars);
            movies.add(movie);

            movie=new Movie("BlackList",R.drawable.red);
            movies.add(movie);

            movie=new Movie("Men In Black",R.drawable.meninblack);
            movies.add(movie);

            movie=new Movie("Game Of Thrones",R.drawable.thrones);
            movies.add(movie);

            return movies;

        }
    }

4. Télécharger

Hey,tout est dans le code source de référence qui est bien commenté et facile à comprendre et peut être téléchargé ci-dessous.

Vérifiez également notre tutoriel vidéo il est plus détaillé et expliqué en étape par étape.

1. GitHub Direct Download
2. GitHub Browse
3. YouTube YouTube Channel

Catégorisé: