Exemples de ListView Android avec des collections
Exemples simples de ListView Android basés sur le travail avec des collections et l'écoute de divers événements.
Un ListView est un widget Android qui nous permet de rendre une liste d'éléments déroulants.
ListView est un adapterview comme gridview et spinner. Cela signifie qu'elle nécessite un adaptateur pour pouvoir insérer ses éléments. L'adaptateur est responsable de l'extraction des données d'une source de contenu.
Cette source peut être un tableau ou quelque chose de plus complexe comme une base de données ou le réseau. En outre, l'adaptateur sera également chargé de convertir le résultat de chaque élément en une vue qui sera placée dans la vue de liste.
En effet, en tant que vue adaptatrice, la ListView ne connaît pas les détails, tels que le type et le contenu, des vues qu'elle contient. Elle demandera donc les vues à la demande à un ListAdapter selon les besoins. Par exemple, il demande ces vues lorsque l'utilisateur fait défiler la page vers le haut ou vers le bas.
Chacune des vues de la liste est positionnée immédiatement en dessous de la vue précédente dans la liste.
Définition de l'API ListView
Voici la définition de l'API de ListView.
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.AdapterView<android.widget.ListAdapter>
↳ android.widget.AbsListView
↳ android.widget.ListView
Vous pouvez clairement voir que ListView réside dans le paquet android.widget et dérive de la classe abstraite AbsListView.
Comment afficher une ListView ?
Eh bien, pour afficher un ListView, il suffit d'ajouter le ListView dans le layout XML.
<ListView
android_id="@+id/list_view"
android_layout_width="match_parent"
android_layout_height="match_parent" />
android:id="@+id/list_view"- Nous attribuons un ID à la ListView.android:layout_width="match_parent"- Nous définissons la largeur de notre ListView pour qu'elle corresponde à celle du Layout sur lequel la ListView est rendue.android:layout_height="match_parent"- Nous définissons la hauteur de notre ListView pour qu'elle corresponde à celle du Layout sur lequel le ListView est rendu.
Réglage des ItemClicks pour une ListView simple.
Voici comment nous allons écouter les clics sur les éléments de notre ListView, et ainsi afficher un simple message de toast.
Nous devons invoquer la méthode setOnItemClickListener() de notre ListView et lui passer une classe annonyme AdapterView.OnItemClickListener(), puis surcharger la méthode onItemClick().
Dans ce cas, pos est la position de l'élément cliqué dans le ListView.
myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int pos, long id) {
Toast.makeText(MainActivity.this, languages.get(i), Toast.LENGTH_SHORT).show();
}
});
Comment créer un adaptateur personnalisé pour ListView.
Vous pouvez utiliser plusieurs adaptateurs, mais le plus utilisé est BaseAdapter.
private class MyCustomAdapter extends BaseAdapter {
// override other abstract methods here
@Override
public View getView(int position, View convertView, ViewGroup container) {
if (convertView == null) {
convertView = getLayoutInflater().inflate(R.layout.my_list_item, container, false);
}
((TextView) convertView.findViewById(android.R.id.nameTxt))
.setText(getItem(position));
return convertView;
}
}
Comment définir un adaptateur pour un ListView ?
Nous définissons un adaptateur à un ListView en utilisant la méthode setAdapter(). Cette méthode est la suivante :
public void setAdapter (ListAdapter adapter)
La méthode setAdapter() est responsable de la liaison de nos données à notre ListView.
Nous devons passer un adaptateur à cette méthode. Cet adaptateur peut être enveloppé par un WrapperListAdapter, en fonction des caractéristiques de ListView actuellement utilisées. Par exemple, l'ajout d'en-têtes et/ou de pieds de page entraînera l'enveloppement de l'adaptateur.
Un WrapperListAdapter est un adaptateur de liste qui enveloppe un autre adaptateur de liste.
| --- |
|---|
Quels attributs XML sont définis dans la classe ListView ?
La majorité des attributs XML que vous utiliserez sont définis dans les classes parentes comme AbsListView, qui hérite également d'autres classes de base comme ViewGroup et View.
Cependant, les attributs suivants sont également définis dans ListView :
| --- |
|---|
Avec quels types d'adaptateurs ListView peut-il être utilisé ?
Voici quelques-uns des adaptateurs qui peuvent être utilisés avec une ListView :
| --- |
|---|
Exemple de ListView simple
Regardons un [exemple simple de ListView] (/source/android-simple-listview-onitemclick) qui va afficher une liste de langages de programmation.
Lorsque l'utilisateur clique sur un seul élément, le langage cliqué est affiché dans un message Toast.
Exemple 1 : ListView Android - Remplir avec un tableau
Il s'agit d'un simple tutoriel sur les ListView, voici ce que nous faisons :
- Remplir ListView avec des données provenant d'un simple tableau.
- Nous utilisons ArrayAdapter.
- Gérer ItemClicks.* Démonstration de ListView Android Array #### Notre activité principale
Voici notre [activité] principale (/android/activity). C'est notre activité de lancement. Cette classe sera le point d'entrée de notre application.
Tout d'abord, nous définissons notre package puis nous importons d'autres packages via les déclarations import.
Ensuite, nous faisons en sorte que notre classe dérive de AppCompatActivity.
Nous allons maintenir un tableau qui servira de source de données :
String[] spacecrafts={"Juno","Hubble","Casini","WMAP","Spitzer","Pioneer","Columbia","Challenger","Apollo","Curiosity"};
Nous allons passer ce tableau dans notre constructeur arrayadapetr et définir son instance à notre ListView :
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,spacecrafts);
lv.setAdapter(adapter);
Regardons le code source complet.
public class MainActivity extends AppCompatActivity {
ListView lv;
String[] spacecrafts={"Juno","Hubble","Casini","WMAP","Spitzer","Pioneer","Columbia","Challenger","Apollo","Curiosity"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv= (ListView) findViewById(R.id.lv);
//ADAPTER
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,spacecrafts);
lv.setAdapter(adapter);
//LISTENER
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, spacecrafts[i], Toast.LENGTH_SHORT).show();
}
});
}
}
Notre mise en page XML
Voici le layout de notre activité principale. Il s'agit de notre fichier activity_main.xml.
Nous utilisons les éléments suivants :
- RelativeLayout - Notre ViewGroup.
- ListView - Notre vue adaptatrice.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.listviewarray.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
Comment exécuter
- Téléchargez le projet.
- Vous obtiendrez un fichier zippé, extrayez-le.
- Ouvrez le Android Studio.
- Fermez maintenant le projet déjà ouvert.
- Dans la barre de menu, cliquez sur File >New> Import Project.
- Choisissez maintenant un dossier de destination, à partir duquel vous voulez importer le projet.
- Choisissez un projet Android.
- Cliquez maintenant sur "OK".
- C'est fait, vous avez fini d'importer le projet, maintenant éditez-le.
Plus de ressources
| --- |
|---|
Exemple 2 : Comment remplir un ListView à partir d'une ArrayList ?
Il s'agit d'un simple tutoriel sur les ListView, voici ce que nous faisons :
- Remplir ListView avec des données provenant d'une simple ArrayList.
- Nous utilisons ArrayAdapter.
- Gérer les clics sur les éléments.
Notre activité principale
Voici notre classe MainActivity.
public class MainActivity extends AppCompatActivity {
ArrayList<String> numbers=new ArrayList<>();
ListView lv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.lv);
//FILL DATA
fillData();
//ADAPTER
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, numbers);
lv.setAdapter(adapter);
//LISTENER
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, numbers.get(i), Toast.LENGTH_SHORT).show();
}
});
}
//FILL DATA
private void fillData()
{
for (int i=0;i<10;i++)
{
numbers.add("Number "+String.valueOf(i));
}
}
}
Notre mise en page XML
Le layout de notre activité se trouve ici.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.listviewarraylist.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
Bonne journée.
Exemple 2 : Android Simple ListView OnItemClick
Voici un exemple simple de la façon de remplir une listview avec une arraylist de chaînes de caractères et de gérer notre ListView itemClicks.
Exemple
MainActivity.java
Voici notre activité principale.
Tout d'abord, nous spécifions le nom du paquetage, puis nous ajoutons nos déclarations d'importation.
Nous créons ensuite notre classe MainActivity, en la faisant dériver de AppCompatActivity.
Nous maintenons une simple liste de tableaux comme champ d'instance, qui contiendra nos données que nous rendrons dans notre listview.
Nous utiliserons ArrayAdapter comme adaptateur.
Voici comment nous allons procéder
public class MainActivity extends AppCompatActivity {
ArrayList<String> languages=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//LISTVIEW
ListView lv= (ListView) findViewById(R.id.lv);
//FILL DATA
fillData();
//ADAPTR
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,languages);
lv.setAdapter(adapter);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, languages.get(i), Toast.LENGTH_SHORT).show();
}
});
}
//FILL DATA
private void fillData()
{
languages.clear();
//FILL
languages.add("Java");
languages.add("C#");
languages.add("VB.NET");
languages.add("PHP");
languages.add("Python");
languages.add("Ruby");
languages.add("C");
languages.add("C++");
languages.add("Fortran");
languages.add("Cobol");
languages.add("Perl");
languages.add("Prolog");
}
}
activity_main.xml
Voici le layout de notre activité principale. Nous l'appelons activity_main.xml.
Nous utilisons les éléments suivants :
- RelativeLayout - Notre ViewGroup.
- ListView - Notre vue adaptatrice.
C'est le ListView qui assurera le rendu de nos données.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.simplelistview.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
SECTION 2 : Code source
Téléchargez le code source ci-dessous.
| --- |
|---|
Exemple 3 : Comment remplir une listView à partir d'une liste d'objets POJO
Comment remplir une simple ListView avec une Liste d'objets POJO.
Dans ce tutoriel, nous voyons comment remplir une simple liste d'objets "Person" et comment afficher le nom de la personne dans un message Toast lorsqu'elle clique dessus.
Concepts que vous apprendrez dans cet exemple
- Qu'est-ce qu'une [ListView] (/android/listview) ?
- Qu'est-ce qu'une collection List ?
- Comment remplir un ListView à partir d'une structure de données List d'objets POJO dans android studio ? 4.
- Comment faire un simple écouteur de clics dans une vue de liste. 5.
- Qu'est-ce qu'un ArrayAdapter ?
- Comment utiliser ArrayAdapter pour lier une liste java à une liste simple.
**Comment définir un ListView dans une mise en page XML ?
Vous utilisez l'objet ListView comme élément :
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
Comment référencer une ListView en code Java
Voici comment référencer un ListView. Vous utilisez la méthode findViewById() :
ListView lv= (ListView) findViewById(R.id.lv);
(a). Initialisation d'une liste Java
Voici comment vous pouvez initialiser une liste. Vous ne pouvez pas directement l'instancier puisque comme nous l'avons dit c'est une interface :
List<String> people=new ArrayList<>();
(b). Comment effacer une liste Java
Vous pouvez supprimer tous les éléments d'une liste java en utilisant la méthode clear() :
people.clear();
(c). Remplir une liste Java avec des objets
Vous pouvez peupler une liste java en utilisant la méthode add() :
private void fillPeople()
{
Person p=new Person();
p.setName("Mike");
people.add(p.getName());
p=new Person();
p.setName("John");
people.add(p.getName());
.....
En savoir plus sur les listes java ici.
Qu'est-ce qu'un ArrayAdapter ?
Nous avons besoin d'un adaptateur pour travailler avec un listview.
Un adaptateur est une classe qui agit comme un pont entre une vue adaptateur et la source de données sous-jacente.
Dans ce cas, nous utiliserons un ArrayAdapter.
Vous pouvez en savoir plus sur ArrayAdapter ici.
1. Démonstration du projet
Voici la démo de l'exemple :
2. Ceation d'Android Studio et du projet
(a). Qu'est-ce qu'Android Studio ?
Nous utiliserons Android Studio, l'IDE officiel pour le développement d'android. Android Studio est maintenu par Google et Jetbrains.
Android Studio est fourni avec l'Android SDK Manager, qui est un outil permettant de télécharger les composants Android SDK nécessaires au développement d'applications android.
Pour en savoir plus sur Android Studio, allez [ici] (/android/android-studio).
(b). Comment créer une activité vide dans Android Studio ?
- Tout d'abord, créez un projet vide dans Android Studio. Allez à File -> New Project.
- Tapez le nom de l'application et choisissez le nom de l'entreprise.
- Choisissez le SDK minimum.
- Choisissez Empty activity.
- Cliquez sur Terminer.
Cela va générer pour nous un projet avec ce qui suit :
| --- |
|---|
Pour en savoir plus sur la création d'un projet android dans android studio, allez ici.
(c). Structure du projet généré dans Android Stduo
Android Studio va générer pour vous un projet avec des configurations par défaut via un ensemble de fichiers et de répertoires.
2. Ressources.
La plate-forme Android offre un moyen puissant et flexible d'ajouter du contenu statique en tant que ressource.
Ce contenu statique sera également intégré dans le fichier APK. Le contenu statique sera stocké soit comme une ressource, soit comme un actif.
Les ressources appartiennent à un type donné. Ces types peuvent être :
- Dessinable.
- Mise en page.
- Valeur.
Commençons par examiner les ressources de mise en page
(a). activité_main.xml
Ce layout sera gonflé dans l'interface utilisateur de l'activité principale. Cela se fera via la méthode setContentView() de l'activité qui nous demandera de lui passer le layout.
Nous le ferons à l'intérieur de la méthode onCreate() de Activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context="com.tutorials.hp.listviewandobjects.MainActivity">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
3. Code Java.
Les applications Android peuvent être principalement écrites en Java ou en Kotlin. Ces jours-ci cependant il y a beaucoup de frameworks comme Flutter aussi qui utilisent des langages comme Dart.
Dans ce cours, nous utilisons le langage de programmation Java.
Nous aurons ces classes dans notre projet.
(a). Personne.java
C'est notre objet de données. Cette classe représente une seule personne.
Une personne unique aura les propriétés suivantes :
id- un nombre entier. L'identifiant de la personne.name- Le nom de la personne. Une chaîne de caractères.
Notre liste sera donc composée d'objets Person.
public class Person {
int id;
String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
(b). MainActivity.java
C'est notre activité de lancement comme son nom l'indique. Cela signifie qu'elle sera le point d'entrée principal de notre application en ce sens que lorsque l'utilisateur clique sur l'icône de notre application, cette activité sera rendue en premier.
Nous surchargeons une méthode appelée onCreate(). Ici, nous allons commencer par gonfler notre layout principal via la méthode setContentView().
Notre activité principale est en fait une activity puisqu'elle dérive de l'AppCompatActivity.
public class MainActivity extends AppCompatActivity {
List<String> people=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//LISTVIEW
ListView lv= (ListView) findViewById(R.id.lv);
//FILL LIST
fillPeople();
//ADAPTER
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,people);
lv.setAdapter(adapter);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, people.get(i), Toast.LENGTH_SHORT).show();
}
});
}
private void fillPeople()
{
people.clear();
Person p=new Person();
p.setName("Mike");
people.add(p.getName());
p=new Person();
p.setName("John");
people.add(p.getName());
p=new Person();
p.setName("Lucy");
people.add(p.getName());
p=new Person();
p.setName("Rebecca");
people.add(p.getName());
p=new Person();
p.setName("Kris");
people.add(p.getName());
p=new Person();
p.setName("Kurt");
people.add(p.getName());
p=new Person();
p.setName("Vin");
people.add(p.getName());
}
}
4. Télécharger
Tout est dans la référence du code source. Il est bien commenté et facile à comprendre et peut être téléchargé ci-dessous.
Consultez aussi notre tutoriel vidéo il est plus détaillé et expliqué en pas à pas.
| --- |
|---|
Exemple 4 : ListView - Comment écouter les événements LongClick
Ceci est un tutoriel android pour explorer comment gérer les événements longclick dans une listview personnalisée avec des images et du texte.
C'est parti.
1. Créer un projet d'activité de base
- Tout d'abord, créez un nouveau projet dans android studio. Allez à File -> New Project.
- Tapez le nom de l'application et choisissez le nom de l'entreprise.
! Dialogue Nouveau Projet - Choisissez le SDK minimum.

- Choisissez l'activité de base.

- Cliquez sur Finish.

L'activité de base aura une barre d'outils et un bouton d'action flottant déjà ajoutés dans la mise en page.
2. Dépendances
Nous n'avons pas vraiment de dépendances externes. Au lieu de cela, nous spécifions simplement un couple de dépendances de bibliothèque de soutien.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation `com.android.support:appcompat-v7:23.2.1'
implementation `com.android.support:design:23.2.1'
implementation `com.android.support:cardview-v7:23.2.1'
}
3. Créer l'interface utilisateur
Les interfaces utilisateur sont généralement créées dans android en utilisant des mises en page XML par opposition au codage direct en java.
(a). activité_main.xml
- Ce modèle est gonflé en interface utilisateur MainActivity.
- Il inclut le fichier content_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.listviewlongclick.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
(b). content_main.xml
Ajoutons notre ListView ici.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.listviewlongclick.MainActivity"
tools_showIn="@layout/activity_main">
<ListView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/lv"
android_layout_alignParentLeft="true"
android_layout_alignParentStart="true" />
</RelativeLayout>
(c). model.xml
Ce modèle définira le modèle de ligne personnalisé pour notre ListView.
Dans ce cas, notre ListView aura des images et du texte.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="10dp"
card_view_cardElevation="10dp"
android_layout_height="wrap_content">
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent">
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/movieImage"
android_padding="10dp"
android_src="@drawable/ghost" />
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_layout_below="@+id/movieImage"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text=" John Doe a former FBI Agent and now Physics teacher .is wrongly accussed of murdering an innocent child.He makes it his business to find the bad guys who did taht.He convinces hacker Aram to join him.....
"
android_id="@+id/descTxt"
android_padding="10dp"
android_layout_below="@+id/nameTxt"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_text="TV Show"
android_id="@+id/posTxt"
android_padding="10dp"
android_layout_below="@+id/movieImage"
android_layout_alignParentRight="true" />
<CheckBox
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/chk"
android_layout_alignParentRight="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Venons-en maintenant à nos classes Java :
4. Movie.java
Notre objet de données. Va représenter un seul film.
package com.tutorials.hp.listviewlongclick;
public class Movie {
private String name;
private int image;
public Movie(String name, int image) {
this.name = name;
this.image = image;
}
public String getName() {
return name;
}
public int getImage() {
return image;
}
}
5. ItemLongClickListener.java
Notre interface d'écouteur de clics longs.
public interface ItemLongClickListener {
void onLongItemClick(View v);
}
6. MyViewHolder.java
Va contenir nos widgets à recycler.
public class MyViewHolder implements View.OnLongClickListener {
ImageView img;
TextView nameTxt;
ItemLongClickListener itemLongClickListener;
public MyViewHolder(View v) {
img= (ImageView) v.findViewById(R.id.movieImage);
nameTxt= (TextView) v.findViewById(R.id.nameTxt);
v.setOnLongClickListener(this);
}
public void setItemLongClickListener(ItemLongClickListener ic)
{
this.itemLongClickListener=ic;
}
@Override
public boolean onLongClick(View v) {
this.itemLongClickListener.onLongItemClick(v);
return false;
}
}
7. CustomAdapter.java
Gonflera notre model.xml et liera les données aux vues résultantes.
public class CustomAdapter extends BaseAdapter {
Context c;
ArrayList<Movie> movies;
LayoutInflater inflater;
public CustomAdapter(Context c, ArrayList<Movie> movies) {
this.c = c;
this.movies = movies;
}
@Override
public int getCount() {
return movies.size();
}
@Override
public Object getItem(int position) {
return movies.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
//SHALL RETURN A ROW
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if(inflater==null)
{
inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
//CONVERT FROM XML TO JAVA
if(convertView==null)
{
convertView=inflater.inflate(R.layout.model,parent,false);
}
//BIND DATA TO VIEWS
MyViewHolder holder=new MyViewHolder(convertView);
holder.nameTxt.setText(movies.get(position).getName());
holder.img.setImageResource(movies.get(position).getImage());
holder.setItemLongClickListener(new ItemLongClickListener() {
@Override
public void onLongItemClick(View v) {
Toast.makeText(c,movies.get(position).getName(),Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
}
8. MainActivity.java
Notre activité principale.
public class MainActivity extends AppCompatActivity {
ListView lv;
CustomAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
lv= (ListView) findViewById(R.id.lv);
adapter=new CustomAdapter(this,getMovies());
//SET ADAPTER
lv.setAdapter(adapter);
}
private ArrayList<Movie> getMovies() {
//COLECTION OF CRIME MOVIES
ArrayList<Movie> movies=new ArrayList<>();
Movie movie=new Movie("Shuttle Carrier",R.drawable.shuttlecarrier);
//ADD ITR TO COLLECTION
movies.add(movie);
movie=new Movie("Fruts",R.drawable.fruits);
movies.add(movie);
movie=new Movie("Breaking Bad",R.drawable.breaking);
movies.add(movie);
movie=new Movie("Crisis",R.drawable.crisis);
movies.add(movie);
movie=new Movie("Ghost Rider",R.drawable.rider);
movies.add(movie);
movie=new Movie("Star Wars",R.drawable.starwars);
movies.add(movie);
movie=new Movie("BlackList",R.drawable.red);
movies.add(movie);
movie=new Movie("Men In Black",R.drawable.meninblack);
movies.add(movie);
movie=new Movie("Game Of Thrones",R.drawable.thrones);
movies.add(movie);
return movies;
}
}
Télécharger le code
| --- |
|---|
Exemple 4 : Android Custom ListView Master Detail [Ouvrir une nouvelle activité].
**Aujourd'hui, nous allons parler de l'interface Android Custom ListView Master Detail.
Notre ListView doit contenir des images et du texte.
SECTION 1 : Notre activité principale
Voici notre [activité] principale (/android/activity).
C'est notre vue principale.
La vue principale affichera une ListView avec des objets Player.
public class MainActivity extends Activity {
ListView lv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv=(ListView) findViewById(R.id.listView1);
//ADAPTER
CustomAdapter adapter=new CustomAdapter(this);
lv.setAdapter(adapter);
//EVENTS
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View v, int pos,
long id) {
// TODO Auto-generated method stub
Intent i=new Intent(getApplicationContext(), PlayerActivity.class);
//PASS INDEX OR POS
i.putExtra("Position", pos);
startActivity(i);
}
});
}
SECTION 2 : Notre DetailActivity
C'est notre [activité] de détail (/android/activity).
Cette classe va afficher les détails d'un seul objet joueur.
public class PlayerActivity extends Activity {
int pos=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_player);
//GET PASSED DATA
Intent i=getIntent();
pos=i.getExtras().getInt("Position");
//GET VIEWS
final CustomAdapter adapter=new CustomAdapter(this);
final ImageView img=(ImageView) findViewById(R.id.imageView1);
final TextView nameTv=(TextView)findViewById(R.id.nameTxt);
final TextView goalTv=(TextView) findViewById(R.id.goalTxt);
//SET DATA
img.setImageResource(adapter.images[pos]);
nameTv.setText(adapter.names[pos]);
goalTv.setText(adapter.goals[pos]);
Button nextBtn=(Button) findViewById(R.id.button1);
//NEXT CLICKED
nextBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
int position=pos+1;
//set data
img.setImageResource(adapter.images[position]);
nameTv.setText("Name: "+adapter.names[position]);
goalTv.setText("Goals: "+adapter.goals[position]);
if(!(position>=adapter.getCount()-1))
{
pos +=1;
}else
{
pos = -1;
}
}
});
}
}
SECTION 3 : Notre CustomAdapter :
Voici notre classe d'adaptateur.
Cette classe dérivera de la classe android.widget.BaseAdapter.
En tant qu'adaptateur, elle sera responsable d'abord de gonfler notre model.xml dans un objet de vue. Ensuite, il liera les données à cette vue gonflée.
Nous allons également écouter les événements de clics pour cette vue puis ouvrir le détail activité.
public class CustomAdapter extends BaseAdapter {
private Context c;
String[] names={"Michael Carrick","Diego Costa","Ander Herera","Juan Mata","Oscar","Aaron Ramsey","Wayne Rooney","Alexis Sanchez","Van Persie"};
String[] goals={"3","25","9","11","9","11","14","18","13"};
int[] images={R.drawable.carrick,R.drawable.costa,R.drawable.herera,R.drawable.mata,R.drawable.oscar,R.drawable.ramsey,R.drawable.rooney,R.drawable.sanchez,R.drawable.vanpersie};
; public CustomAdapter(Context ctx) {
// TODO Auto-generated constructor stub
this.c=ctx;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return names.length;
}
@Override
public Object getItem(int pos) {
// TODO Auto-generated method stub
return names[pos];
}
@Override
public long getItemId(int pos) {
// TODO Auto-generated method stub
return pos;
}
@Override
public View getView(int pos, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
if(convertView==null)
{
LayoutInflater inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(R.layout.player, null);
}
//GET VIEWS
TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv);
TextView goalsTxt=(TextView) convertView.findViewById(R.id.goalsTv);
ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);
//SET DATA
nameTxt.setText(names[pos]);
goalsTxt.setText(goals[pos]);
img.setImageResource(images[pos]);
return convertView;
}
}
SECTION 4 : Notre mise en page MainActivity
Ce layout sera gonflé en interface utilisateur pour notre activité principale.
Ce layout contiendra un ListView.
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context=".MainActivity" >
<ListView
android_id="@+id/listView1"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
SECTION 5 : Notre mise en page DetailActivity
Voici notre layout de détail activité. Il contiendra un imageview, un textview et un bouton.
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
tools_context=".PlayerActivity" >
<ImageView
android_id="@+id/imageView1"
android_layout_width="190dp"
android_layout_height="275dp"
android_layout_alignParentTop="true"
android_scaleType="fitCenter"
android_src="@drawable/carrick" />
<Button
android_id="@+id/button1"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentBottom="true"
android_layout_alignParentRight="true"
android_text="Next" />
<TextView
android_id="@+id/goalTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_below="@+id/nameTxt"
android_layout_marginTop="24dp"
android_text="Goals : "
android_textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android_id="@+id/textView1"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_below="@+id/imageView1"
android_text="PLAYER PROFILE"
android_textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android_id="@+id/nameTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentLeft="true"
android_layout_below="@+id/textView1"
android_layout_marginTop="17dp"
android_text="Name"
android_textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
SECTION 6 : Notre modèle de rangée RowModel Layout
Il s'agit de notre modèle de rangée de listview personnalisé.
Il définit comment chaque rangée de listview apparaîtra.
Dans ce cas, nous avons une imageview et deux textviews.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_orientation="horizontal" >
<TextView
android_id="@+id/nameTv"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentTop="true"
android_layout_marginLeft="28dp"
android_layout_toRightOf="@+id/imageView1"
android_text="Name"
android_textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android_id="@+id/goalsTv"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignBottom="@+id/imageView1"
android_layout_alignLeft="@+id/nameTv"
android_layout_marginBottom="16dp"
android_text="Goals"
android_textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android_id="@+id/imageView1"
android_layout_width="65dp"
android_layout_height="71dp"
android_layout_alignParentLeft="true"
android_layout_alignParentTop="true"
android_layout_marginLeft="26dp"
android_padding="10dp"
android_src="@drawable/herera" />
</RelativeLayout>
SECTION 7 : Notre manifeste
Ceci est notre manifeste android. Assurez-vous simplement que nos deux activités sont enregistrées.
<?xml version="1.0" encoding="utf-8"?>
<manifest
package="com.example.listviewmasterdetail"
android_versionCode="1"
android_versionName="1.0" >
<uses-sdk
android_minSdkVersion="19"
android_targetSdkVersion="19" />
<application
android_allowBackup="true"
android_icon="@drawable/ic_launcher"
android_label="@string/app_name"
android_theme="@style/AppTheme" >
<activity
android_name="com.example.listviewmasterdetail.MainActivity"
android_label="@string/app_name" >
<intent-filter>
<action android_name="android.intent.action.MAIN" />
<category android_name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android_name="com.example.listviewmasterdetail.PlayerActivity"
android_label="@string/title_activity_player" >
</activity>
</application>
</manifest>
Exemple 5 : Android ListView - CRUD - ADD UPDATE DELETE.
Bonjour, Nous voyons comment effectuer des opérations CRUD de base contre une arrayist et une ListView.
- Ajout, mise à jour et suppression d'une ArrayList et d'une ListView.
- Nous travaillons avec ArrayAdapter.
- gérer les clics sur les éléments et saisir des données à partir d'un dialogue. Android ListView CRUD #### 1. Niveau de l'application Build.Gradle
- Ajouter les dépendances pour les bibliothèques AppCompat et Design support.
- Notre MainActivity dérivera de AppCompatActivity tandis que nous utiliserons également le bouton d'action flottant des bibliothèques de support de conception.
apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "com.tutorials.hp.listview_crud"
minSdkVersion 15
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation `com.android.support:appcompat-v7:24.1.1'
implementation `com.android.support:design:24.1.1'
}
2. CRUD.java
- Ajouter, mettre à jour, supprimer des données. Responsable de l'exécution des opérations CRUD.
public class CRUD {
private ArrayList<String> names =new ArrayList<>();
public void save(String name)
{
names.add(name);
}
public ArrayList<String> getNames()
{
return names;
}
public Boolean update(int position,String newName)
{
try {
names.remove(position);
names.add(position,newName);
return true;
}catch (Exception e)
{
e.printStackTrace();
return false;
}
}
public Boolean delete(int position)
{
try {
names.remove(position);
return true;
}catch (Exception e)
{
e.printStackTrace();
return false;
}
}
}
3. MainActivity.java
- Activité de lancement.
- ActivityMain.xml gonflé comme le contentview pour cette activité.
- Référence notre ListView.
public class MainActivity extends AppCompatActivity {
ListView lv;
ArrayAdapter<String> adapter;
CRUD crud=new CRUD();
Dialog d;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
lv= (ListView) findViewById(R.id.lv);
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
if(d != null) {
if(!d.isShowing())
{
displayInputDialog(i);
}else
{
d.dismiss();
}
}
}
});
final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
displayInputDialog(-1);
}
});
}
private void displayInputDialog(final int pos)
{
d=new Dialog(this);
d.setTitle("LISTVIEW CRUD");
d.setContentView(R.layout.input_dialog);
final EditText nameEditTxt= (EditText) d.findViewById(R.id.nameEditText);
Button addBtn= (Button) d.findViewById(R.id.addBtn);
Button updateBtn= (Button) d.findViewById(R.id.updateBtn);
Button deleteBtn= (Button) d.findViewById(R.id.deleteBtn);
if(pos== -1)
{
addBtn.setEnabled(true);
updateBtn.setEnabled(false);
deleteBtn.setEnabled(false);
}else
{
addBtn.setEnabled(true);
updateBtn.setEnabled(true);
deleteBtn.setEnabled(true);
nameEditTxt.setText(crud.getNames().get(pos));
}
addBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String name=nameEditTxt.getText().toString();
//VALIDATE
if(name.length()>0 && name != null)
{
//save
crud.save(name);
nameEditTxt.setText("");
adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
lv.setAdapter(adapter);
}else
{
Toast.makeText(MainActivity.this, "Name cannot be empty", Toast.LENGTH_SHORT).show();
}
}
});
updateBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String newName=nameEditTxt.getText().toString();
//VALIDATE
if(newName.length()>0 && newName != null)
{
//save
if(crud.update(pos,newName))
{
nameEditTxt.setText(newName);
adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
lv.setAdapter(adapter);
}
}else
{
Toast.makeText(MainActivity.this, "Name cannot be empty", Toast.LENGTH_SHORT).show();
}
}
});
deleteBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//DELETE
if( crud.delete(pos))
{
nameEditTxt.setText("");
adapter=new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,crud.getNames());
lv.setAdapter(adapter);
}
}
});
d.show();
}
}
4. ActivityMain.xml
- Contenir notre ContentMain.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.listview_crud.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
5. ContentMain.xml
- Pour contenir notre ListView.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.listview_crud.MainActivity"
tools_showIn="@layout/activity_main">
<ListView
android_id="@+id/lv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>
6. inputdialog.xml
- gère les entrées.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android_orientation="vertical" android_layout_width="match_parent"
android_layout_height="match_parent">
<LinearLayout
android_layout_width="fill_parent"
android_layout_height="match_parent"
android_layout_marginTop="?attr/actionBarSize"
android_orientation="vertical"
android_paddingLeft="15dp"
android_paddingRight="15dp"
android_paddingTop="10dp">
<android.support.design.widget.TextInputLayout
android_id="@+id/nameLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/nameEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Name" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android_orientation="horizontal"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<Button android_id="@+id/addBtn"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="ADD"
android_clickable="true"
android_background="@color/colorAccent"
android_layout_marginTop="20dp"
android_textColor="@android:color/white"/>
<Button android_id="@+id/updateBtn"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="UPDATE"
android_clickable="true"
android_background="#009968"
android_layout_marginTop="20dp"
android_textColor="@android:color/white"/>
<Button android_id="@+id/deleteBtn"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="DELETE"
android_clickable="true"
android_background="#2fc1b9"
android_layout_marginTop="20dp"
android_textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Comment exécuter
- Téléchargez le projet.
- Vous obtiendrez un fichier zippé, extrayez-le.
- Ouvrez le Android Studio.
- Fermez maintenant le projet déjà ouvert.
- Dans la barre de menu, cliquez sur File >New> Import Project.
- Choisissez maintenant un dossier de destination, à partir duquel vous voulez importer le projet.
- Choisissez un projet Android.
- Cliquez maintenant sur "OK".
- C'est fait, vous avez fini d'importer le projet, maintenant éditez-le.
Plus de ressources
| --- |
|---|
Bonne journée.
Exemple : ListView Android - ContextMenu
*Tutoriel sur les ListView personnalisés d'Android avec images, texte et menu contextuel.
La ListView aura une liste d'éléments. L'utilisateur peut alors faire un clic droit sur un élément donné et un menu contextuel s'affiche.
Concepts que vous apprendrez à partir de cet exemple
- Qu'est-ce qu'une ListView ?
- Qu'est-ce qu'un ContextMenu ?
- Comment créer une liste personnalisée avec des images, du texte et un menu contextuel dans android studio.
- Comment implémenter un écouteur de clics longs dans une liste ? 5.
- Comment afficher un menu contextuel avec des éléments de menu lorsque l'on clique avec le bouton droit de la souris sur un listview cardview. 6.
- Comment créer un adaptateur personnalisé avec baseadapter.
Qu'est-ce que BaseAdapter ?
Nous avons besoin d'un adaptateur pour travailler avec un listview.
Un adaptateur est une classe qui agit comme un pont entre un adaptateur et la source de données sous-jacente.
Dans ce cas, nous utiliserons BaseAdapter.
1. Fichiers Gradle
Tout d'abord, nous ajoutons les dépendances dans le fichier build.gradle au niveau de l'application.
(a). Build.gradle
Ajoutons quelques dépendances. Notre ListView comprendra des cardviews :
apply plugin: 'com.android.application'
android {
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.tutorials.hp.listviewcontextmenu"
minSdkVersion 15
targetSdkVersion 23
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation `com.android.support:appcompat-v7:23.2.1'
implementation `com.android.support:design:23.2.1'
implementation `com.android.support:cardview-v7:23.2.1'
}
2. Fichiers de mise en page
Voyons nos fichiers de mise en page. Nous en aurons trois :
- activité_main.xml
- content_main.xml
- modèle.xml
(a). activity_main.xml
- Notre modèle de mise en page pour l'activité principale.
- Il sera gonflé à la vue de l'activité principale.
- Il contiendra le content_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.listviewcontextmenu.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
(b). content_main.xml
- Ceci contiendra notre ListView.
- Il sera inclus à l'intérieur du
activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.listviewcontextmenu.MainActivity"
tools_showIn="@layout/activity_main">
<ListView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/lv"
android_layout_alignParentLeft="true"
android_layout_alignParentStart="true" />
</RelativeLayout>
(c). model.xml
- Est notre mise en page de ligne de listview personnalisée.
- Sera gonflé en une seule ligne.
- Contient un cardview avec des images et du texte.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="10dp"
card_view_cardElevation="10dp"
android_layout_height="wrap_content">
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent">
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/movieImage"
android_padding="10dp"
android_src="@drawable/ghost" />
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_layout_below="@+id/movieImage"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text=" John Doe a former FBI Agent and now Physics teacher .is wrongly accussed of murdering an innocent child.He makes it his business to find the bad guys who did taht.He convinces hacker Aram to join him.....
"
android_id="@+id/descTxt"
android_padding="10dp"
android_layout_below="@+id/nameTxt"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_text="TV Show"
android_id="@+id/posTxt"
android_padding="10dp"
android_layout_below="@+id/movieImage"
android_layout_alignParentRight="true" />
<CheckBox
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_id="@+id/chk"
android_layout_alignParentRight="true"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
3. Classes Java
Nous utilisons le langage de programmation java.
Nous aurons 5 classes :
(a). Movie.java
- Est notre objet de données, une classe POJO.
- Représente un seul objet film avec diverses propriétés.
- Chaque CardView contiendra un film.
public class Movie {
private String name;
private int image;
public Movie(String name, int image) {
this.name = name;
this.image = image;
}
public String getName() {
return name;
}
public int getImage() {
return image;
}
}
(b). LongClickListener
- Est une interface.
- Contient la signature de notre écouteur LongClick.
public interface LongClickListener {
void onItemLongClick();
}
(c). MyViewHolder.java
- Notre classe ViewHolder.
- Contiendra les vues à recycler.
- Implémentera View.OnLongClickListener et View.OnCreateContextMenuListener.
public class MyViewHolder implements View.OnLongClickListener,View.OnCreateContextMenuListener {
ImageView img;
TextView nameTxt;
LongClickListener longClickListener;
public MyViewHolder(View v) {
img= (ImageView) v.findViewById(R.id.movieImage);
nameTxt= (TextView) v.findViewById(R.id.nameTxt);
v.setOnLongClickListener(this);
v.setOnCreateContextMenuListener(this);
}
public void setLongClickListener(LongClickListener lc)
{
this.longClickListener=lc;
}
@Override
public boolean onLongClick(View v) {
this.longClickListener.onItemLongClick();
return false;
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
menu.add(0,0,0,"Share");
menu.add(0,1,0,"Rate");
menu.add(0,2,0,"Watch");
}
}
(d). CustomAdapter.java
- Notre classe d'adaptateur.
- Dérive de
BaseAdapter.
Va adapter nos données à nos vues personnalisées.
public class CustomAdapter extends BaseAdapter {
Context c;
ArrayList<Movie> movies;
LayoutInflater inflater;
String name;
public CustomAdapter(Context c, ArrayList<Movie> movies) {
this.c = c;
this.movies = movies;
}
@Override
public int getCount() {
return movies.size();
}
@Override
public Object getItem(int position) {
return movies.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if(inflater==null)
{
inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
if(convertView==null)
{
convertView=inflater.inflate(R.layout.model,parent,false);
}
//BIND DATA TO VIEWS
MyViewHolder holder=new MyViewHolder(convertView);
holder.nameTxt.setText(movies.get(position).getName());
holder.img.setImageResource(movies.get(position).getImage());
holder.setLongClickListener(new LongClickListener() {
@Override
public void onItemLongClick() {
name=movies.get(position).getName();
Toast.makeText(c,name,Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
public void getSelecetedItem(MenuItem item)
{
Toast.makeText(c,name+" "+item.getTitle(),Toast.LENGTH_SHORT).show();
}
}
(e). MainActivity.java
- Notre MainActivity.
- Fait référence à ListView à partir de layout.
- Instancie l'adaptateur personnalisé et le fixe à notre ListView.
public class MainActivity extends AppCompatActivity {
ListView lv;
CustomAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
lv= (ListView) findViewById(R.id.lv);
adapter=new CustomAdapter(this,getMovies());
lv.setAdapter(adapter);
}
@Override
public boolean onContextItemSelected(MenuItem item) {
adapter.getSelecetedItem(item);
return super.onContextItemSelected(item);
}
private ArrayList<Movie> getMovies() {
//COLECTION OF CRIME MOVIES
ArrayList<Movie> movies=new ArrayList<>();
Movie movie=new Movie("Shuttle Carrier",R.drawable.shuttlecarrier);
//ADD ITR TO COLLECTION
movies.add(movie);
movie=new Movie("Fruits",R.drawable.fruits);
movies.add(movie);
movie=new Movie("Breaking Bad",R.drawable.breaking);
movies.add(movie);
movie=new Movie("Crisis",R.drawable.crisis);
movies.add(movie);
movie=new Movie("Ghost Rider",R.drawable.rider);
movies.add(movie);
movie=new Movie("Star Wars",R.drawable.starwars);
movies.add(movie);
movie=new Movie("BlackList",R.drawable.red);
movies.add(movie);
movie=new Movie("Men In Black",R.drawable.meninblack);
movies.add(movie);
movie=new Movie("Game Of Thrones",R.drawable.thrones);
movies.add(movie);
return movies;
}
}
4. Télécharger
Hey,tout est dans le code source de référence qui est bien commenté et facile à comprendre et peut être téléchargé ci-dessous.
Vérifiez également notre tutoriel vidéo il est plus détaillé et expliqué en étape par étape.
| --- |
|---|