English English

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/ard-site/templates/ardsite/library/Designer/Content/SingleArticle.php on line 198

Afficher les données par programmation dans une vue en liste déroulante

Ici, nous allons apprendre comment utiliser la classe ListView et le composant ListView pour afficher les données en lignes sous la forme d'une vue Liste. La vue en liste est déroulante et peut afficher du texte, des boutons, des cases à cocher, etc. Les données de la vue en liste sont chargées via une classe Java (une Activity).


Nous utiliserons ici une vue texte et une case à cocher. La vue en liste utilise la liste d'achats par modèle. Une application de liste d'achats est utilisée ici à titre d'exemple.


Créer un fichier de mise en page Android pour les lignes de la liste

Créez le fichier layout_row.xml avec ce contenu :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/checkbox"
        android:text="Buy"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/shoppingitem"
        android:layout_marginLeft="15dp"
        android:textSize="22sp"
        android:text="shoppingitem"/>
 
</LinearLayout>

Ceci définit la structure d'une ligne de la vue de liste. Plus tard, nous allons créer une liste de cette disposition de lignes et accéder au composant checkbox (a l'id "checkbox") et à la vue texte (a l'id "shoppingitem").


Ajout de la vue Liste au fichier de présentation principal "activity_main.xml"

Ce fichier de mise en page ne contient que la vue Liste pour garder cette introduction de ListView facile à comprendre.
Ajoutez le composant ListView comme montré ici :

<?xml version="1.0" encoding="utf-8"?>
<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">
 
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/shoppinglistview">
    </ListView>


</LinearLayout>   



Créer une classe Java (modèle) classe "Shopping.java".

Créez une classe Java qui sera utilisée pour un tableau Liste de la vue Liste. Il contient ici la variable booléenne isMarked, qui sauvegarde si la case est cochée. Mais cette classe possède également une variable String qui enregistre le nom de l'article.

public class Shopping {
 
    private boolean isMarked;
    private String shoppingItem;
 
    public String getShoppingItem() {
        return shoppingItem;
    }
 
    public void setShoppingItem(String shoppingItem) {
        this.shoppingItem = shoppingItem;
    }
 
    public boolean getMarked() {
        return isMarked;
    }
 
    public void setMarked(boolean marked) {
        isMarked = marked;
    }
}

 

 

Créer la classe d'adaptateur "ShoppingAdapter.java"

Cette classe doit étendre (commande "extends") la classe "BaseAdapter". Il contient les variables d'instance suivantes : Variable de contexte et ArrayList avec la classe "Shopping" préalablement créée. Vous devez remplacer six fonctions.
La classe contient les éléments suivants:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;

public class ShoppingAdapter extends BaseAdapter {
 
    private Context context;
    public static ArrayList<Shopping> modelShoppingList;
 
 
    public ShoppingAdapter(Context context, ArrayList<Shopping> modelShoppingList) {
 
        this.context = context;
        this.modelShoppingList = modelShoppingList;
 
    }
 
    @Override
    public int getViewTypeCount() {
        return getCount();
    }
    @Override
    public int getItemViewType(int position) {
 
        return position;
    }
 
    @Override
    public int getCount() {
        return modelShoppingList.size();
    }
 
    @Override
    public Object getItem(int position) {
        return modelShoppingList.get(position);
    }
 
    @Override
    public long getItemId(int position) {
        return 0;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final ViewHolder holder;
 
        if (convertView == null) {
            holder = new ViewHolder(); LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.shoppinglistview, null, true);
 
            holder.checkBox = (CheckBox) convertView.findViewById(R.id.checkbox);
            holder.shoppingitem = (TextView) convertView.findViewById(R.id.shoppingitem);
 
            convertView.setTag(holder);
        }else {
            //  Method getTag() creates the viewHolder object as a tag and returns it to the view
            holder = (ViewHolder)convertView.getTag();
        }
 
 
        holder.checkBox.setText("Checkbox No. "+position);
        holder.shoppingitemText.setText(modelShoppingList.get(position).getShoppingItem());
 
        holder.checkBox.setChecked(modelShoppingList.get(position).getSelected());
        
        //Save this component in view ID 1
        holder.checkBox.setTag(1, convertView);
        holder.checkBox.setTag(position);
        holder.checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Integer listPosition = (Integer) holder.checkBox.getTag();
                Toast.makeText(context, "You clicked Checkbox "+pos, Toast.LENGTH_SHORT).show();
 
                //Set display of checkbox
                if(modelShoppingList.get(listPosition).getSelected()){
                    modelShoppingList.get(listPosition).setSelected(false);
                }else {
                    modelShoppingList.get(listPosition).setSelected(true);
                }
            }
        });
 
        return convertView;
    }
 
    private class ViewHolder {
 
        protected CheckBox checkBox;
        private TextView shoppingitemText;
 
    }
 
}

Le contenu de la vue est programmé dans la fonction getView(). Dans la fonction onClick() (appelée par l'intermédiaire d'un OnClickListener sur la case à cocher) nous définissons ce qui doit se passer, si une case est cochée. Le composant du fichier de disposition (vue) layout_row.xml est enregistré dans une variable titulaire de classe "holder.checkBox". La ou les variables titulaires sont créées dans la classe ViewHolder dans ce même fichier. La vue avec son contenu est sauvegardée sous la forme d'une balise, qui a un ID. Ici, nous utilisons l'ID 1.


Il est recommandé d'enregistrer les ID pour la vue dans le fichier "integer.xml". Vous devez créer ce fichier dans le répertoire res/values. Vous pouvez y stocker des valeurs entières, auxquelles vous pouvez accéder comme ceci dans le code Java : "R.integer.YOUR_ID"
Un fichier "integer.xml" ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
<integer name="MY_INTEGER_VARIABLE">1</integer>
 
</resources>



Vous pouvez également étendre certaines fonctionnalités de la fonction onClick() dans la classe créée ci-dessus "ShoppingAdapter.java".
Si vous souhaitez traiter ou accéder aux composants de la ligne de liste, vous pouvez les appeler comme ceci :

//Load view (Shopping list row) and components in view through this command
View shoppingitemRow = (View) holder.checkBox.getTag(1);
TextView shoppingitemTextview = (TextView) shoppingitemRow.findViewById(R.id.shoppingitem); 

Le TextView shoppingitemTextview fait référence à la ligne réelle dans la vue de disposition de ligne de la vue de liste créée pour cette application de liste d'achats. Vous pouvez maintenant éditer la vue texte (ici le nom texte d'un article) de l'article d'une rangée où sa case à cocher a été cochée.



 

Ajout de la fonctionnalité List View à la classe d'activité principale "MainActivity.java"

Ajoutez le code suivant dans la classe "MainActivity":

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ListView;
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    private ListView shoppingListView;
    public static ArrayList<Shopping> shoppingListArray;
    private ShoppingAdapter shoppingAdapter;
    private String[] shoppingitemslist = new String[]{"Ice Cream", "Apple", "Chocolate", "Cheese", "Watermelon", "Salad"};
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //Create ListView
        shoppingListView = (ListView) findViewById(R.id.shoppinglistview);
 
        //Configure ListView
        shoppingListArray = createAndGetShoppinglistModel(false);
        shoppingAdapter = new ShoppingAdapter(this, this.shoppingListArray);
        shoppingListView.setAdapter(this.shoppingAdapter);
    }
 
    /**
    * Creates List of shopping item rows from defined String array "shoppingitemslist"
    **/
    private ArrayList<Shopping> createAndGetShoppinglistModel(boolean isSelect){
        ArrayList<Shopping> shoppingList = new ArrayList<>();
        for(int i = 0; i < 6; i++){
 
            Shopping shopping = new Shopping();
            shopping.setMarked(isSelect);
            shopping.setShoppingItem(shoppingList[i]);
            shoppingList.add(shopping);
        }
        return list;
    }
 
}

Les données de la ListView seront ajoutées dans la fonction onCreate(), car la ListView sera affichée directement après le démarrage de l'application. La ListView reçoit un Adaptateur (qui est ici le "shoppingAdapter" créé) qui gère les données (composants, valeurs en lignes) de la vue en liste.
Ici, le tableau de liste "shoppingListArray", qui contient les éléments de la liste d'achats, sera créé à partir d'un tableau de chaînes défini "shoppingitemslist".



Vous pouvez également étendre l'application pour charger des données à partir d'une base de données. La sauvegarde et le chargement des données depuis une base de données sous Android sont mentionnés dans un autre tutoriel sur ce site, que vous pouvez trouver ici:
https://ard-site.net/tutorials/android/room-database-app-to-save-data-in-a-database-format-more-easily


Si vous voulez en savoir plus sur le ListView ou le BaseAdapter utilisé ici, veuillez visiter ces sites:

En savoir plus sur ListView:
https://developer.android.com/reference/android/widget/ListView

En savoir plus sur BaseAdapter:
https://developer.android.com/reference/android/widget/BaseAdapter


 

Catégorie :

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok