Un clone d’Instagram utilisant SwiftUI et GraphQL – ProfileView
Aujourd’hui, dans la troisième partie de notre clone d’Instagram avec GraphQL, nous allons approfondir SwiftUI, en construisant notre vue Profil.
Nous allons apprendre à réutiliser les structures dans SwiftUI et discuter de quelques contrôles : VStack, HStack, GeometryReader, Text, Button, Spacer, Image, Divider entre autres.
Dans nos articles précédents, nous avons appris à inscrire un utilisateur et à le connecter, avec les interfaces utilisateur respectives dans notre clone d’Instagram. Aujourd’hui, nous allons rendre les choses beaucoup plus agréables.
Attachez vos ceintures et c’est parti !
Pour un meilleur apprentissage, téléchargez le projet iOS Instagram Clone avec le code source.
Contents
- 1 Vous voulez commencer rapidement ?
- 2 Ce que nous allons construire exactement
- 3 HStack, Vstack, Zstack quoi ?
- 4 Réutilisation
- 5 Création de notre vue Profil
- 6 Deuxième HStack
- 7 Ajout du bouton Modifier le profil et du séparateur
- 8 Mocker notre ligne de temps
- 9 Vue du bas
- 10
- 11 Et enfin…
- 12 Conclusion
- 13 Référence
- 14 Quel est le point positif de SwiftUI ?
- 15 Qu’est-ce que Hstack, Vstack et Zstack ?
- 16 Quelle est la meilleure fonctionnalité de SwiftUI ?
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 :
SwiftUI rend vraiment facile la construction d’interfaces aussi complexes car vous pouvez réutiliser beaucoup de composants très facilement et directement.
La seule chose est que nous devons apprendre à créer ces composants réutilisables. Cette vue unique est en fait une combinaison de plusieurs vues qui s’intègrent dans un résultat final.
Voici une liste simplifiée des composants :
Où :
- VStack
- Hstack
- Contrôles réels (boutons, séparateurs, etc.)
HStack, Vstack, Zstack quoi ?
SwiftUI construit ses interfaces utilisateur en alignant les vues verticalement à l’aide de VStack (Vertical Stack) et horizontalement à l’aide de HStack (Horizontal Stack) et en superposant les vues à l’aide de Zstack (Z comme dans z-index).
Chaque fois que vous avez besoin d’une vue sous une autre, vous devez utiliser une VStack.
Chaque fois que vous avez besoin d’une vue à côté d’une autre, vous devez utiliser une HStack.
Chaque fois qu’une vue doit être superposée à une autre, vous devez utiliser une ZStack.
Comme notre vue principale sera composée de plusieurs vues placées horizontalement les unes sous les autres, nous allons tout contenir dans la VStack principale et commencer à partir de là, mais il y a une autre chose que nous devrons utiliser pour occuper tout l’écran : le GeometryReader (lecteur de géométrie).
Il nous permet de tout rendre en fonction de sa taille et de ses coordonnées (GeometryReader).
Réutilisation
La réutilisation est l’une des beautés de SwiftUI, car nous pouvons créer des contrôles complexes et les réutiliser partout où c’est nécessaire.
Pour cette application, il y a principalement deux composants que nous réutiliserons dans différentes vues : la ligne de temps et la barre inférieure :
Pour cette raison, nous allons créer ces codes d’interface utilisateur séparément afin de mieux les organiser. Tous les autres codes d’interface utilisateur spécifiques à une vue peuvent rester dans le fichier de code de cette vue.
Commençons donc…
Création de notre vue Profil
Ajoutez un nouveau fichier SwiftUI et nommez-le ProfileView.swift.
Comme nous allons aligner des composants pour remplir l’écran, commençons par ajouter un GeometryReader afin de nous assurer que tous les contrôles à l’intérieur utiliseront sa taille et ses coordonnées :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
}
}
}
Maintenant, notre vue sera intégrée dans une VStack principale qui contiendra tous nos contrôles, alors ajoutons-la aussi
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack{
}
}
}
}
Notre toute première “ligne” de contrôles sera celle du haut :
Ce qui ressemble à une simple ligne de contrôles est en fait un ensemble de contrôles :
- le texte “nom d’utilisateur
- la petite flèche pointant vers le bas à côté
- un espaceur pour remplir l’espace entre cette petite flèche et le contrôle suivant
- un bouton Hamburger sur la droite
Nous utiliserons des icônes pour les boutons, alors assurez-vous de trouver des icônes gratuites. Freepik est un bon endroit pour en trouver.
Ajoutons donc notre HStack :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack{
HStack{
}
}
}
}
}
Et à l’intérieur, notre premier texte :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack{
HStack{
Text("nom d'utilisateur")
}
}
}
}
}
Jusqu’à présent, cela vous a probablement amené à ceci :
Très bien. C’est un début.
Alignons-le sur le côté gauche en ajoutant une balise
(alignement : .leading)
à notre VStack :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
}
}
}
}
}
Nous pouvons également ajouter quelques propriétés au texte pour le rendre plus cohérent avec notre conception :
Pour définir sa couleur à notre lightBlueColor qui est définie dans notre AppDelegate :
.foregroundColor(lightBlueColor)
Pour modifier l’épaisseur de la police :
.fontWeight(.semibold)
Et enfin, pour ajouter un peu de padding (espace) dans le côté principal :
.padding(.leading, 10)
Votre code devrait maintenant ressembler à ceci :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
}
}
}
}
}
Votre interface utilisateur devrait ressembler à ceci :
Ajoutons maintenant ce petit bouton en forme de flèche.
Comme vous l’avez appris dans la partie 2 de cet article, ajoutez l’image de la flèche vers le bas pour notre bouton, et ajoutons le bouton à notre code SwiftUI :
Button(action : {}){
}
Et ajoutons-y notre image :
Button(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
Et juste pour l’alignement, ajoutons un peu de rembourrage en haut :
Button(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Notre code complet devrait maintenant ressembler à ceci :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
}
}
}
}
}
Et voilà notre interface utilisateur :
Ajoutons maintenant le bouton hamburger de la même manière :
Button(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
Notre code complet :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Bouton(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
}
}
}
}
}
Et notre vue :
Si seulement il y avait quelque chose à mettre entre ces deux boutons pour prendre tout l’espace entre eux et tout aligner…
Espaceur()
Maintenant, ça a l’air bien !
Notre code complet jusqu’à présent :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Espaceur()
Bouton(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
}
}
}
}
}
Il ne reste plus qu’à fixer la hauteur de cette HStack et à lui donner un peu de rembourrage sur le côté avant, et nous sommes prêts à partir :
.frame(height : 50) .padding(.leading, 10)
Code complet :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Espaceur()
Bouton(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
}.frame(height : 50)
.padding(.leading, 10)
}
}
}
}
Nous pouvons maintenant commencer notre…
Deuxième HStack
Comme nous avons tout créé à l’intérieur d’une VStack principale, chaque nouveau contrôle que nous ajouterons en dehors de cette première HStack sera automatiquement placé sous celle-ci.
Il est donc temps de créer notre deuxième HStack et de construire la deuxième partie de notre écran :
Il s’agira également d’une HStack, contenant 4 piles V : une pour l’image et le texte en dessous, et 3 pour les nombres avec le texte en dessous.
Comme vous avez probablement compris le concept maintenant, je vais laisser le code complet pour cette nouvelle HStack :
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(width : 90, height : 90)
.clipShape(Circle())
.shadow(radius : 3)
.overlay(Circle().stroke(Color.pink, lineWidth : 1))
Texte("Votre nom")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Texte("10")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Publications")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Texte("100")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suiveurs")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Texte("1000")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suivant")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}
}.frame(height : 100)
.padding(.leading, 10)
Et notre code complet serait le suivant
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Espaceur()
Bouton(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
}.frame(height : 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(width : 90, height : 90)
.clipShape(Circle())
.shadow(radius : 3)
.overlay(Circle().stroke(Color.pink, lineWidth : 1))
Texte("Votre nom")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Texte("10")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Publications")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Texte("100")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suiveurs")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Texte("1000")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suivant")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}
}.frame(height : 100)
.padding(.leading, 10)
}
}
}
}
Notre vue ressemblera donc à ceci :
Sympa !
Ajout du bouton Modifier le profil et du séparateur
On serait tenté de penser que le bouton Modifier le profil et le séparateur qui se trouve en dessous devraient se trouver dans une VStack :
Mais ce n’est pas vraiment nécessaire puisque toute notre vue se trouve à l’intérieur de notre VStack principale, nous pouvons donc simplement les ajouter à notre code :
Button(action : {}){
Text("Modifier le profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width : 400)
.padding()
Diviseur()
qui ressemblerait à ceci :
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Espaceur()
Bouton(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
}.frame(height : 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(width : 90, height : 90)
.clipShape(Circle())
.shadow(radius : 3)
.overlay(Circle().stroke(Color.pink, lineWidth : 1))
Texte("Votre nom")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Texte("10")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Publications")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Texte("100")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suiveurs")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Texte("1000")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suivant")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}
}.frame(height : 100)
.padding(.leading, 10)
Bouton(action : {}){
Text("Modifier le profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width : 400)
.padding()
Divider()
}
}
}
}
et notre interface utilisateur :
Mocker notre ligne de temps
Notre vue de la chronologie sera utilisée dans d’autres parties de l’application, il est donc logique de la séparer dans un fichier différent.
Elle pourrait être réutilisée à l’intérieur de notre ProfileView de la même manière, mais cela permet de mieux organiser les choses lorsque nous divisons le code.
Créez un fichier TimelineView.swift.
Il y a plusieurs façons d’afficher des données dans SwiftUI, mais j’ai choisi celle-ci pour mon application :
- Notre vue Timeline est un VStack de LineViews
- Chaque LineView est une HStack composée de 3 PreviewViews
- Chaque PreviewView contient une image
La première chose à faire est de créer une structure pour contenir nos données. J’appellerai cette structure Preview et elle aura 2 paramètres : un id (type Int) pour itérer et un imageURL (type String) qui contiendra l’URL d’une image que je passerai :
struct Preview {
var id : Int
let imageUrl : String
}
Comme je l’ai dit, vous pourriez choisir une autre façon d’afficher vos données, mais j’ai trouvé cela très facile à comprendre, alors ajoutons d’abord la structure pour notre PreviewView.
Notre structure possède une propriété Preview que je définirai plus tard, mais qui utilisera la propriété imageURL pour rendre l’image :
struct PreviewView : View {
let preview : Aperçu
var body : some View {
Image(preview.imageUrl)
.resizable()
.frame(width : 136, height : 136)
}
}
Ceci fait, nous pouvons ajouter la structure pour notre LineView, qui reçoit un tableau de 3 Previews à afficher dans la ligne.
Je modifierai cette structure à l’avenir pour refléter les données réelles, mais pour l’instant, c’est suffisant :
struct LineView : View {
let previewArray :[Aperçu]
var body : some View {
HStack(spacing : 2){
PreviewView(preview : previewArray[0])
PreviewView(preview : previewArray[1])
PreviewView(preview : previewArray[2])
}
}
}
Enfin, nous pouvons créer un tableau d’objets de prévisualisation que nous allons parcourir en boucle :
let previews :[Aperçu] = [
Aperçu(id : 0, imageUrl : "1"),
Aperçu(id : 1, imageUrl : "2"),
Aperçu(id : 2, imageUrl : "3"),
Aperçu(id : 3, imageUrl : "4"),
Aperçu(id : 4, imageUrl : "5"),
Aperçu(id : 5, imageUrl : "6"),
Aperçu(id : 6, imageUrl : "7"),
Aperçu(id : 7, imageUrl : "8"),
Aperçu(id : 8, imageUrl : "9"),
Aperçu(id : 9, imageUrl : "10"),
Aperçu(id : 10, imageUrl : "11"),
Aperçu(id : 11, imageUrl : "12"),
Aperçu(id : 12, imageUrl : "13")
]
Ce tableau contient 13 objets et j’ai référencé les images que j’utiliserai avec des noms allant de 1 à 13. J’ai également sauvegardé ces images dans mon dossier Assets, mais encore une fois, je changerai cela à l’avenir :
Maintenant que tout est prêt, nous pouvons itérer dans notre tableau et créer notre LinePreviews en lui passant 3 objets de prévisualisation.
Remarquez que je passe le même objet, mais encore une fois, c’est temporaire pour l’affichage et cela sera modifié :
var body : some View {
ScrollView{
VStack(alignment : .leading, spacing : 2){
ForEach(previews, id : \.id) { preview in
LineView(previewArray : [preview, preview, preview])
}
}
}
}
Notre code complet ressemblerait donc à quelque chose comme ceci :
struct TimelineView : View {
let previews :[Preview] = [
Aperçu(id : 0, imageUrl : "1"),
Aperçu(id : 1, imageUrl : "2"),
Aperçu(id : 2, imageUrl : "3"),
Aperçu(id : 3, imageUrl : "4"),
Aperçu(id : 4, imageUrl : "5"),
Aperçu(id : 5, imageUrl : "6"),
Aperçu(id : 6, imageUrl : "7"),
Aperçu(id : 7, imageUrl : "8"),
Aperçu(id : 8, imageUrl : "9"),
Aperçu(id : 9, imageUrl : "10"),
Aperçu(id : 10, imageUrl : "11"),
Aperçu(id : 11, imageUrl : "12"),
Aperçu(id : 12, imageUrl : "13")
]
var body : some View {
ScrollView{
VStack(alignment : .leading, spacing : 2){
ForEach(previews, id : \.id) { preview in
LineView(previewArray : [preview, preview, preview])
}
}
}
}
}
struct TimelineView_Previews : PreviewProvider {
static var previews : some View {
TimelineView()
}
}
struct Preview {
var id : Int
let imageUrl : String
}
struct LineView : View {
let previewArray :[Aperçu]
var body : some View {
HStack(spacing : 2){
PreviewView(preview : previewArray[0])
PreviewView(preview : previewArray[1])
PreviewView(preview : previewArray[2])
}
}
}
struct PreviewView : View {
let preview : Aperçu
var body : some View {
Image(preview.imageUrl)
.resizable()
.frame(width : 136, height : 136)
}
}
Et si nous l’appelons depuis notre ProfileView.swift juste sous notre Divider :
...
Button(action : {}){
Text("Modifier le profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width : 400)
.padding()
Diviseur()
TimelineView().padding(.leading, 10)
...
Nous pouvons également ajouter un autre Divider juste en dessous afin d’obtenir le résultat final que nous souhaitons :
...
Bouton(action : {}){
Text("Modifier le profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width : 400)
.padding()
Diviseur()
TimelineView().padding(.leading, 10)
Diviseur()
...
De quoi ça a l’air ?
Est-ce que ça a déjà l’air bien ?
Finissons-en en ajoutant notre…
Vue du bas
La vue du bas sera encore un autre fichier, car nous l’utiliserons dans plusieurs parties de l’application.
Créez votre fichier BottomView.swift et créez-y un HStack (car les boutons seront côte à côte) de 4 boutons avec des Spacers entre eux. N’oubliez pas les icônes !
struct BottomView : View {
var body : some View {
HStack{
Button(action : {}){
Image("home")
.resizable()
.frame(width : 30, height : 30)
}.padding()
Espaceur()
Button(action : {}){
Image("search")
.resizable()
.frame(width : 30, height : 30)
}.padding()
Espaceur()
Button(action : {}){
Image("plus-button")
.resizable()
.frame(width : 30, height : 30)
}.padding()
Espaceur()
Bouton(action : {}){
Image("heart")
.resizable()
.frame(width : 30, height : 30)
}.padding()
Espaceur()
Bouton(action : {}){
Image("user")
.resizable()
.frame(width : 30, height : 30)
}.padding()
}.frame(height : 35)
}
}
C’était facile ! Intégrons-le dans notre ProfileView.swift, juste en dessous de notre dernier Divider :
...
Divider()
TimelineView().padding(.leading, 10)
Diviseur()
Vue du bas()
...
Le code complet de ProfileView est donc le suivant
import SwiftUI
struct ProfileView : View {
var body : some View {
GeometryReader { geometry in
VStack(alignment : .leading){
HStack{
Text("nom d'utilisateur")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Bouton(action : {}){
Image("arrow-down")
.resizable()
.frame(width : 10, height : 10)
}
.padding(.top, 5)
Espaceur()
Bouton(action : {}){
Image("menu")
.resizable()
.frame(width : 20, height : 20)
}.padding()
}.frame(height : 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(width : 90, height : 90)
.clipShape(Circle())
.shadow(radius : 3)
.overlay(Circle().stroke(Color.pink, lineWidth : 1))
Texte("Votre nom")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Texte("10")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Publications")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Texte("100")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suiveurs")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Texte("1000")
.font(.system(size : 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Texte("Suivant")
.font(.system(size : 13))
.foregroundColor(lightBlueColor)
}
}.frame(height : 100)
.padding(.leading, 10)
Bouton(action : {}){
Text("Modifier le profil")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width : 400)
.padding()
Diviseur()
TimelineView().padding(.leading, 10)
Diviseur()
BottomView()
}
}
}
}
struct ProfileView_Previews : PreviewProvider {
static var previews : some View {
ProfileView()
}
}
Et enfin…
Nous avons notre ProfileView complète :
C’est vraiment génial !
Conclusion
Aujourd’hui, vous avez appris à simuler une vue de profil dans votre application. Ce n’est encore qu’un simulacre, mais nous lui donnerons quelques fonctionnalités au fil du temps.
Vous avez appris comment créer et réutiliser des composants dans SwiftUI et comment les utiliser pour créer une vue complexe. Génial !
Nous allons créer d’autres vues dans le prochain article !
Restez à l’écoute !
Référence
- La partie 1 de cette série est l’article Instagram Clone.
- La partie 2 est l’article Clone Instagram Swift.
- La partie 3 est l’article Instagram Clone Profile.
- La partie 4 est l’article Insta Clone Homeview.
- 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.
Quel est le point positif de SwiftUI ?
Si vous souhaitez créer des clones comme l’application Instagram, SwiftUI fera son effet.
– Il facilite la création d’interfaces complexes.
– Réutilisation des composants.
– Le processus de réutilisation des interfaces est simple et facile.
Vous devez simplement posséder les connaissances nécessaires pour réutiliser ces composants ensemble.
Qu’est-ce que Hstack, Vstack et Zstack ?
Ces noms sont liés en raison de la représentation américaine. SwiftUI construit ses interfaces utilisateur selon les modèles suivants :
– L’interface utilisateur est construite verticalement grâce à la pile verticale
– Elle est construite horizontalement grâce à la pile horizontale
– Les vues superposées sont construites avec ZStack
Quelle est la meilleure fonctionnalité de SwiftUI ?
La meilleure fonctionnalité de SwiftUI est sa réutilisabilité. Vous pouvez réutiliser les composants à l’infini pour créer les vues. Cela s’applique à toutes les applications. Vous devez savoir jouer avec ces composants.
