Instagram-Klon-App mit SwiftUI und GraphQL – HomeView

Heute in Teil 4 unserer Instagram Klon App mit GraphQL werden wir das Erlernen von SwiftUI fortsetzen und unsere Home-Ansicht erstellen.

In unseren vorherigen Artikeln haben wir gelernt , wie man einen Benutzer anmeldet und wie man einen Benutzer einloggt und die Profilansicht mit den entsprechenden UIs in unserer Instagram-Klon-App erstellt. Heute werden wir einen Teil dieses Codes wiederverwenden und etwas Ähnliches wie eine UIScrollView mit viel Inhalt erstellen.

Schnallt euch an und lasst uns loslegen!

Um besser zu lernen, laden Sie das iOS Instagram Clone Projekt mit Quellcode herunter.

Willst du einen schnellen Start?

Klonen Sie diese App von unserem Hub und nutzen Sie sie ohne Probleme!

Was wir genau bauen werden

Wir werden die folgende Ansicht erstellen:

Wie wir bereits gesehen haben, macht es SwiftUI wirklich einfach, solch komplexe Oberflächen zu bauen, da man viele Komponenten sehr einfach wiederverwenden kann. Das Wort hier ist “wiederverwenden”.

Erinnern Sie sich, dass wir die untere Leiste bereits kodiert haben? Wir werden sie hierfür wiederverwenden. Alles andere ist neu.

Ich werde nicht noch einmal auf VStacks und HStacks eingehen, wenn Sie diesen Teil also verpasst haben, können Sie ihn hier nachlesen.

Unsere UI-Komponenten

Dieser Bildschirm wird im Wesentlichen aus vier Komponenten bestehen:

• Die obere Leiste (mit der Kamera, der Back4Gram-Zeichenfolge, dem Haussymbol und dem Papierflugzeugsymbol)
• Verlaufsleiste (mit den Symbolen für den Verlauf)
• Zeitleiste Detaillierte Ansicht (mit den aktuellen Beiträgen)
• Untere Leiste (die wir wiederverwenden werden)

Fangen wir an, diese zu bauen!

Obere Leiste

Die obere Leiste besteht aus fünf Komponenten:

• Kamera-Schaltfläche
• Back4Gram Zeichenfolge
• Abstandshalter
• Haus-Schaltfläche
• Schaltfläche “Papierflieger

Fügen Sie die Symbole für die Schaltflächen hinzu, wie Sie es bereits gelernt haben, und beginnen Sie mit der Codierung.

Erstellen Sie die Datei HomeView.swift und fügen Sie einen GeometryReader hinzu, damit wir die Größe schön anpassen können:

Und wie im vorherigen Tutorial fügen wir einen VStack hinzu, da alles in einer vertikalen Achse angezeigt wird:

Unsere obere Leiste wird eine Verbindung von horizontal ausgerichteten Komponenten sein, also fügen wir den HStack hinzu, um sie zu erstellen:

Und schließlich fügen wir die Steuerelemente hinzu, die wir verwenden werden:

Wie sieht es aus?

Wir haben es geschafft!

Lassen Sie uns nun ein wenig über die

Verlaufsleiste

Die Verlaufsleiste ist selbst eine komplexe Komponente. Sie ist genau wie eine UIScrollView aus dem alten UIKit, aber in ihr haben wir ein Steuerelement, das aus einem Bild und einem Text darunter besteht (auch bekannt als VStack). Lassen Sie uns diese Struktur erstellen:

Das Einfügen in unseren Haupt-VStack ist so einfach wie das Hinzufügen der ScrollView. Und um es noch schöner zu machen, lassen wir es nur horizontal scrollen und blenden die Scrollindikatoren aus:

und fügen Sie ihn schließlich zu unserem Haupt-VStack hinzu:

Prüfen Sie das Aussehen:

Machen wir einen Sprung nach vorn und fügen zuerst unsere…

Untere Leiste

Genießen wir jetzt die Wiederverwendbarkeit. Fügen Sie sie einfach aus unserer Datei BottomBar.swift in unseren Code ein:

Und unser vollständiger Code:

War das nicht einfach? Wie sieht es aus?

Wahnsinn!

Etwas Komplexität hinzufügen

Der komplexeste Teil dieser Ansicht wird die Detailansicht der Zeitleiste sein.

Um die Konsistenz mit unserer TimelineView zu wahren, erstellen wir eine neue Datei mit dem Namen TimlineDetailView.swift und erstellen darin eine neue Struktur, die die Daten genau wie in unserer TimelineView enthält.

Erinnern Sie sich daran, dass wir unsere Vorschau-Struktur bereits in unserer TimelineView deklariert haben, also lassen Sie uns auch diese wiederverwenden.

Die Struct wird eine Vorschau erhalten, damit wir später die imageUrl abrufen können:

Und wenn das erledigt ist, fügen wir die Ansicht selbst hinzu:

Der Hauptinhalt wird sich ebenfalls in einem VStack befinden:

Und dieser VStack wird vier Komponenten haben:

• Ein HStack mit dem Logo, den Texten und dem Drei-Punkte-Button
• Das Bild des Beitrags
• Ein HStack mit dem Herz-Button, dem Kommentar-Button, dem Papierflieger-Button und dem Flaggen-Button
• Ein VStack mit den Texten “Geliebt von…” und “Alle Kommentare anzeigen”.

Beginnen wir also mit dem Hinzufügen des ersten HStacks:

Und fügen Sie die Steuerelemente darin hinzu:

Dann das Bild:

Unser zweiter HStack mit allen Schaltflächen:

Und die Steuerelemente:

Und zu guter Letzt unser VStack mit den Texten:

Nun wollen wir in unserer TimelineDetailView ein paar Vorschauen hardcodieren:

Und schließlich fügen wir in einer Schleife unsere PreviewDetailViews zu einem ScrollView hinzu:

Schließlich fügen wir diese zu unserer HomeView hinzu:

Zum Schluss sehen wir uns die Ergebnisse an:

Wie cool ist das denn!

Schlussfolgerung

Wiederverwendbarkeit ist der Schlüssel in SwiftUI.

Heute haben Sie gelernt, wie Sie die BottomView und die Preview-Struktur aus unseren vorherigen Artikeln wiederverwenden können.

Jetzt ist es Zeit für etwas Funktionalität und ich kann es kaum erwarten.

Bleiben Sie dran!

Referenz

• Teil 1 dieser Serie ist Instagram Clone App.
• Teil 2 ist Swift Instagram Clone.
• Teil 3 ist Instagram Profil.
• Teil 4 ist Instagram Homeview.
• Laden Sie ein iOS Instagram Clone Projekt mit Quellcode herunter und beginnen Sie mit Back4App.

Melden Sie sich jetzt bei Back4App an und beginnen Sie, Ihre Instagram Clone App zu erstellen.