Swift UI

Swift UI

Soit le bienvenue sur cette formation ou on va s’initier au framework de Swift, Swift UI.

Pré-requis

Pour débuter cette formation, je te recommande fortement d’avoir terminé la formation Swift Starter Pack. Gérer et comprendre un minimum un langage est essentiel pour aborder correctement les différents frameworks qui en dépendent.

C’est quoi un framework ?

D’ailleurs, parlons-en, c’est quoi un framework ? J’ai souvent eu des apprenants qui ont confondu Swift et SwiftUI, pourtant ce n’est pas exactement la même chose.

Swift est un langage de programmation, il permet d’écrire du code que l’ordinateur peut interpréter. SwiftUI, lui, est un framework de Swift, une boîte à outils en somme.

Si tu veux créer une application avec du Swift, sans framework, tu peux, mais ça va être diablement long. C’est pourquoi de sympathiques développeurs ont pré-codé des morceaux de code réutilisables.

C’est le cas de SwiftUI, une bibliothèque contenant de nombreuses lignes de code pré-écrites et mises à notre disposition pour créer nos applications.

 Je peux faire quoi avec Swift UI ?

SwiftUI est dédié à la conception d’applications sur les différents systèmes d’Apple :

Aperçu

Voici à quoi ressemble Xcode avec SwiftUI. Sur la partie gauche, tu retrouveras une structure qui gère la mise en forme de la vue. C’est précisément dans la variable body que l’on construit notre interface. Ensuite, en dessous de cette structure, tu peux observer la #Preview, c’est ce qui permet d’afficher l’écran de droite et de prévisualiser ton interface.

Les composants

SwiftUI, c’est comme jouer avec des pièces de Lego, tu prends des composants, tu les assembles, et voilà, ton interface prend forme ! Un composant, c’est juste une petite pièce de ton puzzle d’interface, comme un texte, une image, une forme géométrique, ou même un bouton.

SwiftUI te file une tonne de composants prêts à l’emploi, mais si ça ne suffit pas, tu peux aussi fabriquer tes propres pièces sur mesure. Et t’inquiète, on va voir tout ça pendant la formation.

Dernière chose importante : dans SwiftUI, tout est considéré comme une vue. Ça signifie qu’un composant est une vue à part entière, mais qu’une composition de plusieurs composants est également une vue. Cette philosophie te paraîtra rapidement intuitive au fil des cours.

Les modificateur

Les modificateurs servent à modifier tes composants, changer la couleur d’un texte, agrandir un rectangle, ou encore ajouter une ombre sous une image. Tout comme les composants, il existe de nombreux modificateurs par défaut, et tu pourras également en créer sur mesure.

Xcode et Swift UI

Jusqu’ici, on a exploré le playground d’Xcode, un outil essentiel pour maîtriser les bases de Swift en natif. Mais ce n’est que le début. Maintenant, on passe à la vitesse supérieure, créer de vraies applications en SwiftUI. Je te propose une visite guidée pour t’accompagner dans la création de ton tout premier projet SwiftUI !

Créer un projet

Quand tu lances Xcode, ce panneau pop. Pour créer un projet en SwiftUI, rends-toi directement sur “Create New Project…”.

Choisir un type d’application

Ensuite, tu verras un nouveau panneau qui te permettra de sélectionner le système sur lequel tu veux créer ton projet, ainsi que le type d’application. Cette formation étant uniquement dédiée aux projets d’applications iOS, pense bien à sélectionner l’onglet iOS et le type d’application App. Une fois que c’est fait, clique sur Next.

Option du projet

Ensuite, tu trouveras une sélection d’options et de champs à remplir. C’est ici que tu vas donner un nom à ton projet dans le champ “Product Name”. Tu peux également sélectionner une Team (c’est ce qui permettra à Apple de signer ton application, c’est lié à ton Apple ID — optionnel pour l’instant).

Dans “Organization Identifier”, tu vas indiquer le nom utilisé pour générer le Bundle Identifier, qui est le nom unique de ton application (à ne pas confondre avec le nom du projet).

Pour l’Interface, tu as le choix entre SwiftUI et Storyboard (utilisé pour créer un projet sous UIKit, un autre framework d’Apple). Bien évidemment, tu laisses SwiftUI sélectionné.

Le Language reste sur Swift par défaut. Enfin, pense à mettre Testing System et Storage sur None (autrement, des fichiers inutiles pour l’instant seront générés dans ton projet). On abordera ces aspects dans une formation plus avancée.

Une fois que tu as tout rempli, tu peux cliquer sur Next.

Sélection du répertoire

Pour terminer, cette fenêtre te permet de choisir l’emplacement où enregistrer ton projet sur ton ordinateur. (Prends l’habitude de t’organiser, par exemple en créant un dossier iOS sur ton bureau pour y regrouper tous tes projets.)

Pense également à décocher “Create Git repository on my Mac”, surtout si tu ne maîtrises pas encore Git. On découvrira cet outil dans une future formation. Une fois tout prêt, clique sur “Create” pour créer ton projet.

Xcode

Il est là, ton premier projet est créé, félicitations !  Il est temps de passer à notre visite guidée.

Panneau de gauche

Pour commencer, sur le panneau de gauche, tu retrouveras l’arborescence de ton projet. Par défaut, trois fichiers principaux s’y trouvent :

→ ContentView C’est une interface par défaut mise à ta disposition pour débuter. C’est ici que nous allons commencer à coder.

→ Assets  C’est l’endroit où tu stockeras tes ressources, comme les images, les fichiers audio, les vidéos ou encore les couleurs personnalisées.

→ [NomDeTonProjet]App (par exemple, MyFirstAppApp)  Ce fichier représente la racine de ton projet. Pour le moment, on n’y touche pas !

Zone de code

C’est ici que tu vas coder  ! Tu peux observer le code par défaut, en SwiftUI, les vues (views) sont représentées par des structures. Si la notion de structure n’est pas encore claire pour toi, je te mets un lien vers le cours correspondant. C’est important de maîtriser un minimum cette notion, car on va beaucoup utiliser les structures en SwiftUI.

Une vue SwiftUI adopte un protocole fourni par SwiftUI : View. Ce protocole permet de représenter visuellement tes composants sur ton interface. La construction de ton interface se fait dans la propriété calculée body, qui est obligatoire pour respecter le protocole View.

En bas du fichier, tu trouveras une macro #Preview {Vue à afficher}, qui permet de prévisualiser la vue souhaitée dans le canvas (ou aperçu) situé à droite. Le canvas affiche l’écran que tu es en train de concevoir. Tu peux sélectionner le device de ton choix en bas de l’écran ou encore configurer des options comme le mode clair ou sombre, et bien d’autres.

Listes des composants modificateurs et Symbol SF

En cliquant sur le + en haut à droite de Xcode, tu ouvriras une fenêtre qui liste l’ensemble des composants, modificateurs, SF Symbols, etc. Pour chaque élément, tu trouveras des informations utiles, comme des exemples de code et un lien vers la documentation officielle d’Apple.

Prends le temps de parcourir rapidement ces listes , ça te donnera une bonne idée des outils à ta disposition pour créer tes interfaces.

Sous le +, tu trouveras également une icône avec plusieurs traits, qui ouvre un petit menu te permettant de personnaliser ton environnement de code. Par exemple, tu peux choisir d’afficher ou non ton canvas, activer une minimap pour naviguer facilement dans ton code lorsque tu as beaucoup de lignes, etc.

Simulateur

Et pour terminer ce tour d’horizon de Xcode, parlons du simulateur. C’est une application liée à ton projet qui simule un appareil pour te permettre d’utiliser ton application comme sur un véritable appareil. Par exemple, si tu choisis un iPhone 16 sous iOS 18, tu pourras tester ton application dans des conditions identiques à celles d’un appareil réel, avec les mêmes paramètres.

Le simulateur offre de nombreuses options, que nous aurons l’occasion d’approfondir plus tard.

Tu peux choisir ton device avant de lancer le simulateur. L’option de sélection se trouve en haut, au centre de Xcode. Une fois le device sélectionné, il ne te reste plus qu’à lancer le simulateur en cliquant sur le bouton Play ▶️ en haut à gauche.

Une fois le simulateur lancé, tu peux explorer ton application.