Interagissez avec SwiftUI

Le sprint planning est fini, c’est le début de votre premier sprint !

Il est temps pour vous de commencer à coder, toujours avec le soutien de Samira qui est là pour vous guider.

Vous commencez par le premier ticket du premier POC. Cela correspond à la version 1 de la page de détail d’une femme de la tech. Le voici :

Nous avions effectué un découpage ensemble de ce ticket afin de savoir par quoi commencer dans votre développement.

La première étape est donc de commencer par positionner les éléments de notre page. C’est ce que nous allons voir dans ce chapitre.

Samira sera là pour vous aider et faire du pair programming avec vous. Cela signifie que vous allez être à 2 devant un écran et un clavier pour réaliser cette tâche. Comme ça, vous serez en capacité de refaire la même chose seul sur l’autre projet POC.

Débutez avec SwiftUI

À la création du projet, en choisissant le template d’application en Swift et SwiftUI, Xcode aura déjà créé un premier fichier SwiftUI qui s’appelle ContentView.

Ouvrez-le en le sélectionnant depuis le panneau de gauche.

Vous devriez avoir à gauche le code et à droite le Canva.

Souvenez-vous, s’il manque le Canva, vous pouvez l’afficher ou le cacher en cliquant sur le bouton en haut à gauche.

Si le Canva est grisé et qu’il est écrit Preview paused, vous n’avez qu'à cliquer sur la petite flèche circulaire pour le relancer.

La structure du fichier

Nous allons tout d’abord nous concentrer sur le code déjà écrit et essayer de le comprendre.

//  ContentView.swift
//  TheyMakeIt-POC1
//
//  Created by Amandine Cousin on 23/04/2024.

Chaque fichier Swift ou SwiftUI aura toujours une entête générée automatiquement à la création. Ce sont les lignes de code que vous voyez en commentaires et qui commencent par ‘’’//”’.

On peut y lire le nom du fichier, puis le nom du projet et enfin, l’auteur. Plus précisément c’est le nom du créateur du fichier. Si vous êtes plusieurs à travailler sur un même projet, ce sera toujours le nom de la personne qui aura créé le fichier.

Ensuite, on retrouve une première structure. C’est l’objet qui représente la vue de notre fichier. On le sait car elle a le même nom que le fichier et que ce nom est suivi par le protocole   View  .

struct ContentView: View {
var body: some View {
VStack {
// composants de la page
    }
    .padding()
    }
}

Ce protocole c’est ce qui va vous permettre de dire à Xcode que vous souhaitez construire une vue et qui va vous donner tous les outils pour le faire.

Dans cette structure, une variable est déclarée, elle s’appelle body. Si vous avez déjà fait de l’HTML, cela doit vous dire quelque chose. Body veut dire corps en français, c’est à l'intérieur du corps que l’on va coder le contenu de notre écran. Elle est obligatoire si on veut conformer au protocole  View  et donc faire une vue.

some View  indique que le body fera bien partie de la vue et respecte bien le protocole.

Les composants

Ensuite, nous avons une  VStack  , c’est ce qui va nous permettre de regrouper les éléments de notre vue. Nous rentrerons plus dans les détails dans quelques instants.

À l’intérieur de cette stack, on retrouve 2 composants.

Ce sont les éléments graphiques qui vont vous permettre de composer votre vue.

Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")

Ici on a une  Image  et un  Text  . Ces composants sont fournis par SwiftUI, ils ont déjà été déclarés par le langage et font partie des composants de bases que vous pouvez utiliser à votre guise.

La plupart des composants ont besoin d’avoir certaines informations pour pouvoir être créés. Une image aura besoin d’un nom pour savoir quelle image afficher. Ici c’est une image système qui se trouve dans les SF Symbols.

C’est une bibliothèque de pictogrammes fournie par Apple. Vous pouvez télécharger ici la dernière version .

Le texte lui aura besoin d’une chaîne de caractères pour savoir quoi afficher.

Essayez de changer  “Hello, world!”  par  “Hedy Lamarr”  .

Immédiatement, le Canva se met à jour pour afficher votre texte ! Magique non 🧙?

Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")

Vous remarquerez qu’entre l’image et le texte il y a d’autres lignes de code. C’est de cette façon, avec un  .  devant, que vous pourrez personnaliser les composants.

foregroundStyle  c’est la couleur donnée à notre pictogramme. Ici  .tint  c’est la couleur par défaut Apple, du bleu. Remplacez  .tint  par une autre couleur comme par exemple  .orange  .

Le globe terrestre n’est plus bleu mais orange désormais.

La preview

Une dernière chose : vous avez remarqué, il y a un autre élément que notre structure  ContentView  qui a été déclarée en bas de la page.

#Preview {
ContentView()
}

La preview, c’est le code qui nous permet de choisir ce qu’on affiche ou non dans le Canva. D’ailleurs, si vous supprimez la preview et son contenu, le Canva disparaît ! Ici c’est notre view  ContentView  qui est donc appelée pour avoir son aperçu.

Ajoutez votre premier composant

Ok, vous avez compris les composants déjà en place. Et si vous en ajoutiez un nouveau ?

Voyons ensemble 2 méthodes pour ajouter un composant dans cette vidéo :

• Les 2 façons d'ajouter un nouveau composant : 

  • Dans le code, en écrivant directement  Text(“1914 - 2020”)  .

  • Depuis le menu des composants, en cliquant sur le bouton + en haut à droite et en sélectionnant le composant qui vous intéresse. 

• Ce menu permet d'accéder plus rapidement aux ressources comme les images, les SF Symbols ou les couleurs.

• Vous pouvez rechercher ce que vous voulez dans ce menu avec la barre de recherche 

Plutôt facile non ?

Pour l'instant, pas besoin de s’occuper de la couleur ou de la taille de nos composants. Vous allez juste rajouter autant de composants Text nécessaires et les remplir avec des strings correspondantes aux maquettes.

Vous devriez avoir une structure comme ceci !

Vous avez tous vos éléments ? Alors on continue !

Utilisez les stacks

Je vous l’avais dit, nous allons creuser un peu plus ces stacks. Certes, elles vous aident à grouper vos composants mais pas que.

Stack en français, on peut le traduire en pile. C’est donc une pile ou un empilement d'éléments.

Vous avez dû remarquer, ce n’est pas un simple stack que l’on a dans notre code, c’est une  VStack  !

Et je vais vous montrer dans la vidéo suivante comment les utiliser :

Les types de stacks

• Il existe 3 types de stacks :

  • V pour Vertical ou l’axe Y,

  • H pour Horizontal ou l’axe X,

  • Z pour l’axe Z, c’est-à-dire en profondeur

• Les composants sont toujours empilés dans le sens de l’écriture, le premier en premier, le deuxième, en dessous ou à droite.

• Vous pouvez imbriquer des Stacks les unes dans les autres.

La VStack

• En regroupant tous les composants qui sont collés ou semblables de manière verticale par rapport à la maquette en utilisant des VStacks, on obtient ce code.

La HStack

• Si vous continuez avec les HStacks, il y en a lorsque les 2 composants d’une même ligne sont semblables comme actrice et inventrice par exemple.

• En ajoutant les 2 HStacks qu’il manque, vous obtenez cet autre code.

Positionnez les composants

Maintenant que nos composants sont bien groupés dans le code, nous allons pouvoir les regrouper visuellement et les positionner.

Pour cela il existe plusieurs façons de faire et nous allons voir les principales, ensemble, en vidéo :

Les différentes méthodes d’espacement :

L’alignement

• Comme pour du texte sur word, vous pouvez aligner les composants : 

  • à gauche avec .leading

  • à droite avec .trailing

  • au centre avec .center

• Cet argument, s’utilise comme ceci :   VStack(alignment: .center)  .

• Pour la HStack c’est similaire, vous pouvez aligner en haut avec top, au centre avec centre et en bas avec bottom.

L’espacement ou Spacer

• Il pousse tout le monde pour prendre toute la place disponible là où il sera. 

• Mis tout en bas, tout le contenu de votre page sera contraint de rester en haut. 

• Si vous le mettez au milieu entre 2 composants dans une HStack, il poussera les éléments à gauche et à droite de l'écran.

Le padding

• Le padding c’est lui qui va vous aider à mettre une marge entre vos différents composants. 

• Par défaut, si vous ne précisez pas, il est de 16 points partout.

• Vous pouvez également préciser l’espacement pour un côté seulement, par exemple  .padding(.top, 8)  . 

Pour notre maquette, seul le padding est suffisant. Ajoutez les marges pour les VStacks qui en ont besoin.

À vous de jouer

Contexte

Samira vous a accompagné pour positionner les éléments de la première maquette du premier POC. Maintenant c’est au tour du second projet et cette fois-ci vous serez seul pour le faire.

Consignes

Samira vous a justement envoyé un mail :

Super ce pair programming ensemble ! J’ai adoré nos échanges !

Je compte sur toi pour continuer sur la même lancée et arriver à placer les composants de la page de détail du second projet. Tu verras c’est assez similaire, je sais que tu peux le faire !

Dis-moi quand tu as fini et je passerai te voir pour vérifier que tout est OK et qu’on peut passer à la suite.

Reprenez le projet initialisé précédemment afin de modifier la structure existante comme ce qui vient d'être fait avec le cours.

1. Ajoutez les composants dont vous avez besoin

2. Regroupez-les avec les bonnes stacks

3. Servez-vous des padding pour placer les éléments comme vous le souhaitez

4. Pour les pictogrammes, 

   1. les images se nomment : 

      1. calendar

      2. bookmark

      3. mappin.and.ellipse

   2. le padding doit se faire uniquement en bas et doit être de 4

Vous devriez avoir un écran qui ressemble à celui-ci :

En résumé

• La preview, c’est ce qui est affiché dans le Canva

• Il existe une multitude de composants fournis par SwiftUI

• Les stacks sont ce qui aide à composer un écran en empilant les composants sur l’axe horizontal, vertical ou en profondeur.     

• Le padding, c’est la base pour ajouter de l’espace entre les éléments d’une page

Petit à petit, notre interface commence à ressembler à la maquette, mais il nous manque encore la customisation des éléments de la vue pour que la ressemblance soit plus frappante. Suivez-moi dans le chapitre suivant pour apprendre à personnaliser vos composants.