B3 Développement Natif iOS - Anthony Da Cruz

#Délégation

On a une TableView, un Controller et une cellule, mais rien à afficher, ce qui fait que notre interface est plutôt vide…

#Créer des données de test

Pour pouvoir tester notre interface, nous allons créer des données de test. Pour cela, nous allons créer une structure DocumentFile qui va contenir les informations de nos documents.

Créer une struct Swift dans le fichier DocumentTableViewController avec les propriétés suivantes :

nomtypeoptionnelvaleur par défaut
titleStringnon-
sizeIntnon-
imageNameStringouinil
urlURLnon-
typeStringnon-

🛟 Point sur les Structures

Pour le moment nous n’avons pas besoin de plus d’informations. Nous allons donc créer une liste de documents dans notre DocumentTableViewController pour pouvoir les afficher dans notre liste. Avec quelques données de test.

Créez une variable static dans la structure document permettant de stocker la liste de test suivante :

    DocumentFile(title: "Document 1", size: 100, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 2", size: 200, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 3", size: 300, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 4", size: 400, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 5", size: 500, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 6", size: 600, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 7", size: 700, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 8", size: 800, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 9", size: 900, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),
    DocumentFile(title: "Document 10", size: 1000, imageName: nil, url: URL(string: "https://www.apple.com")!, type: "text/plain"),

#🔧 Exercice 1

Expliquer l’intérêt d’une propriété statique en programmation.

#Afficher les données dans la liste

Il est important de comprendre la notion de Delegate et de DataSource dans le Framework UIKit. Ces deux notions sont une application directe de ce que nous avons vu dans le chapitre sur la Délégation de Swift.

#Delegate

Le Delegate est une interface qui va gérer les actions de l’utilisateur sur un composant. Par exemple, lorsque nous cliquons sur un élément de la liste, c’est le Delegate qui va vous prévenir d’une action de l’utilisateur.

#DataSource

Le DataSource est une interface qui va gérer les données d’un composant. Par exemple, lorsque nous voulons afficher une liste de données, c’est le DataSource qui va fournir les données à afficher.

#Remplir la liste

Dans le cas d’un UITableViewContoller, le Delegate et le DataSource sont déjà incluses par composant. Aussi nous n’avons pas besoin d’ajouter les protocoles à la déclaration de notre classe.

💡 Si nous avions un ViewController classique, il aurait fallu ajouter les protocoles UITableViewDelegate et UITableViewDataSource à notre classe.

Il faut maintenant connecter les données avec les bonnes méthodes du DataSource. Pour cela, nous allons utiliser les méthodes suivantes :

// Indique au Controller combien de sections il doit afficher
override func numberOfSections(in tableView: UITableView) -> Int
    
// Indique au Controller combien de cellules il doit afficher
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    
// Indique au Controller comment remplir la cellule avec les données
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

#🔧 Exercice 2

  • Implémentez correctement les 3 fonctions, pensez à utiliser dequeueReusableCell pour réutiliser les cellules déjà créées.
  • Expliquer pourquoi dequeueReusableCell est important pour les performances de l’application.

Vous devriez avoir quelque chose comme ça :

C’est cool, mais il manque plusieurs choses :

  • Déjà le formatage de la taille du fichier
  • Ensuite le titre de la page, c’est assez austère.
  • On peut aussi ajouter un icone pour montrer à l’utilisateur que la cellule est cliquable.

#Formater la taille du fichier

Pour formater correctement la taille du fichier nous allons créer une extension de Int pour ajouter une méthode formattedSize qui va nous permettre de formater la taille du fichier en String.

Il faut toujours penser à utiliser ce que le framework vous fourni, en général si vous avez besoin d’implémenter une fonctionnalité, elle est déjà disponible dans le framework. Il faut donc toujours regarder la documentation avant de commencer à coder.

#🔧 Exercice 3 :

Créez une extension de Int pour ajouter une méthode formattedSize qui va nous permettre de formater la taille du fichier en String. En utilisant ByteCountFormatter.

🛟 Point sur les Extension

#Ajouter l’accessory à la cellule

Il suffit de choisir l’accessory voulu depuis le Storyboard en sélectionnant la cellule et en choisissant l’accessory voulu dans l’inspecteur d’attributs.

🛟 Aide

2-Interface Simple4-Navigation