• 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

Créez une cellule customisée

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

Dans ce chapitre, nous allons modifier l'aspect de nos cellules pour qu'elles soient plus belles. L'objectif est le suivant :

Vous allez voir que ces cellules sont particulièrement flexibles ; c'est ce qui fait une bonne partie de la puissance des Table View. Vous allez donc la plupart du temps travailler avec des cellules de votre création.

Design dans le storyboard

Nous allons commencer par revoir le design directement dans le storyboard.

Couleur de fond

Démarrons avec la couleur de fond de notre Table View. Choisissez la Table View et modifiez la couleur de fond dans l'inspecteur d'attributs (comme d'habitude dans la section View).

Séparateurs

Notre nouveau design nous permet de nous passer des séparateurs proposés par défaut dans une Table View. Je vous suggère de supprimer ces séparateurs. Pour cela, sélectionnez la Table View et passez le paramètre Separator à None dans l'inspecteur d'attributs.

Taille de la cellule

Nous allons maintenant agrandir la taille de la cellule. Pour cela, sélectionnez la cellule et rendez-vous dans l'inspecteur de taille. Vous pouvez passer le paramètre Row Height à 90 :

Couleur de fond de la cellule

Comme vous pouvez le voir dans la hiérarchie des vues, la cellule a une Content View. C'est cette view qui, comme son nom l'indique, contient l'ensemble des vues qui seront affichées dans la cellule.

Cette vue est simplement de type UIView. Je vous invite à changer sa couleur pour qu'elle soit verte et se fonde avec la couleur de fond de la Table View. Cela va nous permettre de voir le fond vert de la Table View et d'obtenir l'effet désiré.

Contenu de la cellule

Ça y est ! Nous allons nous attaquer au design de la cellule en elle-même. Pour cela, il faut d'abord changer le style de la vue à custom dans l'inspecteur d'attributs.

Regardons un peu le résultat que l'on souhaite obtenir :

Il y a donc 4 vues :

  • Une vue blanche avec un effet ombrée qui ne prend pas tout à fait tout le contenu de la cellule

  • Une icône qui dépend de la catégorie de l'élément

  • Un label de titre

  • Un label de détail

Je vous invite à rajouter tout cela dans la cellule et à créer les contraintes nécessaires. Il n'y a rien de particulier ici. Voici ce que cela donne pour moi :

Création d'une sous-classe

Maintenant que notre cellule est toute belle, il va falloir l'utiliser ! Pour cela, il faut que l'on puisse modifier les labels et l'image que nous avons ajoutés manuellement dans la cellule.

Le problème, c'est que UITableViewCell ne connaît pas ces vues que nous avons ajoutées.

Alors, comment faire ? La solution est simple, nous allons créer une sous-classe de UITableViewCell et lui ajouter nos vues sous forme de propriétés.

Création de la classe

Créez un nouveau fichier cmd + n et choisissez Cocoa Touch Class :

Ensuite, choisissez de créer une sous-classe de UITableViewCell. Puis nommez-la PresentTableViewCell (car elle va servir à afficher des cadeaux) :

Et enregistrez le fichier dans votre dossier View. Vous devriez obtenir un fichier PresentTableViewCell.swift qui contient ceci :

import UIKit

class PresentTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

Dans ce fichier, on vous propose de faire l'override de deux méthodes de UITableViewCell :

  • awakeFromNib : cette méthode est utilisée lorsqu'une vue est initialisée depuis un storyboard. C'est ici que vous pouvez customiser votre cellule. Par exemple, dans notre cas, nous allons rajouter une ombre sur notre vue blanche.

  • setSelected : cette méthode vous permettra de modifier l'aspect selon l'état de la vue : sélectionnée ou non. Nous n'en aurons pas besoin, donc vous pouvez supprimer cette méthode.

Connexion avec le storyboard

Maintenant, il nous faut modifier le type de notre cellule pour lui dire que désormais elle utilise le type PresentTableViewCell. Pour cela, sélectionnez la cellule dans le storyboard, allez dans l'inspecteur d'identité et modifiez sa classe :

Nous allons maintenant connecter les différentes vues de notre cellule à notre nouvelle classe pour pouvoir les modifier comme nous le souhaitons. Pour cela, il suffit de créer des outlets entre les vues et notre classe. Vous savez faire, voici à quoi doit ressembler notre classe ensuite :

class PresentTableViewCell: UITableViewCell {
    @IBOutlet weak var iconView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var subtitleLabel: UILabel!
    @IBOutlet weak var whiteView: UIView!

    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

Implémentation de la classe

Maintenant que notre classe est connectée, nous allons l'implémenter ! Je vous propose de commencer par rajouter notre petite ombre :

override func awakeFromNib() {
    super.awakeFromNib()
    addShadow()
}

private func addShadow() {
    whiteView.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.7).cgColor
    whiteView.layer.shadowRadius = 2.0
    whiteView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
    whiteView.layer.shadowOpacity = 2.0
}

Maintenant que ce petit détail de design est réglé, nous allons pouvoir configurer notre cellule. L'objectif ici est de créer une méthode que nous pourrons utiliser dans notre contrôleur pour configurer le contenu de notre cellule. Il faut configurer trois choses :

  • le texte de nos deux labels ;

  • l'icône que nous voulons afficher.

Pour cela, nous allons créer la méthode configure suivante :

func configure(withIcon: String, title: String, subtitle: String) {
    iconView.image = UIImage(named: icon)
    titleLabel.text = title
    subtitleLabel.text = subtitle
}

Et voilà, notre cellule customisée est tout prête ! Il ne nous reste plus qu'à l'utiliser dans le contrôleur.

Utilisation de PresentTableViewCell dans le contrôleur

Nous allons modifier notre méthode cellForRow qui pour l'instant ressemble à ceci :

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

    let present = PresentService.shared.presents[indexPath.row]

    cell.textLabel?.text = present.description
    cell.detailTextLabel?.text = present.detail

    return cell
}

Pour commencer, nous allons vérifier que notre cellule est bien du type PresentTableViewCell :

guard let cell = tableView.dequeueReusableCell(withIdentifier: "PresentCell", for: indexPath) as? PresentTableViewCell else {
    return UITableViewCell()
}

Si ce n'est pas le cas, on renvoie une cellule standard.

Maintenant que l'on sait que l'on a affaire à une PresentTableViewCell, on va pouvoir utiliser notre méthode configure :

let present = PresentService.shared.presents[indexPath.row]
cell.configure(withIcon: "À FAIRE", title: present.description, subtitle: present.detail)

Vous noterez ici que je ne me suis pas encore occupé de l'icône. Le problème est que notre protocole Present n'a pas de propriété icon qui contiendrait le nom d'une image.

Nous allons régler cela tout de suite :

protocol Present {
    var description: String { get }
    var detail: String { get }
    var icon: String { get }
}

Il faut maintenant que nos trois types TripBook et Toy se conforment à cette nouvelle exigence. Pour cela, vous pouvez remarquer, dans les assets du projet, que j'ai rajouté pour vous trois images nommées respectivement TripIconBookIcon et ToyIcon.

C'est ce que nous allons utiliser :

extension Trip: Present {
    // (...)
    var icon: String { return "TripIcon" }
}

extension Book: Present {
    // (...)
    var icon: String { return "BookIcon" }
}

extension Toy: Present {
    // (...)
    var icon: String { return "ToyIcon" }
}

Et maintenant, nous pouvons finaliser notre méthode configure :

cell.configure(withIcon: present.icon, title: present.description, subtitle: present.detail)

Et voilà ! Nous avons maintenant une cellule toute belle ! Je vous invite à lancer votre application dans le simulateur et à admirer le résultat.

Tadaa !
Tadaa !

En résumé

Pour créer une cellule customisée, vous devez :

  • Designer votre cellule dans le storyboard.

  • Créer une sous-classe de UITableViewCell.

  • Connecter cette sous-classe à votre cellule dans le storyboard.

  • Créer les outlets dont vous avez besoin.

  • Créer une méthode qui vous permet de configurer facilement votre cellule.

  • Utiliser votre nouvelle classe et sa méthode de configuration dans votre contrôleur.

Dans le prochain chapitre, nous allons apprendre à supprimer des éléments de votre liste.

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