Ajoutez des listes dans vos applications iOS

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

Installation de la TableView

Pour cela, ouvrez le fichier  Main.storyboard  et allez chercher l'objet TableView 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 TableView 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  ,  plain  ou  grouped inset  ;

• 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 l’attribut  separator  qui concerne la petite ligne grise de démarcation entre les cellules.

Fonctionnement de la TableView

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

Comme vous le savez maintenant, une TableView, 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 TableViews ! 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é.

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 TableView 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 correspondant à son nouvel emplacement.

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

Il faut donc bien que vous reteniez qu'une TableView 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 TableView

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

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

Il s’agit d’un cousin sur l’aspect visuel, mais aussi dans sa logique.

Tout comme la TableView, il sait afficher autant une dizaine d’éléments que 100 000. Pour cela, il réutilise le même principe de réutilisation de cellules que la TableView. Toutefois, la CollectionView est bien plus puissante que la TableView.

En plus d’avoir les mêmes principes que la TableView, à savoir des headers, des footers, des sections, elle possède d’autre fonctionnalités intéressantes :

• Pagination : Là où la TableView se contente d’être scrollable à l’infini, la CollectionView peut faire en sorte de paginer le contenu pour scroller de X éléments en X éléments.

• Scroll Direction : Les éléments peuvent être scrollables verticalement comme pour une TableView, ou horizontalement.

• Layout : Il s’agit probablement de la fonctionnalité la plus intéressante mais aussi la plus complexe. De facto, la CollectionView permet de faire des grilles verticales ou horizontales. Mais il est aussi possible de complètement customiser son layout pour lui permettre d’aller encore plus loin.

D’un point de vue simplifié, tout ce que vous avez appris et allez apprendre sur l’utilisation des TableViews s’appliquera tout aussi bien sur la CollectionView. Nous n’irons donc pas plus loin sur la CollectionView dans ce cours.

En résumé

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

• La TableView 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 TableViews pour parler du delegate pattern !