Une première application iOS avec SwiftUI

Par ybenkhayat, 15 février, 2025
SwiftUI logo

Retour et plan

Dans le dernier blogue, il a été question d’introduire Swift et sa syntaxe, puis comparer Swift à son prédécesseur : Objective-C. Vers la fin de ce blogue, il a aussi été question d’introduire brièvement SwiftUI, et comment celui se compare à UIKit. Étant plus facile et intuitif à utiliser, et plus à l’actualité, nous avions décidé d’en faire le sujet pour le blogue de cette semaine. Nous voilà donc.

Dans le blogue qui suit, nous allons aborder SwiftUI et l’introduire de manière plus poussée. Nous allons d’abord voir comment créer un premier projet sur XCode avec SwiftUI et ensuite voir la structure et syntaxe du code qui vient avec le projet vide par défaut. Le projet créé pour cette démo est disponible dans ce dépôt GitHub.

Création d’un projet avec Xcode

Créer un projet avec Xcode est très simple. Aucune commande n’est requise puisque tout la création et le paramétrage de celle-ci peuvent se faire à l’aide de l’interface graphique de Xcode. Il faut donc simplement suivre les étapes suivantes pour créer un nouveau projet :

  1. Installer et ouvrir Xcode. S’assurer d’avoir installé une version d’iOS pour pouvoir créer un projet pour cette plateforme. D’autres plateformes sont disponibles à installer, comme macOS et watchOS.

  2. Cliquer sur Create New Project… .

  3. Sélectionner une application de type App. D’autres types d’applications sont offertes, comme iMessage App (une application qui serait utilisée dans la messagerie iOS) et Game (le nom est assez explicite).

  4. Ensuite, la page de paramétrage initiale apparait. Dans celle-ci il faut nommer le projet. C’est ici aussi qu’on choisit l’interface SwiftUI. Les autres paramètres peuvent rester par défaut. alt text

  5. Finalement, simplement choisir l’emplacement et le projet sera créé.¹ ²

Lorsque le projet est créé, nous sommes accueillis par cet écran :

alt text

À gauche de l’écran, en haut, il y a une barre qui sert de navigation. L’option sélectionnée est la hiérarchie et juste en bas, on peut effectivement voir celle-ci. Les autres options incluent le contrôleur de source (pour voir les changements apportés et s’ils sont committed ou non) et la recherche globale. Ensuite, au milieu, il y a l’éditeur de code et à gauche, un preview canvas – un aperçu de quoi l’application ressemblerait si ça roulait dans un iPhone ².

ContentView

Revenons à l’éditeur de texte. Dans celui-ci, nous sommes présentés avec le code du fichier ContentView.swift :

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

La première ligne est l’importation du framework SwiftUI. Cela nous permettra entre autres d’utiliser ses éléments. Ensuite, nous avons struct ContentView: View, donc une strcuture nommée ContentView, qui implémente le protocol (protocol est l’équivalent de la notion d’interface avec quelques différences comme la possibilité de spécifier les propriétés qui doivent être implémentées) View ³.

Parenthèse : structure vs classe

Une brève, mais importante parenthèse ; une structure est différente d’une classe. Une structure en Swift est de type valeur alors que des classes sont de type référence. Voici une visualisation de cela inspirée par un exemple de Stack Overflow qui illustre cela ⁴:

Classe (class) :
class Originale {
    var nom: String
    init(nom: String) {
        self.nom = nom
    }
}

var varA = Originale(nom: "Bob")
var varB = varA
classeB.nom = "Fred"

print(varA.nom) // "Fred"
print(varB.nom) // "Fred"

Dans cette exemple, nous avons la classe Originale. Cette classe a un attribut nom de type String. On a ensuite deux variables : varA et varB. Lorsque varA est affectée à varB, varB prend en valeur la référence et non la copie de la même instance de Originale de varA. Ces deux classes référencient ainsi la même instance. Si l'on change le nom de varB à Fred : varB.nom = "Fred", le nom de varA devient Fred aussi ⁴ ⁵.

Structure (struct) :
struct Originale {
    var nom: String
    init(nom: String) {
        self.nom = nom
    }
}

var varA = Originale(nom: "Bob")
var varB = varA
bStruct.nom = "Fred"

println(varA.nom) // "Bob"
println(varB.nom) // "Fred"

Dans cet exemple, puisque Originale est une structure plutôt qu'une classe, lorsque varA est affectée à varB, varB prend en valeur la copie de varA. Ils ont donc simplement la même valeur, qui leur appartient. Si l'on change le nom de varB à Fred : varB.nom = "Fred", le nom de varA reste Bob ⁴ ⁵.

Revenons au code de ContentView. Puisqu’on implémente le protocol View, on doit implémenter la valeur body de type View. L’ajout du some veut seulement dire qu’on ne spécifie quel type de vue ⁶.

En bas, on trouve VStack, un élément de l’importation de SwiftUI, qui est un type de conteneur permettant l’affichage par colonne verticale. Celui-ci contient deux enfants : un composant Image et un autre de type Text. La dernière ligne permet simplement d’afficher l’aperçu de la vue ContentView ⁷.

BlogueSwiftUIApp

Ensuite, nous avons le fichier BlogueSwiftUIApp.swift, qui est le fichier Main du projet, donc là où l’application s’exécute. Nous retrouvons le code suivant dans ce fichier :

import SwiftUI

@main
struct BlogueSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

L’annotation @main sert justement à désigner le point d’entrée de l’exécution de l’application. Le système appelle donc la méthode main() lorsque cette annotation est présente ⁸.

Encore une fois, nous retrouvons une structure nommée BlogueSwiftUIApp, mais qui cette fois-ci implémente le protocol App. Juste en bas, nous retrouvons la variable body qui est dans ce cas une scène et WindowGroup à l’intérieur. WindowGroup est aussi une scène qui représente plusieurs fenêtres d’affichage. C’est ce qui permet d’organiser et de gérer toutes les fenêtres que l’application peut afficher ⁹.

1 : Developer Apple, « Hello, SwiftUI », s.d., https://developer.apple.com/tutorials/develop-in-swift/hello-swiftui

2 : Swift, « Build an iOS app with SwiftUI », s.d., https://www.swift.org/getting-started/swiftui/

3 : Thomas, SCHAR, « Compare Protocol in Swift vs Interface in Java », dans Stack Overflow, 16 juin 2015, https://stackoverflow.com/questions/30859334/compare-protocol-in-swift-vs-interface-in-java

4 : Alex, WAYNE, « structure vs class in swift language », dans Stack Overflow, 14 juin 2014, https://stackoverflow.com/questions/24217586/structure-vs-class-in-swift-language

5 : Swift, « Structures and Classes », s.d., https://docs.swift.org/swift-book/documentation/the-swift-programming-language/classesandstructures/

6 : Paul HUDSON, « Why does SwiftUI use “some View” for its view type? », dans Hacking with Swift, 14 octobre 2023, https://www.hackingwithswift.com/books/ios-swiftui/why-does-swiftui-use-some-view-for-its-view-type

7 : Developer Apple, « VStack », s.d., https://developer.apple.com/documentation/swiftui/vstack

8 : Developer Apple, « main() », s.d., https://developer.apple.com/documentation/swiftui/app/main()

9 : Developer Apple, « WindowGroup », s.d., https://developer.apple.com/documentation/swiftui/windowgroup

Étiquettes

Commentaires