Ajouter des Interactions Utilisateur avec SwiftUI

Introduction

Dans mon dernier article, nous avons créé une première application iOS Hello World avec Xcode et SwiftUI. Maintenant, nous allons aller plus loin en ajoutant des interactions utilisateur pour rendre l'application plus dynamique et interactive.

SwiftUI offre de nombreuses fonctionnalités pour gérer l'interactivité, notamment les boutons, les text fields, les toggle switches et les gestes. Dans cet article, nous allons explorer ces éléments et les intégrer à une application simple.

1. Création d’un Nouveau Projet Xcode

Pour ce projet, nous allons créer une application où l’utilisateur pourra changer un message en appuyant sur un bouton.

• Ouvrir Xcode et cliquer sur "Create a new Xcode project".
• Choisir le template "App" sous la section iOS.
• Nommer le projet "InteractiveApp" et utiliser SwiftUI comme interface utilisateur.
• Cliquer sur "Create" pour générer le projet.

2. Ajouter un Bouton pour Modifier un Texte

Nous allons modifier ContentView.swift pour ajouter un @State qui stocke le texte et un bouton qui change ce texte lorsqu’il est pressé.

import SwiftUI

struct ContentView: View {
    @State private var message = "Bonjour, SwiftUI !"
    
    var body: some View {
        VStack {
            Text(message)
                .font(.title)
                .padding()
            
            Button("Changer le message") {
                message = "Bienvenue dans SwiftUI !"
            }
            .buttonStyle(.borderedProminent)
            .padding()
        }
    }
}

Explication :

• Le @State permet à SwiftUI de suivre les modifications de la variable message.
• Quand l’utilisateur appuie sur le bouton, message est mis à jour et le texte affiché change immédiatement.

3. Ajouter un Champ de Texte (TextField)

Ajoutons maintenant un champ de texte permettant à l'utilisateur de saisir son propre message.

import SwiftUI

struct ContentView: View {
    @State private var message = ""
    
    var body: some View {
        VStack {
            Text("Votre message :")
                .font(.headline)
            
            TextField("Entrez un texte ici", text: $message)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            Text("Vous avez écrit : \(message)")
                .padding()
        }
        .padding()
    }
}

Explication :

• L’utilisateur entre un texte dans le TextField.
• Ce texte est affiché dynamiquement en dessous grâce à la liaison avec @State.

4. Ajouter un Switch (Toggle) pour Modifier une Option

Ajoutons maintenant un Toggle switch qui permettra d’activer ou désactiver une option.

import SwiftUI

struct ContentView: View {
    @State private var isDarkMode = false
    
    var body: some View {
        VStack {
            Toggle("Mode sombre", isOn: $isDarkMode)
                .padding()
            
            Text(isDarkMode ? "Mode sombre activé" : "Mode clair activé")
                .padding()
        }
    }
}

Explication :

• Un Toggle permet de basculer entre deux états (true ou false).
• Lorsqu’on appuie dessus, le texte change en fonction de l’état.

5. Ajouter un Gestes de Tap sur une Image

SwiftUI permet aussi d’ajouter des gestes comme le tap, le swipe ou le drag. Ajoutons un tap gesture à une image.

import SwiftUI

struct ContentView: View {
    @State private var isLiked = false
    
    var body: some View {
        VStack {
            Image(systemName: isLiked ? "heart.fill" : "heart")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(isLiked ? .red : .gray)
                .onTapGesture {
                    isLiked.toggle()
                }
                .padding()
        }
    }
}

Explication :

• L’image change entre un cœur plein et un cœur vide lorsqu’on appuie dessus.
• Le .onTapGesture détecte l’interaction et change l’état de isLiked.

6. Tester l’Application avec le Simulateur

Pour voir l'application en action :

• Sélectionner un simulateur (ex : iPhone 15 Pro).
• Cliquer sur ▶️ "Run" pour compiler et exécuter l’application.
• Tester chaque interaction (bouton, champ de texte, switch, tap sur l’image).

7. Améliorations Possibles

• Ajout d’animations : Ajouter une transition fluide lors du changement d’état.
• Personnalisation de l’interface : Modifier les couleurs, polices et styles des éléments.
• Stockage des préférences utilisateur : Utiliser UserDefaults ou Core Data pour conserver les paramètres après la fermeture de l’app.

Conclusion

Nous avons exploré différentes façons d’ajouter des interactions utilisateur avec SwiftUI : boutons, champs de texte, switches et gestes. Ces éléments permettent de rendre les applications plus dynamiques et engageantes.

Dans mon prochain article, nous verrons comment stocker des données utilisateur avec Core Data, afin de sauvegarder les informations même après la fermeture de l’application.

Références

• APPLE. Apple Developer - Ressources pour développeurs [en ligne]. Apple, 2024. Disponible sur : https://developer.apple.com.
• APPLE. Créer un projet Xcode pour une application [en ligne]. Apple Developer, 2024. Disponible sur : https://developer.apple.com/documentation/xcode/creating-an-xcode-project-for-an-app.