Image
Image
Format accepté
Le composantImage est compatible avec divers formats d’images couramment utilisés dans le développement d’applications iOS. Voici les formats d’extension d’image principalement supportés :
- PNG C’est le format le plus couramment utilisé pour les images dans les applications iOS, particulièrement pour les icônes et les images qui nécessitent de la transparence.
- JPEG (ou JPG) Ce format est largement utilisé pour les photos. Il est préféré pour les images de grande taille en raison de sa capacité de compression.
Ajouter une image dans un projet
Pour ajouter une image manuellement à ton projet, c’est simple, glisse ton image directement dans les assets, ou bien clique sur le + pour l’importer.
Ici, t’as plusieurs options pour paramétrer ton image. Les slots 1x, 2x, 3x te permettent de définir différentes versions de l’image en fonction des écrans : 1X pour les écrans non-Retina, 2X pour les écrans Retina, et 3X pour les écrans Retina HD. En plus, tu peux personnaliser pas mal de trucs dans les filtres : choisir sur quel type d’appareil ton image sera affichée ou non, adapter ton image pour les modes dark et light, ou même changer l’image selon la localisation de l’utilisateur.
Afficher une image
Pour afficher une image, utilises le composant Image et tu passes juste le nom de ton image en chaîne de caractères.
Image("apple")
Par défaut, le composant Image cherche à occuper tout l’espace dispo dans la vue qui la contient, tout en gardant les proportions de l’image intactes. En gros, sans aucun modificateur, l’image va s’adapter à la taille de son parent tout en conservant son ratio hauteur/largeur.
Adapter l’image .resizable()
Le modificateur.resizable()est là pour te donner un coup de main avec le redimensionnement des images. Par défaut, une Image s’affiche à sa taille d’origine, ce qui peut parfois poser problème si elle est trop grande ou trop petite pour ta mise en page.
Quand tu appliques .resizable() à une Image, tu dis à SwiftUI que tu veux pouvoir redimensionner ton image pour qu’elle s’adapte à l’espace disponible ou aux dimensions spécifiques que tu lui donnes. Par contre, il faut garder en tête que .resizable() seul ne suffit pas à déterminer exactement comment l’image doit être redimensionnée ou quelle doit être sa taille finale. Pour ça, tu devras ajouter d’autres modificateurs pour peaufiner le rendu.
Image("apple")
.resizable()
.frame(width: 200, height: 200)
Adapter l’image .aspecRatio()
Le modificateuraspectRatio est utile pour gérer la taille d’une vue tout en conservant ses proportions. Tu as deux options :
→ .fit l’image s’ajuste à l’espace disponible sans se déformer, même si ça laisse des espaces vides autour.
→ .fill ’image remplit tout l’espace, mais ça peut couper les parties qui dépassent.
Ce modificateur est utile pour afficher tes images de manière flexible et esthétique dans tes interfaces.
Image("ios")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200)
.border(Color.red)
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 200)
.clipped()
.border(Color.red)
Découper une image .clipShape()
Le modificateur .clipShape() est pratique pour transformer l’apparence d’une vue en la découpant selon une forme spécifique. Par exemple, si tu utilises .clipShape(Circle()), tu vas découper ta vue pour qu’elle prenne une forme circulaire, peu importe sa forme d’origine. C’est un moyen simple et efficace de donner un style unique à tes images ou autres vues en les adaptant à la forme que tu veux, comme un cercle, un rectangle avec des coins arrondis, ou toute autre forme personnalisée.
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(Circle())
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(RoundedRectangle(cornerRadius: 20))
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(Capsule())
On peut également customiser des shapes sur mesure grace au protocole Shape. Cette shape custom est accepté par .clipShape comme ici un triangle.
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(TriangleShape())
Placer une ombre sous l’image .shadow()
→.shadow()pour placer une ombre sous ton image
→ color La couleur de l’ombre.
→ radius La taille du floue de l’ombre.
→ x et y Les décalages horizontaux et verticaux de l’ombre par rapport à la vue.
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(Circle())
.shadow(color: .black, radius: 20, x: 0, y: 0)
Colorer l’image .colorMultiply()
.colorMultiply() applique un effet de multiplication de couleur à toute l’image, ce qui peut donner l’impression que l’image est vue à travers un filtre coloré.
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(Circle())
.colorMultiply(.green)
Superposer une vue sur une image .overlay()
.overlay() prend comme argument la vue que tu souhaite superposer et, optionnellement, un alignement (par défaut, c’est au centre). La vue overlay sera rendue par-dessus la vue parent tout en respectant l’alignement spécifié.
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300)
.clipShape(Circle())
.overlay(
ZStack{
Circle()
.frame(width: 100, height:100)
Image(systemName: "iphone")
.font(.system(size: 40))
.bold()
.foregroundStyle(.white)
},
alignment: .topLeading
)
Accessibilité .accessibilityLabel()
.accessibilityLabel(Text) permet de fournir une étiquette descriptive pour une vue, qui est lue par VoiceOver
Image("apple")
.resizable()
.frame(width: 300, height: 200)
.accessibilityLabel(Text("Logo d'Apple"))
Découper une image .mask()
Le modificateur .mask() te permet de contrôler quelles parties d’une vue seront visibles en appliquant une autre vue comme masque. En gros, quand tu utilises .mask(), seules les parties de la vue originale qui se trouvent sous les zones opaques du masque seront affichées. Les parties du masque qui sont transparentes, elles, masqueront les parties correspondantes de la vue sous-jacente.
struct MaskView: View {
var body: some View {
Image("ios")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 200)
.mask(
VStack {
HStack {
Circle()
RoundedRectangle(cornerRadius: 25)
}
})
}
}
Tips
Importer des images dans ton projet ne se fait pas à la légère. Il est important de récupérer des images de qualité tout en veillant à leur poids. Un visuel médiocre, c’est dommage pour l’expérience utilisateur, mais ce qui nous importe le plus en tant que développeurs, c’est d’importer des images les plus légères possible.
Évite l’erreur classique d’aller sur Unsplash, de télécharger la première image venue, et de l’ajouter directement à ton application. Une photo en 3000×4000 avec un poids de 3 Mo, c’est beaucoup trop lourd pour une app mobile.
Pour optimiser tes images, utilise des outils en ligne comme iloveimg, qui te permettront de recadrer, redimensionner et compresser tes fichiers. Rappelle-toi que les images dans une app mobile n’ont pas besoin d’être en très haute résolution, ce qui réduit leur taille et améliore les performances de ton application.
Tips
Importer des images dans ton projet ne se fait pas à la légère. Il est important de récupérer des images de qualité tout en veillant à leur poids. Un visuel médiocre, c’est dommage pour l’expérience utilisateur, mais ce qui nous importe le plus en tant que développeurs, c’est d’importer des images les plus légères possible.
Évite l’erreur classique d’aller sur Unsplash, de télécharger la première image venue, et de l’ajouter directement à ton application. Une photo en 3000×4000 avec un poids de 3 Mo, c’est beaucoup trop lourd pour une app mobile.
Pour optimiser tes images, utilise des outils en ligne comme iloveimg, qui te permettront de recadrer, redimensionner et compresser tes fichiers. Rappelle-toi que les images dans une app mobile n’ont pas besoin d’être en très haute résolution, ce qui réduit leur taille et améliore les performances de ton application.