Comment utiliser les UITableView avec Swift

Si tu n’es pas encore familier avec ce concept, les table views servent à faire des listes verticales d’éléments.

À la différence des collection views, on ne peut pas contrôler la largeur des éléments. Ils prennent automatiquement toute la largeur de la table view.

On les utilise quand on veut faire une liste d’éléments simples.

Bases pour créer une table view

Il y a plusieurs façon de les créer.

À vous de voir celle qui vous paraît la plus simple.

Ce qu’il faut retenir, c’est que la table view doit :

• avoir un delegate et un dataSource
• définir un identifier pour ses cellules
• définir quel est le type de cellule qu’elle utilise (UITableViewCell ou une sous-classe)

Dans chaque méthode, on peut retrouver ses éléments là.

Le delegate, c’est le protocole que la table view va suivre et qui va lui dicter son comportement.

Si vous ne savez pas ce que sont les protocoles, ce sont des types particuliers qiu servent à définir le comportement de la classe qui les utilise.

Si dans le protocole on dit que le controller qui répond au protocole doit avoir une fonction nommée X qui renvoie Y alors ce controller doit avoir cette fonction.

Le dataSource c’est assez clair, c’est un protocole qui sert à dire que c’est notre controller qui va remplir les cellules.

L’identifiant des cellules sert à faire en sorte qu’elles soient réutilisables.

Quand on scroll, on réutilise celles qui disparaîssent pour générer celles qui apparaîssent plutôt que de créer des nouvelles. L’identifier sert à ça.

Le type de cellule sert à pouvoir créer votre propre type de cellule.

Si vous voulez disposez des éléments d’une façon bien précise qui ne correspond à aucune des possibilités proposées par Xcode alors vous devez créer votre propre type de cellule.

En général, beaucoup de développeurs font leur propre type de cellule alors que ce n’est pas forcément nécéssaire.

Ce n’est pas nécessaire car il y a énormément de possibilités!

Regardez toutes les possibilités :

Comment créer une table view

Comme je l’ai dit auparavant, il y a plein de méthodes.

Si vous voulez que votre table view prenne tout l’écran et qu’il n’y ait que ça dans l’écran, la solution la plus simple c’est de créer un controller qui sera du type UITableViewController.

Quand vous créez un table view controller, vous allez avoir les méthodes obligatoires du protocole qui sont définies mais qu’il faut modifier ainsi que des méthodes commentées qui sont optionnelles.

Les plus importantes sont les suivantes :

• numberOfSections(in tableView: UITableView) -> Int dedans vous allez simplement retourner le nombre de sections que vous voulez dans votre table view, généralement on en a qu’une. Si vous voulez voir à quoi ça ressemble je vous mettrai un exemple plus bas.

• tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int dedans vous allez retourner le nombre d’éléments que vous allez afficher dans votre table view pour chaque section (si vous n’avez qu’une section, retournez le nombre total d’éléments à afficher)

• tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell cette méthode sert à remplir votre cellule. En gros, pour chaque ligne, la méthode sera appelée et dans la fonction vous devez récupérer la cellule à la ligne parcourue, mettre du texte ou quoi que ce soit, retourner la cellule. Puis la fonction sera appelée pour la ligne suivante de la table view et ainsi de suite jusqu’au nombre de ligne que vous avez défini dans la méthode présentée juste avant.

Voici comment on pourrait configurer la cellule pour y mettre simplement du texte :

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)

    cell.textLabel?.text = "Ligne numéro \(indexPath.row)" // indexPath.row = le numéro de la ligne

    return cell
}

Vous pouvez vous référer à l’image que j’ai partagé précédemment pour retrouver le nom des propriétés à modifier en fonction de ce que vous voulez faire.

Moi je voulais modifier le texte principal donc j’ai modifié le textLabel qui fonctionne comme un label.

Vous pouvez utiliser cette méthode avec le storyboard dans lequel vous allez mettre un UITableViewController puis ajouter une (ou plusieurs) prototype cell en y définir et identifier.

Ensuite, vous faites comme avec n’importe quel controller, vous créer un controller mais cette fois du type UITableViewController et dans le storyboard vous mettez que la classe du table view controller est la classe que vous venez de créer.

Attention à mettre le même identifier dans votre storyboard et dans votre classe.

Si vous ne voulez pas utiliser de storyboard il faudra appeler cette fonction dans viewDidLoad :

self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "reuseIdentifier")

Cette fonction va également vous permettre de mettre une classe différente pour vos cellules.

Si vous voulez avoir un UIViewController dans lequel il y a des views mais aussi une table view alors vous créez simplement le controller dans lequel vous mettez une table view (via le storyboard ou dans le code).

Ensuite vous reprennez les bases des table view dont je vous avais parlé :

self.tableView.delegate = self
self.tableView.dataSource = self
self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "identifier")

N’oubliez pas que votre controller doit héritez de UITableViewDelegate et UITableViewDataSource.

Vous devez ensuite définir au minimum les méthodes tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int et tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell.

Personnaliser sa table view

Pour utiliser votre propre type de cellule, il faut simplement créer une sous-classe de UITableViewCell et ensuite à l’intérieur ça fonctionne comme une UIView classique.

vous devrez également changer le type de la cellule soit dans le storyboard si vous en utilisez un soit dans la fonction register.

Je vous avais également parlé des sections, nous allons le voir maintenant.

Chaque section est un groupe de cellule.

Chaque section peut avoir un header et un footer.

Voici une illustration pour mieux comprendre :

Pour définir les header et les footer vous avez les fonctions :

• tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String?
• tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?

Celles-ci sont pour le header mais vous avez aussi les mêmes pour le footer.

Conclusion

Cet article est très long mais vous voyez qu’il n’y a rien de très sorcier.

Ça peut paraître compliqué au premier abord mais avec la pratique ça devient très vite compréhensible et facile à mettre en place alors n’hésitez pas à pratiquer!

Si vous voulez aller plus loin et maîtiser toutes les bases du développement iOS, je prépare une formation à ce sujet.

Elle a pour but de vous apprendre à créer vos propres apps tout seul sans aucune aide.

C’est la formation que j’aurais aimé avoir à mes débuts pour gagner du temps.

Au début j’étais obligé de suivre des tutos dès que je faisais quelque chose.

Ensuite j’ai compris les bases ainsi qu’un secret et ça a tout débloqué chez moi.

Je suis devenu freelance depuis, et ça marche bien.

Pour être sûr de ne pas rater la formation ainsi que des emails réguliers dans lesquels je parle de mon quotidien de développeur tout en donnant des conseils, abonne toi aux emails privés juste en dessous.