Image(SystemName)

Image(SystemName)

Qu’est-ce qu’une image système ?

Une image système est une icône prédéfinie fournie directement par le système d’exploitation. Ces icônes sont pratiques pour représenter des actions, des états ou des types de données dans une application. Elles sont conçues pour s’intégrer parfaitement dans l’interface utilisateur et sont disponibles dans toutes les tailles et résolutions nécessaires pour les différents appareils sous iOS, macOS, watchOS et tvOS.

En utilisant des images système, tu bénéficies d’icônes qui s’adaptent automatiquement aux différents thèmes (clair/sombre) et aux résolutions des appareils.

SF Symbols

Apple fournit une collection d’icônes optimisées appelée SF Symbols, qui peut être utilisée directement dans les applications SwiftUI. Ces symboles sont conçus pour s’harmoniser avec la typographie d’Apple et peuvent être ajustés en poids, en échelle, et en design.

sf-symbols

La bibliothèque de SF Symbols est intégrée directement dans Xcode. Pour y accéder, c’est très simple, clique sur le + en haut à gauche de ton éditeur, puis sélectionne l’icône en forme d’étoile. Comme illustré sur le screen ci-dessous, tu auras accès à une vaste collection d’icônes prêtes à l’emploi pour tes projets.

Utiliser des images système

Pour utiliser une image système en SwiftUI, tu dois utiliser le composant Image accompagné de la propriété systemName. Cette propriété prend le nom de l’icône système que tu veux afficher en argument.

Image(systemName: "swift")

Personnalisation

Tu peux personnaliser une image système en modifiant sa couleur, sa taille ou son poids. Comme les valeurs de systemName sont des chaînes de caractères (String), tu peux utiliser les mêmes modificateurs que pour le composant Text(), comme .font(), .foregroundStyle(), et .fontWeight().

Image(systemName: "tortoise")
	.font(.system(size: 80))
	.fontWeight(.black)
	.foregroundStyle(.green)

Variante de couleurs .symbolRenderingMode()

Ce modificateur permet de spécifier le style de rendu d’une icône SF Symbol. Ça affecte la manière dont l’icône est colorée. Par exemple, une icône peut être rendue en monochrome, en hiérarchie de couleurs, ou en palette.

Image(systemName: "basketball.circle.fill")
      .foregroundColor(.orange)
Image(systemName: "basketball.circle.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(.orange)
Image(systemName: "basketball.circle.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(Color.black, Color.orange)

Couleur variable variableValue

On peut attribuer une variable directement dans les attribut du composant Image, variableValue: ca permet de donner du dynamisme aux SF Symbols.

struct MusicView: View {
    @State var progress: Double = 0
    
    var body: some View {
        ZStack {
            Color.black
            VStack {
                Image(systemName: "waveform.badge.mic", variableValue: progress)
                    .foregroundStyle(Color.white, Color.pink)
                    .font(.system(size: 100))
                Slider(value: $progress, in: 0...1)
            }
        }
        .ignoresSafeArea()
    }
}

Accessibilité .accessibilityLabel()

Apple recommande d’ajouter une étiquette d’accessibilité aux images système pour aider les utilisateurs utilisant des lecteurs d’écran (VoiceOver). Utilise .accessibilityLabel() pour décrire la fonction de l’image.

Image(systemName: "swift")
  .font(.system(size: 80))
  .fontWeight(.black)
  .foregroundStyle(.orange)
  .accessibilityLabel(Text("Logo de Swift"))

Animation .symbolEffect()

Depuis iOS 17, les symboles SF peuvent s’animer, et c’est carrément stylé !

On a sept animations intégrées que tu peux coller à n’importe quel symbole SF : rebond, impulsion, couleur variable, échelle, apparition, disparition, remplacement.

Ces animations sont classées en quatre types de comportements :

→ Discrete l’animation se joue une fois et puis c’est terminé.

→ Indefinite l’animation tourne en boucle jusqu’à ce que tu la stoppes.

→ Transition on anime un symbole pour le faire apparaître ou disparaître.

→ Content Transition pour animer le remplacement d’un symbole par un autre.

Discrete

struct ImageSFAnimateView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Image(systemName: "target")
                 .font(.system(size: 70))
                 .foregroundStyle(.orange)
                .symbolEffect(
                    .bounce,
                    value: count
                )
            Button("GO !") {
                count += 1
            }
            .foregroundStyle(.white)
            .fontWeight(.black)
            .padding(.top, 20)
        }
    }
}

Indefinite

struct ImageSFAnimateView: View {
    @State private var animationIsActive = false

    var body: some View {
        VStack {
            Image(systemName: "chart.bar.fill")
                .font(.system(size: 70))
                .foregroundStyle(.orange)
                .symbolEffect(
                    .variableColor,
                    isActive: animationIsActive
                )
            Button("Go !") {
                animationIsActive.toggle()
            }
            .foregroundStyle(.white)
            .fontWeight(.black)
            .padding(.top, 20)
        }
     }
}

Transition

struct ImageSFAnimateView: View {
    @State private var symbolIsHidden = true
 
    var body: some View {
        VStack {
            Spacer()
            if !symbolIsHidden {
                Image(systemName: "square.3.layers.3d")
                    .font(.system(size: 70))
                    .foregroundStyle(.orange)
                    .transition(.symbolEffect(.appear))
            }
            Spacer()
            Button("Go !") {
                symbolIsHidden.toggle()
            }
            .fontWeight(.black)
            .foregroundStyle(.white)
        }
    }
}

Content Transition

struct ImageSFAnimateView: View {
    @State private var brand = false
    private var buttonTitle: String {
        return brand ? "Xbox" : "Play-Station"
    }
    
    var body: some View {
        VStack {
            Button {
                brand.toggle()
            } label: {
                Label(buttonTitle, systemImage: !brand ? "playstation.logo" : "xbox.logo")
                    .foregroundColor(brand ? .green : .blue)
                    .fontWeight(.semibold)
            }
            .contentTransition(.symbolEffect(.replace))
        }
        .font(.largeTitle)
    }
}