Un clone di Instagram che utilizza SwiftUI e GraphQL – ProfileView
Oggi, nella terza parte della nostra app clone di Instagram con GraphQL, ci addentreremo nella SwiftUI, costruendo la nostra vista Profilo.
Impareremo a riutilizzare le strutture in SwiftUI e discuteremo alcuni controlli: VStack, HStack, GeometryReader, Text, Button, Spacer, Image, Divider e altri.
Nei nostri articoli precedenti, abbiamo imparato come iscrivere un utente e come accedere a un utente, con le rispettive interfacce utente nella nostra app clone di Instagram. Oggi lo renderemo molto più bello.
Allacciate le cinture di sicurezza e iniziamo!
Per imparare meglio, scaricate il progetto iOS Instagram Clone con il codice sorgente.
Contents
- 1 Volete un inizio rapido?
- 2 Cosa costruiremo esattamente
- 3 HStack, Vstack, Zstack cosa?
- 4 Riutilizzabilità
- 5 Creare la vista Profilo
- 6 Seconda HStack
- 7 Aggiungere il pulsante Modifica profilo e il divisore
- 8 Prendere in giro la nostra timeline
- 9 Vista dal basso
- 10
- 11 E infine…
- 12 Conclusione
- 13 Riferimento
- 14 Qual è il punto di forza di SwiftUI?
- 15 Cosa sono Hstack, Vstack e Zstack?
- 16 Qual è la caratteristica migliore di SwiftUI?
Volete un inizio rapido?
Clonate questa app dal nostro Hub e iniziate a usarla senza problemi!
Cosa costruiremo esattamente
Costruiremo la seguente vista:
SwiftUI rende molto semplice la costruzione di interfacce complesse, in quanto è possibile riutilizzare molti componenti in modo semplice e diretto.
L’unica cosa da fare è imparare a creare questi componenti riutilizzabili. Una vista è in realtà una combinazione di più viste che si integrano in un unico risultato finale.
Un elenco semplificato di componenti è il seguente:
Dove:
- VStack
- Hstack
- Controlli effettivi (pulsanti, divisori, ecc.)
HStack, Vstack, Zstack cosa?
SwiftUI costruisce le sue interfacce utente allineando le viste verticalmente con VStack (Vertical Stack) e orizzontalmente con HStack (Horizontal Stack) e sovrapponendo le viste con Zstack (Z come z-index).
Ogni volta che si ha bisogno di una vista sotto un’altra, si dovrebbe usare un VStack.
Ogni volta che si ha bisogno di una vista accanto a un’altra, si deve usare un HStack.
Ogni volta che si ha bisogno di una vista che si sovrappone a un’altra, si deve usare uno ZStack.
Poiché la nostra vista principale consisterà in molte viste poste orizzontalmente l’una sotto l’altra, conterremo tutto nel VStack principale e partiremo da lì, ma c’è un altro elemento che dovremo usare per occupare l’intero schermo: il GeometryReader.
Ci permette di renderizzare tutto in funzione delle sue dimensioni e coordinate (del GeometryReader).
Riutilizzabilità
La riusabilità è una delle bellezze di SwiftUI, che ci permette di creare controlli complessi e di riutilizzarli ovunque sia necessario.
Per questa applicazione, sono principalmente due i componenti che riutilizzeremo in diverse viste: la Timeline e la barra inferiore:
Per questo motivo, creeremo questi codici UI separatamente, in modo da renderli più organizzati. Tutto il codice dell’interfaccia utente specifico per una vista può rimanere nel file di codice di quella vista.
Quindi iniziamo…
Creare la vista Profilo
Aggiungiamo un nuovo file SwiftUI e chiamiamolo ProfileView.swift.
Poiché dovremo allineare i componenti per riempire lo schermo, iniziamo ad aggiungere un GeometryReader, in modo da garantire che tutti i controlli al suo interno utilizzino le sue dimensioni e coordinate:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
}
}
}
Ora, la nostra vista sarà inserita in un VStack principale che conterrà tutti i nostri controlli, quindi aggiungiamo anche quello
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack{
}
}
}
}
La nostra prima “linea” di controlli sarà quella superiore:
Quella che sembra una semplice riga di controlli è in realtà un controllo multiplo:
- il testo “nome utente
- la piccola freccia che punta verso il basso accanto ad esso
- un distanziatore per riempire lo spazio tra la piccola freccia e il controllo successivo
- un pulsante Hamburger sulla destra
Per i pulsanti utilizzeremo delle icone, quindi assicuratevi di trovare delle icone gratuite. Un buon posto per trovarle è Freepik.
Aggiungiamo quindi il nostro HStack:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack{
HStack{
}
}
}
}
}
E in esso, il nostro primo testo:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack{
HStack{
Text("username")
}
}
}
}
}
Fin qui probabilmente si è arrivati a questo:
Va bene. È un inizio.
Allineiamolo a sinistra aggiungendo un elemento
(allineamento: .leading)
al nostro VStack:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("username")
}
}
}
}
}
Possiamo anche aggiungere alcune proprietà del testo per renderlo più coerente con il nostro progetto:
Per impostare il suo colore a lightBlueColor, definito nel nostro AppDelegate:
.foregroundColor(lightBlueColor)
Per cambiare il peso del carattere:
.fontWeight(.semibold)
E infine per aggiungere un po’ di padding (spazio) nel lato iniziale:
.padding(.leading, 10)
Il codice dovrebbe ora apparire come questo:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
}
}
}
}
}
L’interfaccia utente dovrebbe avere questo aspetto:
Ora aggiungiamo il piccolo pulsante a forma di freccia.
Come appreso nella Parte 2 di questo articolo, aggiungiamo l’immagine della freccia verso il basso per il nostro pulsante e aggiungiamo il pulsante al nostro codice SwiftUI:
Button(action: {}){
}
E aggiungiamo la nostra immagine:
Button(action: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
E per allineare il tutto, aggiungiamo un po’ di padding nella parte superiore:
Button(action: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Il codice completo dovrebbe ora essere come questo:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
}
}
}
}
}
E la nostra interfaccia utente:
Ora aggiungiamo il pulsante hamburger nello stesso modo:
Button(action: {}){
Immagine("menu")
.ridimensionabile()
.frame(width: 20, height: 20)
}.padding()
Il nostro codice completo:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Pulsante(azione: {}){
Immagine("menu")
.ridimensionabile()
.frame(larghezza: 20, altezza: 20)
}.padding()
}
}
}
}
}
E la nostra vista:
Se solo ci fosse qualcosa da mettere tra questi due pulsanti per prendere tutto lo spazio tra di loro e allineare tutto…
Distanziatore()
Ora si vede bene!
Il nostro codice completo finora:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Distanziatore()
Pulsante(azione: {}){
Immagine("menu")
.ridimensionabile()
.frame(larghezza: 20, altezza: 20)
}.padding()
}
}
}
}
}
Ora fissiamo l’altezza di questo HStack e diamogli un po’ di padding sul lato iniziale e siamo pronti a partire:
.frame(altezza: 50) .padding(.leading, 10)
Codice completo:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Distanziatore()
Pulsante(azione: {}){
Immagine("menu")
.ridimensionabile()
.frame(larghezza: 20, altezza: 20)
}.padding()
}.frame(altezza: 50)
.padding(.leading, 10)
}
}
}
}
Ora possiamo iniziare il nostro…
Seconda HStack
Poiché abbiamo creato tutto all’interno di un VStack principale, ogni nuovo controllo che aggiungiamo al di fuori del primo HStack verrà automaticamente inserito sotto di esso.
È quindi giunto il momento di creare il nostro secondo HStack e di costruire la seconda parte del nostro schermo:
Anche questo sarà un HStack, contenente 4 VStack al suo interno: uno per l’immagine e il testo sotto di essa, e 3 per i numeri con il testo sotto di essi.
Poiché probabilmente avete già capito il concetto, vi lascio il codice completo di questo nuovo HStack:
HStack{
VStack{
Immagine("logo-social")
.ridimensionabile()
.frame(larghezza: 90, altezza: 90)
.clipShape(Circle())
.shadow(raggio: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Testo("Il tuo nome")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Testo("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Pubblicazioni")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Testo("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Seguaci")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Testo("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Di seguito")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(altezza: 100)
.padding(.leading, 10)
Il codice completo sarebbe
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Distanziatore()
Pulsante(azione: {}){
Immagine("menu")
.ridimensionabile()
.frame(larghezza: 20, altezza: 20)
}.padding()
}.frame(altezza: 50)
.padding(.leading, 10)
HStack{
VStack{
Immagine("logo-social")
.ridimensionabile()
.frame(larghezza: 90, altezza: 90)
.clipShape(Circle())
.shadow(raggio: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Testo("Il tuo nome")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Testo("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Pubblicazioni")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Testo("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Seguaci")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Testo("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Di seguito")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(altezza: 100)
.padding(.leading, 10)
}
}
}
}
Quindi la nostra vista avrà questo aspetto:
Perfetto!
Aggiungere il pulsante Modifica profilo e il divisore
Si potrebbe essere tentati di pensare che il pulsante Modifica profilo e il Divisore sotto di esso debbano essere in un VStack:
Ma non è necessario, dato che la nostra intera vista è all’interno del nostro VStack principale, quindi possiamo semplicemente aggiungerli al nostro codice:
Button(action: {}){
Testo("Modifica profilo")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divisore()
che avrebbe un aspetto simile a questo:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Distanziatore()
Pulsante(azione: {}){
Immagine("menu")
.ridimensionabile()
.frame(larghezza: 20, altezza: 20)
}.padding()
}.frame(altezza: 50)
.padding(.leading, 10)
HStack{
VStack{
Immagine("logo-social")
.ridimensionabile()
.frame(larghezza: 90, altezza: 90)
.clipShape(Circle())
.shadow(raggio: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Testo("Il tuo nome")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Testo("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Pubblicazioni")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Testo("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Seguaci")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Testo("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Di seguito")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(altezza: 100)
.padding(.leading, 10)
Pulsante (azione: {}){
Testo("Modifica profilo")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divisore()
}
}
}
}
e la nostra interfaccia utente:
Prendere in giro la nostra timeline
La nostra vista Timeline sarà utilizzata in altre parti dell’applicazione, quindi ha senso spezzarla in un file diverso.
Potrebbe essere riutilizzata anche all’interno della ProfileView, ma in questo modo le cose sono più organizzate quando dividiamo il codice.
Creare un file TimelineView.swift.
Ci sono molti modi diversi per visualizzare i dati in SwiftUI, ma io ho scelto questo per la mia applicazione:
- La nostra vista Timeline è un VStack di LineViews
- Ciascuna LineView è un HStack composto da 3 PreviewView
- Ogni PreviewView contiene un’immagine
La prima cosa da fare è creare una struct per contenere i nostri dati. La chiamerò struct Preview e avrà due parametri: un id (di tipo Int) per l’iterazione e un imageURL (di tipo String) che conterrà l’URL dell’immagine che passeremo:
struct Anteprima {
var id: Int
imageUrl: String
}
Come ho detto, si potrebbe scegliere un altro modo per visualizzare i dati, ma io l’ho trovato molto semplice da capire, quindi aggiungiamo prima la struct per la nostra PreviewView.
La nostra struct ha una proprietà Preview, che imposterò in seguito, ma utilizzerà la proprietà imageURL per rendere l’immagine:
struct PreviewView: View {
let preview: Preview
var body: some View {
Immagine(preview.imageUrl)
.resizable()
.frame(larghezza: 136, altezza: 136)
}
}
Fatto questo, possiamo aggiungere la struttura per la nostra LineView, che riceve un array di 3 anteprime da visualizzare nella riga.
Lo modificherò in futuro per riflettere i dati reali, ma per ora va bene così:
struct LineView: View {
let previewArray:[Anteprima]
var body: some View {
HStack(spaziatura: 2){
PreviewView(anteprima: previewArray[0])
PreviewView(anteprima: previewArray[1])
PreviewView(anteprima: previewArray[2])
}
}
}
Infine, possiamo creare un array di oggetti Anteprima che scorrerà in loop:
let previews:[Preview] = [
Anteprima(id: 0, imageUrl: "1"),
Preview(id: 1, imageUrl: "2"),
Anteprima(id: 2, imageUrl: "3"),
Anteprima(id: 3, imageUrl: "4"),
Anteprima(id: 4, imageUrl: "5"),
Anteprima(id: 5, imageUrl: "6"),
Anteprima(id: 6, imageUrl: "7"),
Anteprima(id: 7, imageUrl: "8"),
Anteprima(id: 8, imageUrl: "9"),
Anteprima(id: 9, imageUrl: "10"),
Anteprima(id: 10, imageUrl: "11"),
Anteprima(id: 11, imageUrl: "12"),
Anteprima(id: 12, imageUrl: "13")
]
Questa matrice ha 13 oggetti e ho fatto riferimento alle immagini che utilizzerò con i nomi da 1 a 13. Ho anche salvato queste immagini nella mia cartella Asset. Ho anche salvato queste immagini nella cartella Assets, ma anche in questo caso le cambierò in futuro:
Ora che abbiamo fatto tutto, possiamo iterare il nostro Array e creare la nostra LinePreviews passandole 3 oggetti di anteprima.
Notate che sto passando lo stesso oggetto, ma ancora una volta, questo è temporaneo per la visualizzazione e sarà modificato:
var body: some View {
ScrollView{
VStack(alignment: .leading, spacing: 2){
ForEach(previews, id: \.id) { preview in
LineView(previewArray: [preview, preview, preview])
}
}
}
}
Quindi il nostro codice completo sarebbe qualcosa di simile:
struct TimelineView: View {
let previews:[Preview] = [
Anteprima(id: 0, imageUrl: "1"),
Preview(id: 1, imageUrl: "2"),
Anteprima(id: 2, imageUrl: "3"),
Anteprima(id: 3, imageUrl: "4"),
Anteprima(id: 4, imageUrl: "5"),
Anteprima(id: 5, imageUrl: "6"),
Anteprima(id: 6, imageUrl: "7"),
Anteprima(id: 7, imageUrl: "8"),
Anteprima(id: 8, imageUrl: "9"),
Anteprima(id: 9, imageUrl: "10"),
Anteprima(id: 10, imageUrl: "11"),
Anteprima(id: 11, imageUrl: "12"),
Anteprima(id: 12, imageUrl: "13")
]
var body: some View {
ScrollView{
VStack(alignment: .leading, spacing: 2){
ForEach(anteprime, id: \.id) { anteprima in
LineView(previewArray: [preview, preview, preview])
}
}
}
}
}
struct TimelineView_Previews: PreviewProvider {
static var previews: some View {
TimelineView()
}
}
struct Anteprima {
var id: Int
let imageUrl: String
}
struct LineView: View {
let previewArray:[Preview]
var body: some View {
HStack(spaziatura: 2){
PreviewView(anteprima: previewArray[0])
PreviewView(anteprima: previewArray[1])
PreviewView(anteprima: previewArray[2])
}
}
}
struct PreviewView: View {
Let Preview: Anteprima
var body: some View {
Immagine(preview.imageUrl)
.resizable()
.frame(larghezza: 136, altezza: 136)
}
}
E se lo chiamiamo dal nostro ProfileView.swift proprio sotto il nostro Divider:
...
Button(action: {}){
Testo("Modifica profilo")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divisore()
TimelineView().padding(.leading, 10)
...
Possiamo anche aggiungere un altro divisore proprio sotto di esso, in modo da ottenere quasi il risultato finale desiderato:
...
Pulsante(azione: {}){
Testo("Modifica profilo")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divisore()
TimelineView().padding(.leading, 10)
Divisore()
...
Come appare?
È già bello?
Finiamo aggiungendo il nostro…
Vista dal basso
La vista inferiore sarà un altro file, poiché la utilizzeremo in più parti dell’applicazione.
Create il file BottomView.swift e in esso create un HStack (poiché i pulsanti saranno affiancati) di 4 pulsanti con distanziatori tra loro. Non dimenticate le icone!
struct BottomView: View {
var body: some View {
HStack{
Button(action: {}){
Immagine("home")
.ridimensionabile()
.frame(larghezza: 30, altezza: 30)
}.padding()
Distanziatore()
Pulsante(azione: {}){
Immagine("ricerca")
.ridimensionabile()
.frame(larghezza: 30, altezza: 30)
}.padding()
Distanziatore()
Pulsante(azione: {}){
Immagine("plus-button")
.ridimensionabile()
.frame(larghezza: 30, altezza: 30)
}.padding()
Distanziatore()
Pulsante(azione: {}){
Immagine("cuore")
.ridimensionabile()
.frame(larghezza: 30, altezza: 30)
}.padding()
Distanziatore()
Pulsante(azione: {}){
Immagine("utente")
.ridimensionabile()
.frame(larghezza: 30, altezza: 30)
}.padding()
}.frame(altezza: 35)
}
}
È stato facile! Integriamolo nel nostro ProfileView.swift, proprio sotto l’ultimo Divider:
...
Divisore()
TimelineView().padding(.leading, 10)
Divisore()
Vista dal basso()
...
Quindi il codice completo di ProfileView sarebbe:
importare SwiftUI
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Testo("nome utente")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Pulsante(azione: {}){
Immagine("freccia giù")
.ridimensionabile()
.frame(width: 10, height: 10)
}
.padding(.top, 5)
Distanziatore()
Pulsante(azione: {}){
Immagine("menu")
.ridimensionabile()
.frame(larghezza: 20, altezza: 20)
}.padding()
}.frame(altezza: 50)
.padding(.leading, 10)
HStack{
VStack{
Immagine("logo-social")
.ridimensionabile()
.frame(larghezza: 90, altezza: 90)
.clipShape(Circle())
.shadow(raggio: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Testo("Il tuo nome")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Testo("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Pubblicazioni")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Testo("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Seguaci")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Testo("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Testo("Di seguito")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(altezza: 100)
.padding(.leading, 10)
Pulsante(azione: {}){
Testo("Modifica profilo")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divisore()
TimelineView().padding(.leading, 10)
Divisore()
BottomView()
}
}
}
}
struct ProfileView_Previews: PreviewProvider {
static var previews: some View {
ProfileView()
}
}
E infine…
Abbiamo la nostra ProfileView completa:
Che meraviglia!
Conclusione
Oggi abbiamo imparato come simulare una vista profilo nella nostra applicazione. È ancora solo un mock, ma col tempo gli daremo qualche funzionalità.
Avete imparato a creare e riutilizzare i componenti in SwiftUI e a usarli in modo eccellente per creare una vista complessa. Fantastico!
Nel prossimo articolo creeremo altre viste!
Restate sintonizzati!
Riferimento
- La parte 1 di questa serie è l’articolo Instagram Clone.
- La parte 2 è l’articolo Swift Instagram Clone.
- La parte 3 è l’articolo Profilo del clone di Instagram.
- La parte 4 è l’articolo Insta Clone Homeview.
- Scaricate un progetto iOS Instagram Clone con il codice sorgente e iniziate a usare Back4App.
Registratevi ora a Back4App e iniziate a costruire la vostra app clone di Instagram.
Qual è il punto di forza di SwiftUI?
Se stai cercando di creare cloni come l’app di Instagram, SwiftUI farà la sua magia.
– Aiuta a creare interfacce complesse
– Riutilizzo dei componenti
– Il processo di riutilizzo delle interfacce è semplice e intuitivo
Dovresti solo avere le competenze necessarie per riutilizzare insieme i componenti.
Cosa sono Hstack, Vstack e Zstack?
Questi nomi sono collegati a causa della rappresentazione statunitense. SwiftUI costruisce le sue interfacce utente con i seguenti modelli:
– L’interfaccia utente è costruita verticalmente utilizzando lo stack verticale
– È costruita orizzontalmente utilizzando lo stack orizzontale
– Le viste sovrapposte sono costruite con ZStack
Qual è la caratteristica migliore di SwiftUI?
La caratteristica migliore di SwiftUI è la riutilizzabilità. È possibile riutilizzare i componenti più e più volte per creare le viste. Questo vale per tutte le app. Bisogna sapere come gestire questi componenti.
