Dernier né de la création Apple, SwiftUI est un framework puissant qui permet de développer des applications sur différentes interfaces. Tu n’as que l’embarras du choix : iOS, iPadOS, macOS, watchOS. Et si d’aventure tu n’arrivais pas à choisir, tu peux tout choisir d’un coup car SwiftUI peut être utilisé pour le multiplateforme (Apple, of course).
En gros, SwiftUI va te permettre de créer des interfaces graphiques en utilisant des vues (views). Elles vont ensuite s’organiser les unes dans les autres. Tu peux modifier l’apparence et le comportement de ces vues en utilisant des modificateurs (modifiers) qui sont super simples à utiliser.
SwiftUI est entièrement compatible avec les dernières fonctionnalités d’iOS, macOS et watchOS. Et si t’es pas convaincu(e), sache que SwiftUI est également plus rapide que UIKit ou AppKit pour dessiner les interfaces et qu’il nécessite moins de code pour obtenir le même résultat.
SwiftUI est utilisé de manière déclarative. C’est à dire que nous décrivons à SwiftUI le résultat plutôt que la manière d’y arriver.
Les vues (views) en SwiftUI
Les vues représentent une partie de l’interface utilisateur de l’application. Que dis-je ? C’est le coeur de l’application.
Elles peuvent être des éléments simples comme du texte (Text
), une image (Image
) ou un bouton (Button
), ou des éléments plus complexes comme des listes (List
) ou des formulaires (Form
).
La ContentView
est une vue spéciale qui est la vue principale de ton application. Elle est créée par défaut lorsque tu crées un nouveau projet SwiftUI. C’est le point d’entrée de ton application. Elle peut contenir d’autres vues et est généralement utilisée pour construire l’interface utilisateur de base de ton application.
struct ContentView: View {
var body: some View {
Text("Hello, World !")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Tu as vu, ContentView
est une structure ! C’est à dire qu’elle est conforme au protocole View
et donc doit contenir un body
.
La structure suivante ContentView_Previews
est la structure de prévisualisation, ce qui nous permet de voir en temps réel le résultat de l’application. C’est très pratique car cette preview
nous évite de devoir lancer notre simulateur à tout bout de champ.
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Ensuite, on appelle la vue principale dans notre fichier prinicipal.
Et tada 🎷 voici ta première application mobile :
Bon, en réalité, il va falloir travailler un peu plus que ça. Car pour le moment tu n’as encore rien fait, et ça se voit 🤪
Les modificateurs (modifiers)
Toutes les vues ont une apparence et un comportement par défaut, mais tu peux les personnaliser en utilisant des modificateurs (modifiers). Ils sont donc un moyen de changer facilement l’apparence et le comportement de tes vues.
struct ContentView: View {
var body: some View {
Button("Clique-moi !") {
print("Bonjour, SwiftUI !")
}
.padding() // Ajoute de l'espace autour du bouton
.foregroundColor(.white) // Change la couleur du texte en blanc
.background(Color.yellow) // Couleur du fond jaune
.cornerRadius(10) // Arrondi les angles
}
}
Les modificateurs principaux
Il existe une multitude de modificateurs et faire une liste ne te serait ni utile, ni profitable. En effet, il est toujours préférable de pratiquer pour prendre conscience de l’étendue des possibilités offertes par Swift. Si tu cherches quelque chose de spécifique, il sera bénéfique pour toi d’apprendre à effectuer des recherches efficaces sur Google, car c’est le coeur de notre métier de développeurs.
Néanmoins, voici quelques modifiers qui te seront utiles (je ne suis pas vache) :
.padding()
: ajoute un remplissage autour d’un élément (c’est unpadding
un peu différent de ce qu’on trouve habituellement dans le développement classique, il agit plutôt comme unmargin
).foregroundColor()
: définit la couleur de premier plan (par exemple, la couleur du texte) de la vue.background()
: définit la couleur de fond de la vue.frame(width:height:alignment:)
: positionne la vue dans un cadre de la taille spécifiée.cornerRadius()
: arrondit les coins d’une vue.opacity()
: définit l’opacité.onTapGesture()
: définit une action à effectuer lorsque l’utilisateur appuie sur un élément.rotationEffect()
: fait tourner une vue autout d’un angle donné.animation()
: ajoute une animation à une vue ou à un modificateur
Te voilà donc, tel un magicien explorant les possibilités de changer à ta guise l’apparence de ton application !
En tant que développeur, tu as peut-être, comme beaucoup, un ennemi juré : le CSS 🧙♂️. Alors sache qu’au royaume de Swift, nul besoin de CSS (youpi). Mais tu auras quand même (un peu) besoin de jouer à l’apprenti designer.
Alors, que penses-tu de SwiftUI ? Ne donne t-il pas envie de tout lâcher pour t’y mettre ? Voici le lien officiel de la documentation Apple, si tu as soif d’en apprendre plus.