M2 Développement Natif iOS - Anthony Da Cruz

#Grid

Nous allons créer une grille d’image comme sur la maquette, pour cela il va nous falloir une liste d’image, puis faire en sorte que la liste soit affichée en grille.

#Liste d’image d’exemple

let imageURLs: [String] = [
    "https://images.unsplash.com/photo-1683009427666-340595e57e43?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MXwxfGFsbHwxfHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1563473213013-de2a0133c100?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHwyfHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1490349368154-73de9c9bc37c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHwzfHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1495379572396-5f27a279ee91?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHw0fHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1560850038-f95de6e715b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHw1fHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1695653422715-991ec3a0db7a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MXwxfGFsbHw2fHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1547327132-5d20850c62b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHw3fHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHw4fHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1475694867812-f82b8696d610?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHw5fHx8fHx8MXx8MTcwMzc1OTU1MXw&ixlib=rb-4.0.3&q=80&w=1080",
    "https://images.unsplash.com/photo-1558816280-dee9521ff364?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfGFsbHwxMHx8fHx8fDF8fDE3MDM3NTk1NTF8&ixlib=rb-4.0.3&q=80&w=1080"
]

#🔧 Exercice 1 ~25min

Utilisez LazyVGrid pour afficher la liste d’image en grille. Avec 2 colonnes flexibles, de taille minimum 150, en fonction de votre émulateur vous pouvez baisser cette valeur.

  1. Créez la grille en utilisant un ForEach qui boucle sur la liste d’image
  2. Utilisez LazyVGrid et AsyncImage pour afficher la grille d’images depuis la liste d’URLs fournie.
    • Les images feront 150px de hauteur
    • Utilisez le modifier frame pour cela. -> .frame(height: 150)
    • L’espacement de la grille sera de 8px
  3. Englobez votre ForEach dans un ScrollView pour pouvoir scroller dans la grille
  • Expliquez ce qu’est LazyVGrid et pourquoi on l’utilise.
  • Expliquez les différents types de colonnes et pourquoi on utilise flexible ici.
  • Votre grille ne doit pas être très jolie, expliquez pourquoi les images prennent toute la largeur de l’écran.

Voici ce que vous devriez obtenir :

#Ressources

#🔧 Exercice 2 ~20min

Améliorons notre grille

La grille ne se présente pas vraiment comme une grille, aussi il faut que nous contraignons nos images à prendre la place qui leur est attribué par la grille.

👉 En SwiftUI c’est la View qui décide de sa taille, et non le parent qui décide de la taille de ses enfants. Aussi il faut que nous forcions la taille de nos images, sans pour autant les déformer, ni définir une taille fixe qui rendrait notre application très peu responsive.

Voici un modifier qui permet de faire cela :

extension Image {
    func centerCropped() -> some View {
        GeometryReader { geo in
            self
            .resizable()
            .scaledToFill()
            .frame(width: geo.size.width, height: geo.size.height)
            .clipped()
        }
    }
}
  • Expliquer ce que fait ce modifier ligne par ligne
  • Utiliser ce modifier sur votre AsyncImage pour que les images prennent toute la place qui leur est attribué par la grille.

Vous devriez avoir cela à la fin de cette étape

#🔧 Exercice 2 ~10min

Nous allons styliser notre liste pour que cela ressemble plus à la maquette.

🔧 Réalisez le même design que la maquette ci-dessus.

  1. Ajouter des corners de 12px aux images
  2. Ajouter un padding horizontal à la ScrollView
  3. Faites en sorte que la ScrollView aient des coins arrondis de 12px, les images ne doivent pas dépasser de la ScrollView (.clipShape(...))
  4. Ajouter une NavigationStack avec un titre Feed

#Conclusion

Parfait nous avons notre grille d’image, fonctionnelle, qui sera la base de notre UI.

Maintenant, comment récupérer les images dynamiquement depuis l’API Unsplash pour les afficher dans notre grille ?

1-Projet3-Content-Negociation