Libérez votre développeur d’applications Partie 20 : Affichage de listes de données

Vous avez une idée d’application, mais vous n’avez pas les connaissances en programmation pour commencer à la créer? Dans cette série de blogues hebdomadaires, je vais vous guider étape par étape dans le processus de création d’applications pour iPhone, iPod touch et iPad. Joignez-vous à moi chaque semaine dans cette aventure, et vous découvrirez à quel point il peut être amusant de transformer vos idées en réalité! Il s’agit de la partie 20 de la série. Si vous débutez maintenant, consultez le début de la série ici (Cet article a été mis à jour vers Swift 1.2, Xcode 6.3 et iOS 8).

Jusqu’à présent dans cette série, vous avez appris juste assez sur les vues de table pour faire quelques exercices de base. Dans cet article, j'aborderai certaines des bases en guise de revue, puis nous plongerons dans le monde de la gestion des listes de données avec des vues de tableau.

Il est très important que vous ayez une compréhension claire de l'information contenue dans cet article, car le même modèle est utilisé pour d'autres contrôles de l'interface utilisateur tels que les vues de collection et les vues de sélecteur.

Comprendre les vues de tableau

Les vues de tableau sont utilisées pour afficher des listes de données dans les applications iOS. Si vous avez votre propre appareil iOS, vous avez utilisé fréquemment les vues de tableau, car elles se trouvent dans la plupart des applications intégrées d'Apple telles que Réglages (figure 1), iTunes, Photos, Mail, Météo et Contacts.

Les vues de table iOS sont basées sur la classe UITableView. Il s’agit de la vue dans le modèle de conception Model-View-Controller. Les vues de tableau sont conçues pour afficher de grands ensembles de données et sont configurables pour ressembler comme vous le souhaitez, comme en témoigne le large éventail d’apparences pour les vues de tableau utilisées dans les applications iOS intégrées.

Il existe trois styles principaux de vue de tableau : simple, indexé et regroupé, comme le montre la figure 2.

Chaque élément d’une vue de tableau est une ligne et une vue de tableau contient un nombre illimité de lignes. Chaque rangée mesure une colonne de large et, lorsque vous utilisez les styles intégrés, peut contenir une image, du texte et une icône d’accessoire, comme l’indicateur de divulgation (la flèche grise) affiché sur le côté droit des cellules de l’image ordinaire de la figure 2.

Chaque division d’une vue de tableau est une section. Si vous n’avez pas de divisions, vous n’avez qu’une seule section. Par exemple, à la figure 2, la vue de tableau ordinaire n’a qu’une seule section, la vue de tableau indexé a vingt-six sections (A à Z) et la vue de tableau groupé a deux sections.

La vue de tableau iOS est extrêmement rapide au moment de l’exécution, même lorsque vous faites défiler des milliers d’éléments. Comment y parvient-il? Quel que soit le nombre d’éléments dans une liste, la vue de tableau ne contient que suffisamment de cellules pour afficher les éléments visibles dans la vue, plus quelques cellules supplémentaires pour les éléments qui deviendront bientôt visibles. Ainsi, même si vous avez des milliers de chansons sur votre appareil, il n'y a qu'une douzaine de cellules actives contenant des informations sur les chansons dans la vue du tableau de l'application iTunes à un moment donné. Au fur et à mesure que les cellules disparaissent, elles sont instantanément réutilisées pour afficher d’autres contenus.

Remplir une vue de tableau avec des données

Alors, comment remplir une vue de tableau avec des données? Certaines vues de tableau sont statiques, vous pouvez donc créer des cellules statiques au moment de la conception, comme nous l’avons fait dans iAppsReview. Cependant, il est plus courant que les vues de tableau soient remplies dynamiquement au moment de l'exécution, comme nous l'avons fait dans mes derniers billets sur les données de base.

Dans les applications iOS, les vues de tableau remplies dynamiquement ne se remplissent pas de données. Ils obtiennent leurs données à partir d’un objet source de données, en particulier un objet qui implémente le protocole UITableViewDataSource. Cet objet est généralement une instance de la classe UITableViewController, qui implémente ce protocole et a été conçue par Apple spécifiquement pour fonctionner avec des vues de table (nous discuterons plus en détail des protocoles Swift dans un prochain article, mais pour l'instant, vous devez simplement savoir qu'un protocole définit un ensemble standard de comportements que les classes peuvent adopter et implémenter). Dans ce contexte, l’expression contrôleur de vue de tableau est logique, car il contrôle la façon dont une vue de tableau est remplie de données. Vous pouvez également considérer un contrôleur de vue de table comme une usine qui produit des objets de cellule à la demande de la vue de table.

Comme vous l’avez déjà dit, plutôt que de mettre du code qui récupère des entités directement dans un contrôleur d’affichage, nous plaçons plutôt le code dans un contrôleur d’affaires, puis nous appelons les méthodes du contrôleur d’affaires à partir du contrôleur d’affichage. En fin de compte, vous devez toujours vous familiariser avec les méthodes standard du contrôleur de vue de tableau, car vous devez connaître les méthodes dans lesquelles vous devez passer des appels aux contrôleurs d’entreprise.

Comme le montre la figure 3, le protocole UITableViewDataSource contient trois méthodes clés qui sont utilisées pour remplir une vue de tableau avec des données :

• numberOfSectionsInTableView :
• tableView :numberOfRowsInSection :
• tableView :cellForRowAtIndexPath :

C'est à vous de créer un contrôleur de vue de tableau personnalisé pour votre vue de tableau et d'ajouter du code à chacune de ces trois méthodes qui interagissent avec un contrôleur d'entreprise.

Au moment de l’exécution, avant qu’une vue de tableau ne soit affichée, elle transmet des appels de message au contrôleur de vue de tableau dans l’ordre indiqué à la figure 4.

Voici un aperçu de ce que fait chaque méthode :

1. numberOfSectionsInTableView : est appelé d’abord par la vue de table. Cette méthode renvoie le nombre de sections dans la vue du tableau. Dans l’exemple de la figure 4, il y a trois sections dans la vue du tableau, de sorte que cette méthode renvoie 3. Après avoir appelé cette méthode, la vue de tableau s’ajoute le nombre spécifié de sections.

2. tableView :numberOfRowsInSection : est appelé par la vue du tableau une fois pour chaque section. Cette méthode renvoie le nombre de lignes dans la section spécifiée. Dans l’exemple de la figure 4, cette méthode est appelée trois fois parce qu’il y a trois sections dans la vue du tableau. Chaque fois que la vue de table appelle cette méthode, elle passe un numéro de section, commençant par zéro, un, puis deux. Dans cet exemple, la méthode renvoie le nombre de lignes suivant pour chaque section :

• 2 pour l’article 0
• 1 pour l’article 1
• 3 pour l’article 2

Dans le tableau de la figure 4, le nombre de lignes de chaque section est fixe. Souvent, le nombre de lignes est déterminé dynamiquement au moment de l’exécution. Par exemple, dans l’application iTunes, le nombre de chansons dans une liste est déterminé par le nombre de chansons stockées sur votre appareil iOS.

3. tableView :cellForRowAtIndexPath : est appelé par la vue de table une fois pour chaque cellule visible (ou sur le point de le devenir) dans la vue de tableau. Cette méthode renvoie un objet de cellule de vue de tableau pour la section et la ligne spécifiées. Dans l’exemple illustré à la figure 4, la méthode est requise pour :

• Section 0, rangée 0
• Section 0, rangée 1
• Section 1, rangée 0
• Section 2, rangée 0
• Section 2, rangée 1
• Section 2, rangée 2

De cette façon, une vue de tableau est remplie dynamiquement d’éléments au moment de l’exécution.

Utilisation de contrôleurs d’affaires

Dans les derniers articles, vous avez utilisé des objets de contrôleur d’entreprise pour récupérer des entités à afficher dans les vues de tableau. La figure 5 montre une vue d’ensemble de la façon dont un contrôleur de vue de tableau utilise les services de l’objet de contrôleur d’entreprise AppCategory pour remplir une vue de tableau de catégorie d’application.

Voici les détails de chaque étape. Je vous recommande fortement de revoir ces étapes plusieurs fois jusqu’à ce que vous compreniez pleinement comment elles fonctionnent :

1. Dans la méthode viewDidLoad du contrôleur d'affichage de table, une instance de l'objet business-controller AppCategory est créée et stockée dans la variable d'instance appCategory.

2. Le contrôleur d’affichage de table appelle ensuite la méthode getAllEntities : du contrôleur d’entreprise AppCategory et stocke les objets AppCategoryEntity résultants dans la variable de tableau appCategoryList.

3. Dans sa méthode numberOfSectionsInTableView :, le contrôleur de vue de table renvoie 1, car il n’y a qu’une seule section dans la vue de tableau.

4. Dans la méthode tableView :numberOfRowsInSection :, le contrôleur d’affichage de table renvoie le nombre d’éléments AppCategoryEntity stockés dans la variable de tableau appCategorytList.

5. Dans sa méthode tableView :cellForRowAtIndexPath :, le contrôleur d’affichage de table récupère un objet AppCategoryEntity à partir du tableau appCategoryList à l’aide du numéro de ligne spécifié, et utilise l’entité pour configurer la cellule qu’elle renvoie à l’affichage de table.

J’espère que ce diagramme vous aidera à comprendre plus clairement l’interaction entre le contrôleur de vue de table et le contrôleur d’affaires.

Contrôleurs de vue de tableau personnalisés

Lorsque vous ajoutez un contrôleur de vue de tableau à un storyboard, comme vous l’avez fait avec la plupart des scènes d’iAppsReview, même si vous créiez initialement un prototype d’application, une instance de UITableViewController a été automatiquement créée pour que vous puissiez gérer les vues de tableau, même si le contenu des vues de tableau était statique. Cependant, pour fournir du contenu dynamique pour les vues de tableau dans ces scènes, vous devez créer un contrôleur de vue de tableau personnalisé pour chaque scène.

Voici les étapes de base que vous devez suivre pour créer un contrôleur de vue de tableau personnalisé :

1. Créez une nouvelle sous-classe de UITableViewController (par exemple, AppCategoryViewController).

2. Accédez au storyboard, cliquez sur la barre d’état en haut de la scène que vous souhaitez associer au nouveau contrôleur d’affichage, puis accédez à l’inspecteur d’identité et remplacez la classe du contrôleur d’affichage de table par la classe que vous avez créée à l’étape précédente.

Par exemple, à la figure 6, la classe UITableViewController par défaut a été remplacée par une classe AppCategoryViewController personnalisée.

Si vous vous trouvez dans une position où vous avez créé un contrôleur de vue personnalisé pour une scène particulière, mais qu’aucune donnée n’apparaît dans la vue du tableau, il se peut que vous ayez oublié cette deuxième étape!

Configuration des cellules d’affichage du tableau

Dans la partie 17 de cette série, vous avez ajouté du code à la méthode tableView :cellForRowAtIndexPath : de la classe AppCategoryViewController qui a configuré les cellules dans la vue table. Examinons de plus près ce code pour nous assurer que vous comprenez ce qui se passe.

Au moment de l’exécution, lorsqu’une vue de table est remplie, elle transmet un message tableView :cellForRowAtIndexPath : à son contrôleur de vue de table associé une fois pour chaque cellule de la vue de table. Fondamentalement, la vue de table demande que le contrôleur de vue de table renvoie un objet de cellule entièrement configuré pour la section et la ligne spécifiées.

La figure 7 donne un aperçu de l’interaction entre la vue de table et le contrôleur de vue de table lorsque la méthode tableView :cellForRowAtIndexPath : est exécutée au moment de l’exécution.

1. La vue de table appelle la méthode tableView :cellForRowAtIndexPath : du contrôleur de vue de table, en passant un objet indexPath. Cet objet indexPath possède des propriétés de section et de ligne qui indiquent la section et la ligne de la cellule que la vue de table demande au contrôleur de vue de table.

2. Le contrôleur de vue de table rappelle la méthode dequeueResusableCellWithIdentifier : de la vue de tableau, en transmettant une valeur CellIdentifier.

Lorsqu’un utilisateur fait défiler une vue de tableau au moment de l’exécution, les cellules qui défilent hors de l’écran sont ajoutées à une file d’attente de cellules qui peuvent être réutilisées. Lorsque la méthode dequeueReusableCellWithIdentifier : de la vue de tableau est appelée, la vue de tableau vérifie s'il y a une cellule réutilisable avec l'identifiant spécifié dans la file d'attente, et si c'est le cas, elle renvoie la cellule. S’il n’y a pas de cellules de ce type dans la file d’attente, il renvoie une toute nouvelle cellule du type d’identificateur spécifié.

3. Ensuite, le contrôleur de vue de tableau configure la cellule renvoyée par la vue de tableau. Il s’agit généralement d’un code qui définit le texte des étiquettes dans la cellule ainsi que tout indicateur accessoire.

4. Le contrôleur de vue de tableau renvoie la cellule configurée à la vue de tableau, ce qui ajoute la cellule à la liste.

Maintenant que vous avez la vue d'ensemble de haut niveau, plongeons dans le vif du sujet et examinons de plus près le code que vous avez ajouté à la méthode tableView :cellForRowAtIndexPath : de la classe AppCategoryViewController, comme le montre la figure 8.

1. La première ligne de code appelle la méthode dequeueReusableCellWithIdentifier : sur la vue du tableau, en passant l’identifiant CategoryCell. N’oubliez pas que vous avez défini l’Identifier de la cellule Catégorie d’application sur CategoryCell dans le storyboard au moment de la conception. Cette cellule est utilisée comme modèle pour les cellules qu’elle crée et est renvoyée au contrôleur d’affichage de tableau, ou, si une cellule de ce type existe déjà dans la file d’attente, une référence à cette cellule est renvoyée.

2. Ce code obtient un objet AppCategoryEntity à partir du tableau appCategoryList à l'aide de la propriété row du paramètre indexPath. Vous devez obtenir un objet AppCategoryEntity pour obtenir le nom de la catégorie.

3. Ce code configure en fait la cellule de la vue du tableau. Il prend la valeur de la propriété name de l'AppCategoryEntity et la stocke dans la propriété text du textLabel principal de la cellule.

4. La dernière ligne de code renvoie l’objet de cellule entièrement configuré à la vue de tableau.

En conclusion

Je sais que les informations contenues dans cet article sont nombreuses à assimiler, mais il est essentiel que vous compreniez ces mécanismes de base si vous voulez devenir un développeur d’applications à part entière! Si vous avez des questions, n'hésitez pas à les poster dans les commentaires et j'y répondrai pour vous!

<<Précédent Suivant>>