• 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

Découvrez UITableView

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

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

Pour rappel, nous partons de la version suivante de l'application :

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

RAS...

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 Table View !

Présentation de Table View

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

Une Table View 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 Table View partout en iOS.

Partout où vous avez une liste qui défile, une Table View se cache derrière. Prenons quelques exemples :

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

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

Naming des éléments la Table View

Une Table View 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 Table View 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 Table View 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 Table View 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 Table View

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

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

En général, mais ce n'est pas obligatoire, on utilise le style plain pour des données dynamiques et grouped pour des données statiques.

En résumé

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

  • Une Table View est organisée ainsi :

  • Une Table View peut prendre deux aspects : grouped ou plain.

Dans le prochain chapitre, nous allons installer notre Table View !

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