• 12 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/02/2019

Installez la Table View dans le Storyboard

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

C'est parti ! Nous allons rajouter notre Table View dans le storyboard !

Installation de la Table View

Pour cela, ouvrez le fichier Main.storyboard et allez chercher l'objet Table View dans la bibliothèque des objets.

Ensuite, glissez-le sur l'interface du ListViewController et redimensionnez-le pour qu'il prenne tout l'écran. Vous devriez obtenir ceci :

Et voilà ! Vous avez une belle Table View dans votre application ! Bien sûr, si vous lancez votre application, vous risquez d'être déçu, car pour l'instant, elle est vide. Nous allons apprendre à la remplir dès le prochain chapitre.

Vous pouvez retrouver dans l'inspecteur d'attributs certaines propriétés dont nous avons parlé, comme :

  • style qui peut prendre les valeurs grouped ou plain

  • content qui peut prendre les valeurs :

    • Dynamic Prototypes pour des données dynamiques

    • Static Cells pour des données statiques

Je vous laisse jouer avec les attributs separator qui concernent la petite ligne grise de démarcation entre les cellules.

Fonctionnement de la Table View

Pour bien prendre en main la Table View, il faut comprendre comment elle fonctionne.

Comme vous le savez maintenant, une Table View, c'est simplement une liste de cellules organisée éventuellement en sections. Et cette liste n'a pas de limite de taille !

Et c'est toute la magie des Table View ! Vous pouvez mettre 100 000 éléments dans la liste, cela ne posera pas de problème de performance. Votre iPhone supportera la charge.

Ce petit miracle de performance s'appuie sur une idée très simple.

Si vous voulez afficher par exemple 100 000 chansons dans une liste, il vous faut créer 100 000 vues qui affichent chacune une chanson différente. Le problème, c'est que votre iPhone n'est pas capable de gérer 100 000 vues. Un objet UIView est particulièrement gourmand en capacité.

Mais tu as dit que les listes pouvaient contenir 100 000 éléments !

C'est vrai. Une liste est capable de gérer 100 000 éléments, mais n'est capable de créer que quelques dizaines de cellules. Mais ce n'est pas un problème ! De toute façon, on ne voit en même temps à l'écran qu'une dizaine de cellules.

Donc la Table View va créer suffisamment de cellules pour qu'il y en ait sur tout l'écran et ensuite, elle va les réutiliser ! Lorsque vous allez faire défiler la liste vers le haut, la première cellule va disparaître. Pendant qu'elle n'est plus à l'écran, elle va être repositionnée en bas de la liste et ses données vont être modifiées. Ainsi, la cellule affiche les données correspondantes à son nouvel emplacement.

Le schéma suivant résume cette idée :

Il faut donc bien que vous reteniez qu'une Table View n'est pas infinie ! Elle ne possède que quelques cellules dont le contenu est modifié et réutilisé dès qu'elles quittent l'écran.

Un cousin de Table View

Je voudrais juste faire un petit aparté pour vous mentionner un cousin de Table View qui pourrait vous être utile. Il s'agit de UICollectionView.

Les Collection View sont des objets de l'interface qui permettent d'afficher des grilles. Par exemple, l'application Photos de l'iPhone utilise les Collection View pour afficher la grille de photos.

En résumé

  • On installe une Table View en la récupérant simplement depuis la bibliothèque des objets.

  • La Table View réutilise ses cellules lorsqu'on la fait défiler, de façon à ne gérer qu'un nombre réduit de cellules. Lorsqu'une cellule quitte l'écran, ses données sont modifiées et elle est repositionnée à l'autre extrémité de la liste.

  • Lorsque l'on veut afficher une grille, on utilise plutôt Collection View.

Dans le prochain chapitre, nous allons regrouper nos connaissances sur les protocoles et les Table View pour parler du delegate pattern !

Exemple de certificat de réussite
Exemple de certificat de réussite