Android : Afficher des données sous forme de tableau

3 janvier 2015 · 3 min de lecture

Dans une application Android, il existe (à ma connaissance) deux options pour afficher des données sous forme de tableau.

La première solution utilise les objets ListView et SimpleCursorAdapter.
La deuxième cré des TextView à la volée dans un TableLayout.

Utilisation d’un ListView

Ajoutez ceci dans le XML de votre “Layout” principal pour créer un objet ListView qui affichera les lignes du tableau :

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

Créez un nouveau layout nommé par exemple row_item.xml pour définir le style des lignes.
Ici nous définissons que chaque ligne est composée de deux cellules (textViewCol1 et textViewCol2) :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="2"> <!-- nombre de colonnes -->

    <TextView
        android:id="@+id/textViewCol1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="4dp"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <TextView
        android:id="@+id/textViewCol2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:layout_weight="1"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

Code JAVA pour utiliser les objets créés ci-dessus :

// Définition des colonnes
// NB : SimpleCursorAdapter a besoin obligatoirement d'un ID nommé "_id"
String[] columns = new String[] { "_id", "col1", "col2" };

// Définition des données du tableau
// les lignes ci-dessous ont pour seul but de simuler
// un objet de type Cursor pour le passer au SimpleCursorAdapter.
// Si vos données sont issues d'une base SQLite,
// utilisez votre "cursor" au lieu du "matrixCursor"
MatrixCursor matrixCursor= new MatrixCursor(columns);
startManagingCursor(matrixCursor);
matrixCursor.addRow(new Object[] { 1,"col1:ligne1","col2:ligne1" });
matrixCursor.addRow(new Object[] { 2,"col1:ligne2","col2:ligne2" });

// on prendra les données des colonnes 1 et 2...
String[] from = new String[] {"col1", "col2"};

// ...pour les placer dans les TextView définis dans "row_item.xml"
int[] to = new int[] { R.id.textViewCol1, R.id.textViewCol2};

// création de l'objet SimpleCursorAdapter...
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.row_item, matrixCursor, from, to, 0);

// ...qui va remplir l'objet ListView
ListView lv = (ListView) findViewById(R.id.lv);
lv.setAdapter(adapter);

Et voilà le résultat :

listview

Pour la gestion des clics sur les lignes, ajoutez le code suivant à la suite du code précédent :

// Gestion des clics sur les lignes
AdapterView.OnItemClickListener itemClickListener = new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View container, int position, long id) {
        // faites ici ce que vous voulez
        Log.d("mydebug","clic sur id:"+id);
        }
    };

// Utilisation avec notre listview
lv.setOnItemClickListener(itemClickListener);

Utilisation d’un TableLayout

Deuxième méthode, on recommence depuis le début.
Ajoutez ceci dans le XML de votre “Layout” :

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TableLayout
        android:layout_width="fill_parent"
        android:stretchColumns="0"
        android:layout_height="wrap_content"
        android:id="@+id/idTable">
    </TableLayout>

</ScrollView>

Cela cré un modèle de tableau vide (TableLayout) dans un (ScrollView).
Le ScrollView permettra de défiler le tableau si le nombre de lignes dépasse l’écran.

Voici le code JAVA pour remplir le tableau et l’afficher :

// données du tableau
final String [] col1 = {"col1:ligne1","col1:ligne2","col1:ligne3","col1:ligne4","col1:ligne5"};
final String [] col2 = {"col2:ligne1","col2:ligne2","col2:ligne3","col2:ligne4","col2:ligne5"};

TableLayout table = (TableLayout) findViewById(R.id.idTable); // on prend le tableau défini dans le layout
TableRow row; // création d'un élément : ligne
TextView tv1,tv2; // création des cellules

// pour chaque ligne
for(int i=0;i<col1.length;i++) {
    row = new TableRow(this); // création d'une nouvelle ligne

    tv1 = new TextView(this); // création cellule
    tv1.setText(col1[i]); // ajout du texte
    tv1.setGravity(Gravity.CENTER); // centrage dans la cellule
    // adaptation de la largeur de colonne à l'écran :
    tv1.setLayoutParams( new TableRow.LayoutParams( 0, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, 1 ) );

    // idem 2ème cellule
    tv2 = new TextView(this);
    tv2.setText(col2[i]);
    tv2.setGravity(Gravity.CENTER);
    tv2.setLayoutParams( new TableRow.LayoutParams( 0, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, 1 ) );

    // ajout des cellules à la ligne
    row.addView(tv1);
    row.addView(tv2);
    
    // ajout de la ligne au tableau
    table.addView(row);
    }

Résultat :

TableLayout

Et pour finir, on peut gérer les clics sur les lignes avec le code suivant, à insérer dans la boucle for juste après row = new TableRow(this); :

final int id=i;
row.setOnClickListener(new View.OnClickListener() {
    @Override
        public void onClick(View v) {
            // faites ici ce que vous voulez
            Log.d("mydebug","i="+id);
        }
    });

Conclusion

L’utilisation d’un ListView est recommandé si vous avez de nombreuses données à afficher. Il est beaucoup plus rapide que la création de TextView à la volée.

#android #java #tableau #tableaux #donnees #textview #tablelayout #listview #simplecursoradapter
PARTAGER

A LIRE EGALEMENT