#Création de l’interface

Notre objectif va être de développer l’application suivante :

Celle-ci va nous permettre de lister des documents et de les afficher, peu importe leur type. D’en ajouter de nouveaux depuis les documents présents dans l’appareil, puis de les partager.

Pour cela, nous allons créer une application avec une liste de documents et un bouton pour en ajouter un nouveau depuis les documents présents dans l’appareil.

#TableView

• C’est un composant d’interface qui permet d’afficher une liste de données. Il est relié à un TableView, un TableViewCell et un TableViewController.
• D’ordre général les composants du Framework UIKit sont composés d’une View et d’un Controller.
• Le View est le composant qui va afficher les données et le Controller est le composant qui va gérer les données et les actions de l’utilisateur. Ils sont préfixés par UI pour indiquer qu’ils font partie du Framework UIKit.

On est du même niveau que le HTML et le JavaScript. Le HTML est le composant qui va afficher les données et le JavaScript est le composant qui va gérer les données et les actions de l’utilisateur.

#Implémenter un TableView

Il vous faudra donc 3 composants pour implémenter un TableView :

• TableView : C’est le composant qui va afficher la liste de données
• TableViewCell : C’est le composant qui va être répété pour chaque élément de la liste
• TableViewController : C’est le composant qui va gérer les données et les actions de l’utilisateur

#TableView

Pour ajouter le composant

1. Ouvrez le fichier Main.storyboard
2. Ajoutez un TableViewController à l’aide de la barre de recherche de la bibliothèque de composants (CMD+Shift+L).
3. Vous pouvez ensuite le glisser dans la vue principale de l’application.

Pensez à supprimer le ViewController par défaut.

🧠 Vous aurez surement une erreur de compilation si vous tentez de lancer maintenant, penser à ajouter votre nouveau TableViewController en tant que Initial View Controller dans le Main.storyboard

Vous devriez avoir quelque chose comme ça

#TableViewCell

Le TableViewCell est le composant qui va être répété pour chaque élément de la liste. Il est composé d’une vue (ContentView) que vous pouvez personnaliser. Le ContentView est le composant qui va contenir les éléments de la cellule. Vous pouvez y ajouter des composants comme des UILabel, UIImageView, UIButton, etc…

Sur la TableView dans la hierarchie des vues, selectionnez la cellule.

• Sur la droite, dans l’inspecteur d’attributs, vous pouvez modifier le style de la cellule.
  • Nous allons utiliser le style Subtitle qui permet d’afficher un titre et un sous-titre. Comme vu sur la maquette
• Puisque le composant va être réutilisé, nous devons lui spécifier un identifiant.
• Pensez à modifier l’identifiant de la cellule pour pouvoir la retrouver dans le code. Nous allons utiliser DocumentCell comme identifiant, mais vous pouvez utiliser ce que vous voulez.

Jusqu’ici, notre interface n’est pas encore liée à notre code. Nous allons donc devoir créer un fichier Swift pour gérer notre interface.

🛟 Un exemple ici https://www.hackingwithswift.com/read/1/3/designing-our-interface

#Lier au code avec un TableViewController

#Création du fichier Swift

1. Créer un fichier Swift nommé DocumentTableViewController qui va hériter de UITableViewController.
2. Pour cela, vous pouvez utiliser le raccourci CMD+N puis sélectionner Cocoa Touch Class et Next. Vous pouvez ensuite nommer votre fichier DocumentTableViewController.
3. Celui-ci doit hériter de UITableViewController pour pouvoir être lié à notre interface.

4. Pour lier notre interface à notre code, nous allons utiliser le Storyboard. Pour cela, sélectionnez le composant TableViewController dans la hierarchie des vues, puis dans l’inspecteur d’entité, vous pouvez modifier la classe du composant.
5. Nous allons donc sélectionner DocumentTableViewController pour lier notre interface à notre code.

Voilà ! Votre code est maintenant lié au Storyboard.

Vous pouvez maintenant ajouter du code dans votre fichier DocumentTableViewController pour gérer votre interface.

Tentez de lancer l’application.