#Créer l’écran de détail

Maintenant que nous avons la liste, il faut la rendre interactive, quand l’utilisateur cliquera sur un élément, il doit s’afficher en plus grand. On appelle cela une vue de détail.

#Dans le storyboard

1. Créer un ViewController qui va afficher une image et un titre.

#🔗 Segue

2. Ajouter un Segue entre le TableViewController et le ViewController en faisant un Ctrl + Drag depuis le TableViewController vers le ViewController. Puis en sélectionnant Show dans la liste des Segue.

3. Pensez à nommer votre Segue pour pouvoir le retrouver dans le code. Nous allons utiliser ShowDocumentSegue comme identifiant.

   

#🏞️ ImageView

Nos fichiers sont actuellement des images, il faut pouvoir implémenter un composant d’interface qui permet l’affichage, similaire à une balise <img> en HTML, le composant UIImageView permet d’afficher une image.

4. Ouvrez la bibliothèque de composants (CMD+Shift+L) et cherchez “Image”, glissez-déposez une UIImageView sur votre ViewController.

5. Pour le placement de l’image dans la vue, vous devez utiliser les contraintes de positionnement. Faites en sorte d’agrandir l’image pour qu’elle prenne toute la place disponible.

   

6. Puis cliquez sur le bouton Resolve Auto Layout Issues et sélectionnez Reset to Suggested Constraints. Cela nous permet d’éviter de faire les contraintes à la main. Exercice qui est franchement chiant.

7. Vous pouvez prévisualiser le rendu : Dans le composant UIImageView vous pouvez choisir une image d’exemple à afficher dans l’inspecteur d’attributs depuis les images que nous avons ajouté précédemment.

   

#🔧 Exercice 1

• Expliquer ce qu’est un Segue et à quoi il sert.

#🔧 Exercice 2

• Qu’est-ce qu’une constraint ? A quoi sert-elle ? Quel est le lien avec AutoLayout ?

Passons à la suite pour comprendre comment ouvrir cet écran