Vue de liste Android

Android ListViewest une vue qui regroupe plusieurs éléments et les affiche dans une liste déroulante verticale. Les éléments de la liste sont automatiquement insérés dans la liste à l'aide d'unAdapter qui extrait le contenu d'une source telle qu'un tableau ou une base de données.

Vue en liste

Un adaptateur relie en fait les composants d'interface utilisateur et la source de données qui remplissent les données dans le composant d'interface utilisateur. L'adaptateur contient les données et envoie les données à la vue de l'adaptateur, la vue peut prendre les données de la vue de l'adaptateur et affiche les données sur différentes vues telles que la flèche, la liste, la grille, etc.

le ListView et GridView sont des sous-classes de AdapterView et ils peuvent être peuplés en les liant à un Adapter, qui récupère les données d'une source externe et crée une vue qui représente chaque entrée de données.

Android fournit plusieurs sous-classes d'Adaptateur qui sont utiles pour récupérer différents types de données et créer des vues pour un AdapterView (c'est-à-dire ListView ou GridView). Les adaptateurs courants sontArrayAdapter,Base Adapter, CursorAdapter, SimpleCursorAdapter,SpinnerAdapter et WrapperListAdapter. Nous verrons des exemples séparés pour les deux adaptateurs.

Attributs ListView

Voici les attributs importants spécifiques à GridView -

Sr. Non Attribut et description
1

android:id

Il s'agit de l'ID qui identifie de manière unique la mise en page.

2

android:divider

C'est dessinable ou couleur pour dessiner entre les éléments de la liste.

3

android:dividerHeight

Ceci spécifie la hauteur du séparateur. Cela peut être en px, dp, sp, in ou mm.

4

android:entries

Spécifie la référence à une ressource de tableau qui remplira le ListView.

5

android:footerDividersEnabled

Lorsqu'il est défini sur false, le ListView ne dessinera pas le séparateur avant chaque vue de pied de page. La valeur par défaut est true.

6

android:headerDividersEnabled

Lorsqu'il est défini sur false, le ListView ne dessinera pas le diviseur après chaque vue d'en-tête. La valeur par défaut est true.

ArrayAdapter

Vous pouvez utiliser cet adaptateur lorsque votre source de données est un tableau. Par défaut, ArrayAdapter crée une vue pour chaque élément du tableau en appelant toString () sur chaque élément et en plaçant le contenu dans unTextView. Considérez que vous avez un tableau de chaînes que vous souhaitez afficher dans un ListView, initialisez un nouveauArrayAdapter en utilisant un constructeur pour spécifier la disposition de chaque chaîne et le tableau de chaînes -

ArrayAdapter adapter = new ArrayAdapter<String>(this,R.layout.ListView,StringArray);

Voici les arguments pour ce constructeur -

  • Premier argument thisest le contexte de l'application. La plupart du temps, gardez-lethis.

  • Le deuxième argument sera la mise en page définie dans le fichier XML et ayant TextView pour chaque chaîne du tableau.

  • L'argument final est un tableau de chaînes qui sera rempli dans la vue texte.

Une fois l'adaptateur de baie créé, appelez simplement setAdapter() sur votre ListView objet comme suit -

ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);

Vous définirez votre vue de liste sous le répertoire res / layout dans un fichier XML. Pour notre exemple, nous allons utiliser le fichier activity_main.xml.

Exemple

Voici l'exemple qui vous guidera à travers des étapes simples pour montrer comment créer votre propre application Android à l'aide de ListView. Suivez les étapes suivantes pour modifier l'application Android que nous avons créée dans le chapitre Exemple de Hello World -

Étape La description
1 Vous utiliserez Android Studio IDE pour créer une application Android et la nommerez ListDisplay sous un package com.example.ListDisplay comme expliqué dans le chapitre Exemple de Hello World .
2 Modifiez le contenu par défaut du fichier res / layout / activity_main.xml pour inclure le contenu ListView avec les attributs explicites.
3 Pas besoin de changer string.xml, Android Studio prend en charge les constantes de chaîne par défaut.
4 Créez un fichier de vue texte res / layout / activity_listview.xml . Ce fichier aura le réglage pour afficher tous les éléments de la liste. Vous pouvez donc personnaliser ses polices, son rembourrage, sa couleur, etc. à l'aide de ce fichier.
6 Exécutez l'application pour lancer l'émulateur Android et vérifier le résultat des modifications effectuées dans l'application.

Voici le contenu du fichier d'activité principal modifié src/com.example.ListDisplay/ListDisplay.java. Ce fichier peut inclure chacune des méthodes fondamentales du cycle de vie.

package com.example.ListDisplay;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ListDisplay extends Activity {
   // Array of strings...
   String[] mobileArray = {"Android","IPhone","WindowsMobile","Blackberry",
      "WebOS","Ubuntu","Windows7","Max OS X"};
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      ArrayAdapter adapter = new ArrayAdapter<String>(this, 
         R.layout.activity_listview, mobileArray);
      
      ListView listView = (ListView) findViewById(R.id.mobile_list);
      listView.setAdapter(adapter);
   }
}

Voici le contenu de res/layout/activity_main.xml fichier -

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".ListActivity" >

   <ListView
      android:id="@+id/mobile_list"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
   </ListView>
 
</LinearLayout>

Voici le contenu de res/values/strings.xml pour définir deux nouvelles constantes -

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">ListDisplay</string>
   <string name="action_settings">Settings</string>
</resources>

Voici le contenu de res/layout/activity_listview.xml fichier -

<?xml version="1.0" encoding="utf-8"?>
<!--  Single List Item Design -->

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/label"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:padding="10dip"
   android:textSize="16dip"
   android:textStyle="bold" >
</TextView>

Essayons d'exécuter notre modifié Hello World!application que nous venons de modifier. Je suppose que vous avez créé votreAVDlors de la configuration de l'environnement. Pour exécuter l'application à partir du studio Android, ouvrez l'un des fichiers d'activité de votre projet et cliquez sur l' icône Exécuter dans la barre d'outils. Le studio Android installe l'application sur votre AVD et la démarre et si tout va bien avec votre configuration et votre application, elle affichera la fenêtre de l'émulateur suivant -

SimpleCursorAdapter

Vous pouvez utiliser cet adaptateur lorsque votre source de données est un curseur de base de données. Lorsque vous utilisez SimpleCursorAdapter , vous devez spécifier une mise en page à utiliser pour chaque ligne de laCursor et quelles colonnes du curseur doivent être insérées dans quelles vues de la disposition.

Par exemple, si vous souhaitez créer une liste de noms et de numéros de téléphone de personnes, vous pouvez effectuer une requête qui renvoie un curseur contenant une ligne pour chaque personne et des colonnes pour les noms et les numéros. Vous créez ensuite un tableau de chaînes spécifiant les colonnes du curseur que vous voulez dans la mise en page pour chaque résultat et un tableau d'entiers spécifiant les vues correspondantes que chaque colonne doit être placée -

String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, 
   ContactsContract.CommonDataKinds.Phone.NUMBER};
int[] toViews = {R.id.display_name, R.id.phone_number};

Lorsque vous instanciez le SimpleCursorAdapter, transmettez la disposition à utiliser pour chaque résultat, le curseur contenant les résultats et ces deux tableaux -

SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, 
   R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
        
ListView listView = getListView();
listView.setAdapter(adapter);

Le SimpleCursorAdapter crée ensuite une vue pour chaque ligne dans le curseur en utilisant la disposition fournie en insérant chaque élément de Columns dans le correspondant toViews vue.