B3 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 ~50min

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 LazyVGrid 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.

Vous devriez avoir ce genre de rendu :

#Ressources

#🔧 Exercice 2 ~20min

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