Contrôle de liste ListView – Utilisation simple
C’est un contrôle très couramment utilisé.
L’espace de notre écran est limité, mais avec ce contrôle, nous pouvons afficher plus de données à l’écran.
En faisant glisser le doigt vers le haut ou vers le bas, vous pouvez amener les données hors écran dans la zone visible.
Utilisation simple
Créez un nouveau projet TestListView.
Ajoutez le code suivant dans la vue pour inclure un ListView.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>Langage du code : HTML, XML (xml)Initialiser la source de données
public class MainActivity extends AppCompatActivity {
private String[] courses = {"Bases de Java", "Bases d'Android", "Bases de C#", "Langage C", "ASP.NET MVC"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, courses);
ListView listView = (ListView) findViewById(R.id.listview1);
listView.setAdapter(adapter);
}
}Langage du code : JavaScript (javascript)Ces données peuvent être téléchargées depuis le web (via une API Web), lues à partir d’une base de données, ou même définies comme un tableau de chaînes directement dans le code.
Les données ne peuvent pas être transmises directement à un ListView ; un adaptateur est nécessaire.
Android fournit de nombreux adaptateurs. Ici, nous utilisons ArrayAdapter.
Nous utilisons android.R.layout.simple_list_item_1 comme mise en page enfant pour le ListView.
C’est un fichier de mise en page intégré à Android qui contient uniquement un TextView pour afficher du texte.
Contrôle de liste ListView – Personnalisation de l’interface
Afficher simplement du texte est un peu trop basique
Nous pouvons afficher un contenu plus riche dans les éléments de la liste.
Ajouter une classe d’entité Book
package com.foxdevelop.www.testlistview;
public class Book {
private String name;
private int imageId;
public Book (String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}Langage du code : PHP (php)Ajouter un fichier de mise en page pour les livres
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageid"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="12dp"
/>
</LinearLayout>Langage du code : HTML, XML (xml)Adaptateur personnalisé
package com.foxdevelop.www.testlistview;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class BookAdapter extends ArrayAdapter<Book> {
private int resource;
public BookAdapter(@NonNull Context context, int resource, @NonNull List<Book> objects) {
super(context, resource, objects);
this.resource = resource;
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
Book book = getItem(position);
View view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
imageView.setImageResource(book.getImageId());
TextView name = (TextView) view.findViewById(R.id.name);
name.setText(book.getName());
return view;
}
}Langage du code : JavaScript (javascript)Initialiser la source de données dans onCreate de l’activité
package com.foxdevelop.www.testlistview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Book> courses = new ArrayList<Book>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LoadBooks();
BookAdapter adapter = new BookAdapter(MainActivity.this, R.layout.booklistview, courses);
ListView listView = (ListView) findViewById(R.id.listview1);
listView.setAdapter(adapter);
}
private void LoadBooks() {
courses.add(new Book("Premier dans l'histoire de la pensée humaine", R.drawable.access));
courses.add(new Book("Politique de la classe d'exploitation", R.drawable.book));
courses.add(new Book("Précieux document sur le droit ancien indien", R.drawable.bookmarks));
courses.add(new Book("Manuel de droit privé romain impérial", R.drawable.center));
courses.add(new Book("Le savoir c'est le pouvoir", R.drawable.date));
courses.add(new Book("Mon code civil existera pour toujours", R.drawable.clock));
courses.add(new Book("Œuvre classique sur la démocratie américaine", R.drawable.ftp));
courses.add(new Book("Manuel autorisé de droit international occidental", R.drawable.notes));
courses.add(new Book("Chef-d'œuvre le plus proche de la vérité historique", R.drawable.set));
courses.add(new Book("Un miroir de la réforme religieuse", R.drawable.energy));
courses.add(new Book("Le secret de la théologie est l'anthropologie", R.drawable.tux));
courses.add(new Book("Œuvre célèbre introduite en Chine il y a plus de 300 ans", R.drawable.science));
courses.add(new Book("Chef-d'œuvre immortel dépeignant les hypocrites", R.drawable.joystick));
courses.add(new Book("Université prestigieuse sans murs", R.drawable.center));
courses.add(new Book("Premier projet utopique dans l'histoire de la pensée humaine", R.drawable.access));
}
}Langage du code : JavaScript (javascript)En définissant
android:orientation= »horizontal »
vous pouvez les disposer horizontalement.
Optimisation des performances de ListView
Actuellement, chaque fois que l’activité s’ouvre, elle recharge la source de données, ce qui affecte les performances. En mettant en cache la vue, nous pouvons améliorer la vitesse.
En vérifiant convertView, nous évitons de récupérer la vue à chaque fois.
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
Book book = getItem(position);
View view;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
} else {
view = convertView;
}
ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
imageView.setImageResource(book.getImageId());
TextView name = (TextView) view.findViewById(R.id.name);
name.setText(book.getName());
return view;
}Langage du code : PHP (php)Mettre en cache les contrôles
Définissez une classe pour contenir le contrôle ImageView et le contrôle TextView.
class ViewData {
ImageView imageUI;
TextView textViewUI;
}Langage du code : JavaScript (javascript)package com.foxdevelop.www.testlistview;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class BookAdapter extends ArrayAdapter<Book> {
private int resource;
public BookAdapter(@NonNull Context context, int resource, @NonNull List<Book> objects) {
super(context, resource, objects);
this.resource = resource;
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
Book book = getItem(position);
View view;
ViewUI viewUI;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
TextView textView = (TextView) view.findViewById(R.id.name);
viewUI = new ViewUI();
viewUI.imageUI = imageView;
viewUI.textViewUI = textView;
view.setTag(viewUI);
} else {
view = convertView;
viewUI = (ViewUI) view.getTag();
}
viewUI.imageUI.setImageResource(book.getImageId());
viewUI.textViewUI.setText(book.getName());
return view;
}
class ViewUI {
ImageView imageUI;
TextView textViewUI;
}
}Langage du code : JavaScript (javascript)Événements de clic sur ListView
Ajouter des événements de clic aux éléments de listview.
Par exemple, nous affichons le titre du livre lorsqu’un élément est cliqué.
Dans la méthode onCreate de l’activité principale :
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LoadBooks();
BookAdapter adapter = new BookAdapter(MainActivity.this, R.layout.booklistview, courses);
final ListView listView = (ListView) findViewById(R.id.listview1);
listView.setAdapter(adapter);
// Événement de clic
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Book b = courses.get(i);
Toast.makeText(MainActivity.this, b.getName(), Toast.LENGTH_LONG).show();
}
});
}Langage du code : PHP (php)Ajouter des dépendances dans le fichier build.gradle
Configuration ‘compile’ is obsolete and has been replaced with ‘implementation’ and ‘api’.
Il sera supprimé fin 2018. Pour plus d’informations : http://d.android.com/r/tools/update-dependency-configurations.html
Nous devons ajouter la prise en charge de la bibliothèque de dépendances
android.support.v7.widget.RecyclerView
<?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.support.v7.widget.RecyclerView
android:id="@+id/testrecy"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>Langage du code : HTML, XML (xml)Utilisation du contrôle de défilement RecyclerView – 1
ListView est très puissant et encore largement utilisé aujourd’hui.
Cependant, ses performances sont un peu faibles et son extensibilité est limitée.
Il ne prend en charge que le défilement vertical ; le défilement horizontal est impossible.
RecyclerView est une version améliorée de ListView.
Il peut réaliser les mêmes effets que ListView tout en optimisant ses lacunes.
RecyclerView est officiellement recommandé.
Utilisation de base
Tout d’abord, ajoutez ce qui suit dans votre fichier gradle :
compile ‘com.android.support:recyclerview-v7:27.1.1’
Dans la section précédente, nous avons ajouté un RecyclerView.
<android.support.v7.widget.RecyclerView
android:id="@+id/testrecy"
android:layout_width="match_parent"
android:layout_height="match_parent"/>Langage du code : HTML, XML (xml)Nous continuerons avec l’exemple du livre.
Previous: mise en page