Applicazione clone di Instagram con SwiftUI e GraphQL – HomeView

Oggi, nella quarta parte della nostra app clone di Instagram con GraphQL, continueremo a imparare un po’ di SwiftUI, costruendo la nostra vista Home.

Nei nostri articoli precedenti, abbiamo imparato come iscrivere un utente e come accedere a un utente e abbiamo creato la vista Profilo con le rispettive UI nella nostra app clone di Instagram. Oggi riutilizzeremo parte di quel codice e creeremo qualcosa di simile a una UIScrollView con molto contenuto.

Allacciate le cinture di sicurezza e iniziamo!

Per imparare meglio, scaricate il progetto iOS Instagram Clone con il codice sorgente.

Volete un inizio rapido?

Clonate questa app dal nostro Hub e iniziate a usarla senza problemi!

Cosa costruiremo esattamente

Costruiremo la seguente vista:

Come abbiamo visto in precedenza, SwiftUI rende molto semplice la costruzione di interfacce complesse, in quanto è possibile riutilizzare molti componenti con estrema facilità. La parola chiave è “riutilizzare”.

Ricordate che abbiamo già codificato la barra inferiore? La riutilizzeremo per questo. Tutto il resto è nuovo.

Non ripeterò VStacks e HStacks, quindi se vi siete persi quella parte, consultatela qui.

I componenti dell’interfaccia utente

Questa schermata sarà composta fondamentalmente da quattro componenti:

• La barra superiore (con la fotocamera, la stringa Back4Gram, l’icona della casa e quella dell’aeroplanino).
• Barra della cronologia (con le icone delle cronologie)
• Vista dettagliata della Timeline (con i post attuali)
• La barra inferiore (che riutilizzeremo).

Iniziamo a costruirle!

Barra superiore

La barra superiore è composta da cinque componenti:

• Pulsante della fotocamera
• Stringa Back4Gram
• Distanziatore
• Pulsante Casa
• Pulsante Aereo di carta

Aggiungiamo le icone per i pulsanti, come abbiamo già imparato, e iniziamo a codificare.

Creiamo il file HomeView.swift e aggiungiamo un GeometryReader per poter ridimensionare tutto in modo corretto:

Come nella precedente esercitazione, aggiungiamo un VStack, perché tutto sarà mostrato su un asse verticale:

La nostra barra superiore sarà un insieme di componenti allineati orizzontalmente, quindi aggiungiamo un HStack per crearla:

Infine, aggiungiamo i controlli che utilizzeremo:

Come vi sembra?

Stiamo andando dappertutto!

Ora parliamo un po’ della

Barra della cronologia

La barra della cronologia è di per sé un componente complesso. È proprio come una UIScrollView del vecchio UIKit, ma al suo interno abbiamo un controllo composto da un’immagine e da un testo sottostante (alias VStack). Creiamo questa struttura:

Inserirla nel nostro VStack principale è facile come aggiungere la ScrollView. E per renderla più bella, facciamo in modo che scorra solo in orizzontale e nascondiamo gli indicatori di scorrimento:

e infine aggiungiamolo al nostro VStack principale:

Controllo dell’aspetto:

Ora, saltiamo avanti e aggiungiamo prima la nostra…

Barra inferiore

Ora godiamoci tutta questa riutilizzabilità. Basta aggiungere il file BottomBar.swift al nostro codice:

E il nostro codice completo:

Non è stato facile? Come vi sembra?

Sweeft!

Aggiungere un po’ di complessità

La parte più complessa di questa vista sarà la vista Dettagliata della linea temporale.

Per mantenere la coerenza con quanto fatto nella nostra TimelineView, creiamo un nuovo file chiamato TimlineDetailView.swift e al suo interno creiamo una nuova struct che conterrà i dati proprio come nella nostra TimelineView.

Ricordiamo che la nostra struct Anteprima è già stata dichiarata nella TimelineView, quindi riutilizziamo anche quella.

La struct riceverà un’anteprima, in modo da poter recuperare l’imageUrl in un secondo momento:

Fatto questo, aggiungiamo la vista stessa:

Anche il contenuto principale sarà in un VStack:

Questo VStack avrà quattro componenti:

• Un HStack con il logo, i testi e il pulsante con i tre puntini
• L’immagine del post
• Un Hstack con il pulsante del cuore, il pulsante dei commenti, il pulsante dell’aeroplanino di carta e il pulsante della bandiera
• Un VStack contenente i testi “Piaciuto a..” e “Vedi tutti i commenti””.

Iniziamo quindi ad aggiungere il primo HStack:

E aggiungiamo i controlli al suo interno:

Poi l’immagine:

Il nostro secondo HStack con tutti i pulsanti:

E i suoi controlli:

E infine i nostri testi VStack:

Ora, all’interno della nostra TimelineDetailView, codifichiamo in modo rigido alcune anteprime:

E infine, aggiungiamo in loop le nostre PreviewDetailView a una ScrollView:

Infine, aggiungiamola alla nostra HomeView:

Infine, vediamo i risultati:

Che bello!

Conclusione

La riusabilità è fondamentale in SwiftUI.

Oggi avete imparato a riutilizzare la BottomView e la struttura Preview dai nostri articoli precedenti.

È arrivato il momento di scoprire qualche funzionalità e non vedo l’ora che arrivi.

Restate sintonizzati!

Riferimento

• La parte 1 di questa serie è Instagram Clone App.
• La parte 2 è Swift Instagram Clone.
• Parte 3: Profilo di Instagram.
• La parte 4 è Instagram 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.