[Tutoriel] Créer une ListView avec des contrôles CheckBox et gérer les événements sur ces derniers

Version imprimable

08/07/2011, 13h04
David55

[Tutoriel] Créer une ListView avec des contrôles CheckBox et gérer les événements sur ces derniers

Bonjour,

Voici un nouveau tutoriel pour apprendre Android qui vous permettra de créer une listView avec des checkbox et de gérer les événements de ces dernières.

http://dsilvera.developpez.com/tutor...er-evenements/

Vous pouvez poser vos questions concernant ce tutoriel ici.

Bonne lecture ;)

PS: N'oubliez pas de voter pour la discussion ;)
19/10/2011, 00h08
buzeeg

list défilante

Salut David,

Peux-tu m'expliquer pourquoi ton tuto ne fonctionne pas si la hauteur de la liste dépasse la taille de l'écran (ce qui arrive vite) ?

J'ai moi-même fais une appli toute simple et j'ai un problème : les checkbox changent aléatoirement au scroll.

Si t'a la solution, merci d'avance !
A+
19/10/2011, 17h34
David55

Bonjour buzeeg,
En effet, ceci n'est pas pratique. Ceci vient du fait que la position que nous renvoie getView est celle de l'item par rapport à la liste visible!

Plusieurs solutions existent!

La plus simple est d'afficher un objet (id, libelle) au lieu d'afficher un simple libelle. Ainsi, lorsque tu cliques sur ton item, tu seras à quel libelle cela correspond, donc à quel id qui correspond à la position. C'est une petite bidouille mais ca fonctionne!

Sinon, il y a d'autre solution que je n'ai pas en tête la tout de suite mais je pourrais faire une mis à jour du tuto prochainement pour corriger ce bogue.

Bonjour à toutes et à tous,

Je vous poste une version de code qui ne bogue pas! Comme je l'ai dit, l'astuce est d'enregistrer la position dans le tag. Voyons ceci plus précisement dans un exemple.

Créons une classe person:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
// Posibilité de trier donc implemente comparable
public class Person implements java.lang.Comparable
{
	// position = Position dans le tableau si nous faisons une liste de persone
	private int		position;
	private String	nom;
	private String	prenom;
	private boolean	checked	= false;
 
	public Person (String nom, String prenom)
	{
		this.nom = nom.toUpperCase ();
		this.prenom = prenom.toUpperCase ();
	}
 
	public String getNom ()
	{
		return nom;
	}
 
	public void setNom (String nom)
	{
		this.nom = nom;
	}
 
	public String getPrenom ()
	{
		return prenom;
	}
 
	public void setPrenom (String prenom)
	{
		this.prenom = prenom;
	}
 
	public void setChecked (boolean checked)
	{
		this.checked = checked;
	}
 
	public boolean isChecked ()
	{
		return checked;
	}
 
	public int compareTo(Object other) { 
	      return this.nom.compareTo (((Eleve)other).getNom ());
	}
 
	public void setPosition (int position)
	{
		this.position = position;
	}
 
	public int getPosition ()
	{
		return position;
	}
 
}

Ensuite, nous allons créer un adapter pour créer une liste:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
public class personAdapter extends BaseAdapter
{
	List<person>		person;
	LayoutInflater	inflater;
 
	public personAdapter (Context context, List<person> person)
	{
		inflater = LayoutInflater.from (context);
		this.person = person;
	}
 
	@Override
	public int getCount ()
	{
		return person.size ();
	}
 
	@Override
	public Object getItem (int position)
	{
		return person.get (position);
	}
 
	@Override
	public long getItemId (int position)
	{
		// TODO Auto-generated method stub
		return position;
	}
 
	@Override
	public View getView (int position, View convertView, ViewGroup parent)
	{
		ViewHolder holder;
		if (convertView == null)
		{
			holder = new ViewHolder ();
			convertView = inflater.inflate (R.layout.affichageitem, null);
			holder.nom = (TextView) convertView.findViewById (R.id.nom);
			holder.prenom = (TextView) convertView.findViewById (R.id.prenom);
			holder.checked = (CheckBox) convertView
					.findViewById (R.id.checkbox);
		}
		else
		{
			holder = (ViewHolder) convertView.getTag ();
		}
		holder.position = person.get (position).getPosition ();
		holder.nom.setText (person.get (position).getNom ());
		holder.prenom.setText (person.get (position).getPrenom ());
		holder.checked.setChecked (person.get (position).isChecked ());
		holder.checked.setClickable (false);
		holder.checked.setEnabled (true);
		holder.checked.setTag (holder);
		convertView.setTag (holder);
		return convertView;
	}
//Classe permettant de sauvegarder l'etat de la personne et de pouvoir recuperer la position.
	public class ViewHolder
	{
		TextView	nom;
		TextView	prenom;
		CheckBox	checked;
		int			position;
	}
}

Enfin nous allons pouvoir initialiser et gérer notre liste dans l'activity:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
public class CheckActivity extends ListActivity
{
	/** Called when the activity is first created. */
 
	private EditText		_filterText		= null;
	private personAdapter	_adapter		= null;
	private List<Person>		Person;
	private ListView		personList;
 
	@SuppressWarnings("unchecked")
	@Override
	public void onCreate (Bundle savedInstanceState)
	{
		super.onCreate (savedInstanceState);
		setContentView (R.layout.main);
 
		person = new ArrayList<person> ();
		person.add (new person ("Toto", "Toti"));
		person.add (new person ("Tata", "Titi"));
		person.add (new person ("Padre", "Papa"));
		person.add (new person ("Mum", "Maman"));
		person.add (new person ("Aba", "ima"));
		person.add (new person ("Mickey", "Mouse"));
		person.add (new person ("Mini", "Mouse"));
		person.add (new person ("Testeur", "Pro"));
		person.add (new person ("Developpez", "Forum"));
		person.add (new person ("Voilou", "Voili"));
 
		Collections.sort (person);
 
		// Initialisation de la position
		for (int i = 0; i < person.size (); i++)
			person.get (i).setPosition (i);
 
		_adapter = new personAdapter (this, person);
		setListAdapter (_adapter);
		personList = getListView ();
		personList.setItemsCanFocus (false);
		personList.setOnItemClickListener (new OnItemClickListener ()
		{
 
			@Override
			public void onItemClick (AdapterView<?> parentView,
					View selectedItemView, int position, long id)
			{
				CheckBox c = (CheckBox) selectedItemView
						.findViewById (R.id.checkbox);
//On recupere le tag
				ViewHolder view = ((ViewHolder) c.getTag ());
//On gere le check
				if (!c.isChecked ())
				{
					person.get (view.position).setChecked (true);
				}
				else
				{
					person.get (view.position).setChecked (false);
				}
//On replace la liste à la bonne position
				int pos = parentView.getFirstVisiblePosition ();
				personList.setSelection (pos);
			}
		});
	}
}

Et voila ;)

Voici le xml d'un item affichageitem.xml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content" android:orientation="horizontal"
	>
 
	<ImageView 
		android:id="@+id/img" 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" 
		android:layout_gravity="center_vertical"
		android:src="@drawable/profil_homme" android:layout_marginRight="10px"/>
 
	<LinearLayout
		android:layout_height="wrap_content" 
		android:layout_gravity="center_vertical"
		android:paddingLeft="10px" 
 
		android:orientation="vertical" 
		android:layout_width="wrap_content" android:layout_weight="1">
 
		<LinearLayout
			android:layout_height="wrap_content" 
			android:layout_gravity="center_vertical" 
			android:layout_width="wrap_content" 
			android:orientation="horizontal" >
 
			<TextView 
				android:id="@+id/nom" 
				android:layout_width="fill_parent"
				android:layout_height="fill_parent" 
				android:textSize="20sp"
				android:textStyle="bold" 
				android:text="Nom" 
				android:layout_marginRight="10px"/>
 
			<TextView 
				android:id="@+id/prenom"
				android:layout_width="fill_parent" 
				android:textSize="20sp"
				android:layout_height="fill_parent" 
				android:text="Prenom" />
 
		</LinearLayout>
 
	</LinearLayout>
 
	<CheckBox 
		android:id="@+id/checkbox" 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" 
		android:layout_weight="0" 
		android:layout_marginRight="10px" android:layout_gravity="center_vertical"
		android:focusable="false"
		android:focusableInTouchMode="false" />
 
</LinearLayout>

Voici le main.xml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
 
 
    <ListView android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1" 
         /> 
 
</LinearLayout>

14/12/2011, 02h46
nicolofontana12
Parfait... sauf que ton style de code ressemble à un developpeur en C!
Tout les classes en Java sont fortement conseillé d'avoir une lettre Majuscule comme debut!

person, personAdapter ne respectent pas la convention de style Java...

// Initialisation de la position
Code:

1 2 3 4 for (int i = 0; i < person.size (); i++){ person.get (i).setPosition (i); .... }
Pour un mobile, il faut aussi penser à l'optimisation par :

// Initialisation de la position
Code:

1 2 3 4 5 int personLenght=person.size (); for (int i = 0; i < personLenght; i++){ person.get (i).setPosition (i); }

Bonjour,

J'ai testé la version de base qui bug comme expliqué selon la position.
J'ai ensuite essayé la correction proposée ici, mais les items ne se checked pas du tout. Je clique bien sur l'item, je fais un log pour voir s'il rentre bine dans la fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public void onItemClick(AdapterView<?> parentView, View selectedItemView, int position, long id) { CheckBox c = (CheckBox) selectedItemView .findViewById(R.id.checkbox); // On recupere le tag ViewHolder view = ((ViewHolder) c.getTag()); // On gere le check if (!c.isChecked()) { persons.get(view.position).setChecked(true); Log.v("Checked", "true"); } else { persons.get(view.position).setChecked(false); Log.v("Checked", "false"); }
les log s'affichent bien ( toujours en true) mais rien de changent sur l'interface...

EDIT : bon en fait il suffisait de modifier un peu le code
Code:

1 2 3 4 5 6 7 8 9 10 11 if (!c.isChecked()) { c.setChecked(true); persons.get(view.position).setChecked(true); Log.v("Checked", "true" + position); } else { c.setChecked(false); persons.get(view.position).setChecked(false); Log.v("Checked", "false" + position); }
Par contre je comprends pas trop comment ça fonctionne du coup ...
Parce que la checkbox est récupéré par
CheckBox c = (CheckBox) selectedItemView.findViewById(R.id.checkbox);
et selectedItemView correspond au linearlayout j'imagine?

Personnellement, je préfèrerai utiliser un "CheckableLayout" comme racine des items... et laisser le ListView gérer les checked/unchecked....
Ca permet de beneficier de tout le code de style de selection (only one, multiple, ...) et de pouvoir utiliser les styles (par exemple le background qui change quand l'item est 'checked')....
Exemple de "CheckableLayout":

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
public class CheckedLinearLayout extends LinearLayout implements Checkable {
 
	boolean	checked = false;
 
	/**
         * @param context
         * @param attrs
         */
	public CheckedLinearLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
 
 
	/**
         * @param context
         */
	public CheckedLinearLayout(Context context) {
		super(context);
	}
 
 
	@Override
	public void setChecked(boolean c) {
		this.checked = c;
		refreshDrawableState();
	}
 
	@Override
	public boolean isChecked() {
		return this.checked;
	}
 
	@Override
	public void toggle() {
		this.checked = !this.checked;
		refreshDrawableState();
	}
 
 
    /**
     * Indicates the view is pressed. States are used with
     * {@link android.graphics.drawable.Drawable} to change the drawing of the
     * view depending on its state.
     *
     * @see android.graphics.drawable.Drawable
     * @see #getDrawableState()
     * @hide
     */
    private static final int[] CHECKED_STATE_SET = {android.R.attr.state_checked};
 
 
	@Override 
	protected int[] onCreateDrawableState(int extraSpace) { 
		int neededSpace = extraSpace;
		if (isChecked())
			++neededSpace;
	    int[] drawableState = super.onCreateDrawableState(neededSpace); 
	    if (isChecked()) 
	    	drawableState = mergeDrawableStates(drawableState, CHECKED_STATE_SET); 
	    return drawableState; 
	} 
}

Pour info, on peut rajouter un check-box dans le linear layout facilement, en déclarant ce checkbox comme héritant des "states" du parent....
Quand le layout est "checked" la checkbox est checked.... etc...

28/02/2012, 17h18
amy0o0

Bonjour,

J'ai vu ce post et il m'intéresse tout particulièrement, mais je n'y arrive pas ...

La différence, c'est qu'il ne s'agit pas de liste avec des checkbox, mais d'une liste dont je veut pouvoir griser le fond de certains item selon un critère donné.

Avant de rentrer dans un éventuel détail, je me demandais si tout bonnement c'était possible ou si il n'y avait rien à faire...

Meurci d'avance...
29/02/2012, 03h26
nicroman

Oui avec un CheckableLayout (cf mon post ci-dessus).

Il suffit de mettre comme background un state-selector...
29/02/2012, 09h25
amy0o0

Merci, mais je suis débutante et j'avoue que je patauge sévèrement...

Ce que je veux, ce n'est pas des items qui change de couleur à un clic donné, mais une liste qui selon un paramètre utilisateur qu'il a enregistré dans ses préférences, grise un certains nombre d'éléments dans la liste et que lorsqu'on scrolle cette liste, il ne faut pas que cela bug (ce qui est mon cas, actuellement).

Je ne comprends pas bien ce que tu proposes. Cela veut-il donc dire qu'il ne sert à rien d'utiliser BaseAdapter?

Merci d'avance

[EDIT]
Finalement, j'y suis arrivée ! Merci pour ce post !
01/03/2012, 01h12
nicroman

L'adapter n'a rien à voir la dedans....
L'adapter sert à faire l'interface entre un "widget" (le ListView) et les données, en indiquant comment représenter chaque item (Les "Layout" de chaque item).

La ListView sait gérer tout un tas de cas: Checkable-items ou pas, multiple selection ou single selection....
Dans tous les cas, la ListView va essayer de "caster" le layout de l'item selectionné et appeler setChecked() dessus...

Dans le cas "classique" ou les items sont les layouts par défaut d'android (android.R.layout.checkableListItem ou un truc du genre), il sagit simplement d'un CheckedTextBox (qui implémente Checkable) => ca marche

Dans le cas ou on "override" le layout, ce layout n'implémente pas Checkable => ca ne marche pas.

il faut que la view initiale soit "Checkable" sinon rien ne marchera. D'ou l'idée de faire un CheckableLayout qui va conserver ce flag.
Solution 1: Faire un truc compliqué qui va trouver les autres éléments checkables du layout => ca ne marche pas toujours.
Solution 2: Faire un vrai CheckableLayout qui va maintenir la StateList de la view... => On peut alors faire ce qu'on veut: rajouter des éléments checkable dedans (en leur faisant hériter le state du parent), mettre un background "state-selected" (qui fait que le background change en fonction de l'état checked ou non), etc...
28/05/2012, 12h41
Snote100024

Bonjour,

J'ai suivi le tuto.
J'ai rajouté une db et les éléments de la liste sont chargés depuis la db.
Mais je ne sais pas comment faire pour définir la valeur de checkbox.
Quelqu'un peut d'aider?

Merci
28/05/2012, 15h35
verso61

Même question que Snote, merci d'avance :)
30/05/2012, 10h42
David55
Citation:

Envoyé par Snote100024

Bonjour,

J'ai suivi le tuto.
J'ai rajouté une db et les éléments de la liste sont chargés depuis la db.
Mais je ne sais pas comment faire pour définir la valeur de checkbox.
Quelqu'un peut d'aider?

Merci

La valeur de la checkbox est un boolean: true si elle est cochée, false sinon.
Il est donc facile de la stocker dans une base de données.

Il y a différente manière de stocker l'information. Soit on la stocke une fois cochée (donc modifiée), soit on la stocke une fois qu'on change de vue qu'elle soit cochée ou non.

Une fois stockée, lorsque vous récupérer les informations en base, il suffit de voir si la valeur est à true et de définir la case à cocher:
Code:

1 2 3 4 5 value = // On récupère la valeur de la base de données if (checkBox.isChecked()) { checkBox.setChecked(value); }