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