Ajoutez des listes dans vos applications iOS

Nous y sommes ! Nous allons créer notre liste pour notre belle application Wishmas.

Je vous propose de commencer par faire un petit tour du propriétaire pour que vous compreniez les quelques lignes de code déjà présentes dans le projet.

Découverte du projet

Le projet est divisé en 5 fichiers organisés bien évidemment selon le modèle MVC.

On va les parcourir rapidement.

Toy.swift

struct Toy {

   var name = ""

   var brand = ""

}

Pas grand-chose à dire là-dessus, il s'agit simplement d'une structure avec deux propriétés qui représentent la marque et le nom d'un jouet.

ToyService.swift

class ToyService {

   static let shared = ToyService()
 
   private init() {}

   private(set) var toys: [Toy] = []

   func add(toy: Toy) {

      toys.append(toy)

   }

}

Cette classe utilise le singleton pattern, comme on peut le voir dans les deux premières lignes.

Ensuite, on définit une variable  toys  qui est un tableau de  Toy  .

Ensuite, une fonction  add(toy: Toy)  permet de rajouter un jouet dans le tableau  toys  .

Main.storyboard

ToyViewController.swift

Cette classe gère la page qui permet de rajouter un jouet. Il s'agit principalement d'une fonction  save  qui récupère les données des deux champs de texte, crée un objet  Toy  et l'ajoute avec  ToyService  au tableau  toys  , puis renvoie vers la page précédente.

@IBAction func save() {

   guard let name = nameTextField.text,

      let brand = brandTextField.text else {

         return

   }

   let toy = Toy(name: name, brand: brand)

   ToyService.shared.add(toy: toy)

   navigationController?.popViewController(animated: true)

}

ListViewController.swift

class ListViewController: UIViewController {

}

Ce dernier fichier est vide, car c'est ici que nous allons coder notre TableView !

Présentation de TableView

Il est donc grand temps de parler de la  TableView  ! Alors, une  TableView  , c'est quoi ?

Une TableView est un objet de la classe UITableView (qui hérite de UIView) et dont le rôle est d'afficher des listes que l'on peut faire défiler.

Cet objet mérite un cours, car :

• Il est un peu plus complexe qu'un bouton, par exemple.

• Surtout, il y a des TableViews partout en iOS.

Partout où vous avez une liste qui défile, une TableView se cache derrière.

Mais cela peut prendre d'autres aspects. Voici d'autres exemples peut-être un peu moins évidents qui fonctionnent aussi avec des TableViews :

Comme vous pouvez le voir, les TableViews sont partout, et sont un outil très flexible et donc très utilisé par les développeurs.

Naming des éléments de la TableView

Une TableView est donc simplement une liste, mais plusieurs éléments permettent de la structurer pour bien organiser les données. Pour vous y retrouver, il est important que vous en connaissiez les différents éléments.

Je vous ai fait un joli schéma que l'on va détailler ensemble :

Une TableView peut être divisée en sections. Ces sections permettent d'organiser les données.

Ensuite, au sein d'une section, vous avez trois éléments :

• Section Header (UIView)  : c'est une vue en haut de la section (qui permet par exemple de lui donner un titre).

• Section Footer (UIView)  : c'est une vue en bas de la section.

• Cell (UITableViewCell)  : ce sont les vues qui contiennent les données de la liste. Chaque donnée est dans une cellule.

Enfin, la TableView peut également avoir un header et un footer. À ne pas confondre avec les header et les footer des sections. Le header et le footer de la TableView sont respectivement tout en haut et tout en bas de la liste.

Enfin, il est important que vous fassiez la distinction entre  row  et  cell  :

• row représente le numéro de la ligne à laquelle on se trouve dans la section. Elle est de type  Int  .

• cell  représente la vue. Elle est de type  UITableViewCell  qui hérite comme toutes les vues de  UIView  .

Maintenant que l'on a dit tout cela, je vous remets le schéma. Cela ne vous fera pas de mal  !

Style de la TableView

Comme nous l'avons vu dans les exemples de listes au début de ce chapitre, la TableView peut prendre bien des aspects différents.

Mais vous devez savoir qu'il existe trois styles par défaut,  plain  et  grouped  et  inset grouped  , que voici :

En résumé

• Une TableView (  UITableView  ) permet d'afficher une liste en iOS. Cette liste peut avoir bien des aspects et des usages différents.

• Une TableView peut prendre deux aspects :  grouped  ou  plain  .

•  Une TableView est organisée ainsi :
   

   

Dans le prochain chapitre, nous allons installer notre TableView !