Clone d’Instagram utilisant SwiftUI et GraphQL – HomeView

Aujourd’hui, dans la quatrième partie de notre clone d’Instagram avec GraphQL, nous allons continuer à apprendre quelques notions de SwiftUI, en construisant notre vue Home.

Dans nos articles précédents, nous avons appris comment inscrire un utilisateur et comment se connecter à un utilisateur et nous avons créé la vue Profil avec les interfaces utilisateur respectives dans notre clone d’Instagram. Aujourd’hui, nous allons réutiliser une partie de ce code et créer quelque chose de similaire à un UIScrollView avec beaucoup de contenu.

Attachez vos ceintures et c’est parti !

Pour un meilleur apprentissage, téléchargez le projet iOS Instagram Clone avec le code source.

Vous voulez commencer rapidement ?

Clonez cette application depuis notre Hub et commencez à l’utiliser sans aucun problème !

Ce que nous allons construire exactement

Nous allons construire la vue suivante :

Comme nous l’avons vu précédemment, SwiftUI facilite la construction d’interfaces complexes car il est possible de réutiliser de nombreux composants très facilement. Le mot clé ici est “réutiliser”.

Vous vous souvenez que nous avons déjà codé la barre inférieure ? Nous allons la réutiliser pour ceci. Tout le reste est nouveau.

Je ne reviendrai pas sur les VStacks et les HStacks, donc si vous avez manqué cette partie, revenez ici.

Nos composants d’interface utilisateur

Cet écran sera composé essentiellement de quatre éléments :

• La barre supérieure (avec la caméra, la chaîne Back4Gram, l’icône de la maison, et l’icône de l’avion en papier)
• La barre d’historique (avec les icônes des historiques)
• La vue détaillée de la chronologie (avec les messages actuels)
• La barre inférieure (que nous réutiliserons)

Commençons à les construire !

Barre supérieure

La barre supérieure est composée de cinq éléments :

• Bouton de l’appareil photo
• Chaîne Back4Gram
• Espace
• Bouton de la maison
• Bouton de l’avion en papier

Ajoutez les icônes pour les boutons comme vous l’avez déjà appris, et commençons à coder.

Créez votre fichier HomeView.swift et ajoutez un GeometryReader pour que nous puissions tout redimensionner correctement :

Et comme dans le tutoriel précédent, ajoutons un VStack car tout sera affiché sur un axe vertical :

Notre barre supérieure sera une conjonction de composants alignés horizontalement, ajoutons donc la HStack pour la créer :

Enfin, ajoutons les contrôles que nous utiliserons :

De quoi ça a l’air ?

Nous sommes sur la bonne voie !

Parlons maintenant un peu de la

barre d’historique

La barre d’historique est elle-même un composant complexe. Elle ressemble à un UIScrollView de l’ancien UIKit, mais à l’intérieur, nous avons un contrôle composé d’une image et d’un texte en dessous (alias VStack). Créons cette structure :

Pour l’intégrer à notre VStack principale, il suffit d’ajouter le ScrollView. Et pour que ce soit plus joli, faisons en sorte qu’il ne défile qu’horizontalement et cachons les indicateurs de défilement :

et enfin, ajoutons-le à notre VStack principale :

Vérification de l’apparence :

Maintenant, allons de l’avant et ajoutons d’abord notre…

Barre inférieure

Maintenant, profitons de toute cette réutilisation. Il suffit d’ajouter le fichier BottomBar.swift dans notre code :

Et notre code complet :

N’était-ce pas facile ? De quoi ça a l’air ?

Sweeft !

Ajouter un peu de complexité

La partie la plus complexe de cette vue sera la vue détaillée de la ligne de temps.

Pour rester cohérent avec ce que nous avons fait dans notre TimelineView, créons un nouveau fichier nommé TimlineDetailView.swift et créons-y une nouvelle structure qui contiendra les données tout comme dans notre TimelineView.

Rappelez-vous que nous avons déjà déclaré notre structure Preview dans notre TimelineView, alors réutilisons-la également.

La structure recevra une prévisualisation afin que nous puissions récupérer l’imageUrl plus tard :

Une fois cela fait, ajoutons la vue elle-même :

Le contenu principal sera également dans une VStack :

Et cette VStack aura quatre composants :

• Une HStack avec le logo, les textes et le bouton à trois points
• L’image de l’article
• Une HStack le bouton “cœur”, le bouton “commentaire”, le bouton “avion en papier” et le bouton “drapeau”.
• Une VStack contenant les textes “Aimé par…” et “Voir tous les commentaires””.

Commençons donc par ajouter la première HStack :

Et ajoutons les contrôles à l’intérieur de celle-ci :

Puis l’image :

Notre deuxième HStack avec tous les boutons :

Et ses contrôles :

Et enfin, nos textes VStack :

Maintenant, à l’intérieur de notre TimelineDetailView, codons en dur quelques Previews :

Et enfin, bouclons l’ajout de nos PreviewDetailViews à un ScrollView :

Enfin, ajoutons-le à notre HomeView :

Enfin, voyons les résultats :

Comme c’est cool !

Conclusion

La réutilisation est essentielle dans SwiftUI.

Aujourd’hui, vous avez appris à réutiliser les structures BottomView et Preview de nos articles précédents.

Il est temps de passer à la fonctionnalité et j’ai hâte d’y être.

Restez à l’écoute !

Référence

• La première partie de cette série est Instagram Clone App.
• La partie 2 est Swift Instagram Clone.
• La partie 3 est Profil Instagram.
• La partie 4 est la page d’accueil d’Instagram.
• Téléchargez un projet iOS Instagram Clone avec le code source et commencez à utiliser Back4App.

Inscrivez-vous maintenant à Back4App et commencez à construire votre application Instagram Clone.