Ein Instagram-Klon mit SwiftUI und GraphQL – ProfileView
Heute in Teil 3 unserer Instagram-Klon-App mit GraphQL werden wir tiefer in SwiftUI einsteigen und unsere Profilansicht bauen.
Wir werden lernen, Strukturen in SwiftUI wiederzuverwenden und einige Steuerelemente besprechen: VStack, HStack, GeometryReader, Text, Button, Spacer, Image, Divider und andere.
In unseren vorherigen Artikeln haben wir gelernt , wie man einen Benutzer anmeldet und wie man einen Benutzer einloggt, mit den entsprechenden UIs in unserer Instagram-Klon-App. Heute werden wir es noch viel schöner machen.
Schnallt euch an und lasst uns loslegen!
Um besser zu lernen, laden Sie das iOS Instagram Clone Projekt mit Quellcode herunter.
Contents
- 1 Willst du einen schnellen Start?
- 2 Was wir genau bauen werden
- 3 HStack, Vstack, Zstack was?
- 4 Wiederverwendbarkeit
- 5 Erstellen unserer Profilansicht
- 6 Zweiter HStack
- 7 Hinzufügen der Schaltfläche “Profil bearbeiten” und des Teilers
- 8 Mocking unserer Zeitleiste
- 9 Untere Ansicht
- 10 Und schließlich…
- 11 Fazit
- 12 Referenz
- 13 Was ist der Pluspunkt von SwiftUI?
- 14 Was ist Hstack, Vstack und Zstack?
- 15 Was ist die beste Funktion von SwiftUI?
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:
SwiftUI macht es wirklich einfach, solche komplexen Schnittstellen zu bauen, da man viele Komponenten sehr einfach und unkompliziert wiederverwenden kann.
Die einzige Sache ist, dass wir lernen müssen, wie man diese wiederverwendbaren Komponenten erstellt. Diese eine Ansicht ist eigentlich eine Kombination aus mehreren Ansichten, die in ein Endergebnis integriert werden.
Eine vereinfachte Liste von Komponenten ist die folgende:
Wo:
- VStack
- Hstack
- Tatsächliche Steuerelemente (Schaltflächen, Trennlinien usw.)
HStack, Vstack, Zstack was?
SwiftUI baut seine Benutzeroberflächen auf, indem es die Ansichten vertikal mit VStack (Vertical Stack) und horizontal mit HStack (Horizontal Stack) ausrichtet und die Ansichten mit Zstack (Z wie z-index) überlagert.
Immer, wenn Sie eine Ansicht unter einer anderen benötigen, sollten Sie einen VStack verwenden.
Jedes Mal, wenn Sie eine Ansicht neben einer anderen benötigen, sollten Sie einen HStack verwenden.
Jedes Mal, wenn eine Ansicht eine andere überlagern soll, sollten Sie einen ZStack verwenden.
Da unsere Hauptansicht aus vielen horizontal übereinander angeordneten Ansichten besteht, werden wir alles in den Haupt-VStack packen und von dort aus starten, aber es gibt noch etwas, das wir verwenden müssen, um den gesamten Bildschirm zu belegen: den GeometryReader.
Er ermöglicht es uns, alles in Abhängigkeit von seiner (GeometryReaders) Größe und seinen Koordinaten zu rendern.
Wiederverwendbarkeit
Wiederverwendbarkeit ist eine der Schönheiten von SwiftUI, so dass wir komplexe Steuerelemente erstellen und sie überall wiederverwenden können.
In dieser App gibt es hauptsächlich zwei Komponenten, die wir in verschiedenen Ansichten wiederverwenden werden: die Zeitleiste und die untere Leiste:
Aus diesem Grund werden wir diese UI-Codes separat erstellen, damit es übersichtlicher wird. Alle anderen UI-Codes, die spezifisch für eine Ansicht sind, können in der Codedatei dieser Ansicht bleiben.
Fangen wir also an…
Erstellen unserer Profilansicht
Fügen Sie eine neue SwiftUI-Datei hinzu und nennen Sie sie ProfileView.swift.
Da wir die Komponenten so anordnen werden, dass sie den Bildschirm ausfüllen, fügen wir einen GeometryReader hinzu, damit wir sicherstellen können, dass alle Steuerelemente darin seine Größe und Koordinaten verwenden:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
}
}
}
Unsere Ansicht wird nun in einen Haupt-VStack eingebaut, der alle unsere Steuerelemente enthält, also fügen wir auch diesen hinzu
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack{
}
}
}
}
Unsere allererste “Zeile” von Steuerelementen wird die oberste sein:
Was wie eine einfache Zeile von Steuerelementen aussieht, sind in Wirklichkeit mehrere Steuerelemente:
- der “Benutzername”-Text
- der kleine Pfeil, der daneben nach unten zeigt
- ein Abstandshalter, der den Raum zwischen dem kleinen Pfeil und dem nächsten Steuerelement ausfüllt
- eine Hamburger-Schaltfläche auf der rechten Seite
Wir werden Icons für die Schaltflächen verwenden, also suchen Sie sich ein paar freie Icons. Ein guter Ort, um diese zu finden, ist Freepik.
Also, fügen wir unseren HStack hinzu:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack{
HStack{
}
}
}
}
}
Und darin, unser erster Text:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack{
HStack{
Text("username")
}
}
}
}
}
Das hat Sie wahrscheinlich bis hierher gebracht:
Nun gut. Das ist ein Anfang.
Richten wir es an der linken Seite aus, indem wir ein
(Ausrichtung: .leading)
Code zu unserem VStack hinzufügen:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
}
}
}
}
}
Wir können auch einige Texteigenschaften hinzufügen, um sie besser an unser Design anzupassen:
Um seine Farbe auf unsere hellblaue Farbe zu setzen, die in unserem AppDelegate definiert ist:
.foregroundColor(lightBlueColor)
Um die Schriftstärke zu ändern:
.fontWeight(.semibold)
Und schließlich fügen Sie an der vorderen Seite eine Auffüllung (Leerzeichen) hinzu:
.padding(.leading, 10)
Ihr Code sollte nun wie folgt aussehen:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
}
}
}
}
}
Und so sollte Ihre Benutzeroberfläche aussehen:
Fügen wir nun die kleine Pfeil-Schaltfläche hinzu.
Wie Sie in Teil 2 dieses Artikels gelernt haben, fügen Sie das Bild für den Pfeil nach unten für unsere Schaltfläche hinzu, und lassen Sie uns die Schaltfläche zu unserem SwiftUI-Code hinzufügen:
Button(action: {}){
}
Und fügen Sie unser Bild hinzu:
Button(action: {}){
Image("arrow-down")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
Und nur zur Orientierung fügen wir oben noch etwas Polsterung hinzu:
Button(action: {}){
Image("Pfeil nach unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Unser vollständiger Code sollte nun wie folgt aussehen:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
}
}
}
}
}
Und unser UI:
Fügen wir nun die Hamburger-Schaltfläche auf die gleiche Weise hinzu:
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
Unser vollständiger Code:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
}
}
}
}
}
Und unsere Ansicht:
Wenn es doch nur etwas gäbe, das wir zwischen diese beiden Schaltflächen setzen könnten, um den gesamten Platz dazwischen zu nutzen und alles auszurichten…
Abstandshalter()
Jetzt sieht es gut aus!
Unser vollständiger Code bis jetzt:
struct ProfileView: View {
var body: some View {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
}
}
}
}
}
Jetzt müssen wir nur noch die Höhe des HStacks festlegen und ihm etwas Polsterung an der vorderen Seite geben, und wir sind startklar:
.frame(height: 50) .padding(.leading, 10)
Vollständiger Code:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
}.frame(height: 50)
.padding(.leading, 10)
}
}
}
}
Jetzt können wir mit unserem…
Zweiter HStack
Da wir alles innerhalb eines Haupt-VStacks erstellt haben, wird jedes neue Steuerelement, das wir außerhalb dieses ersten HStacks hinzufügen, automatisch darunter eingefügt.
Es ist also an der Zeit, unseren zweiten HStack zu erstellen und den zweiten Teil unseres Bildschirms zu bauen:
Dies wird ebenfalls ein HStack sein, der 4 VStacks enthält: einen für das Bild und den Text darunter, und 3 für die Zahlen mit dem Text darunter.
Da Sie das Konzept jetzt wahrscheinlich verstanden haben, gebe ich den vollständigen Code für diesen neuen HStack wieder:
HStack{
VStack{
Bild("logo-social")
.resizable()
.frame(Breite: 90, Höhe: 90)
.clipShape(Kreis())
.shadow(radius: 3)
.overlay(Kreis().stroke(Farbe.rosa, lineWidth: 1))
Text("Ihr Name")
.foregroundColor(HellblauFarbe)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Veröffentlichungen")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Follower")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Folgende")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(height: 100)
.padding(.leading, 10)
Und unser vollständiger Code wäre:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
}.frame(Höhe: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(Breite: 90, Höhe: 90)
.clipShape(Kreis())
.shadow(radius: 3)
.overlay(Kreis().stroke(Farbe.rosa, lineWidth: 1))
Text("Ihr Name")
.foregroundColor(hellblauFarbe)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Veröffentlichungen")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Follower")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Folgende")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(height: 100)
.padding(.leading, 10)
}
}
}
}
Unsere Ansicht wird also so aussehen:
Toll!
Hinzufügen der Schaltfläche “Profil bearbeiten” und des Teilers
Man könnte meinen, dass die Schaltfläche “Profil bearbeiten” und der darunter liegende Divider in einem VStack liegen sollten:
Aber das ist nicht wirklich notwendig, da sich unsere gesamte Ansicht in unserem Haupt-VStack befindet, also können wir sie einfach zu unserem Code hinzufügen:
Button(action: {}){
Text("Profil bearbeiten")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divider()
die wie folgt aussehen würde:
struct ProfileView: View {
var body: some Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
}.frame(Höhe: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(Breite: 90, Höhe: 90)
.clipShape(Kreis())
.shadow(radius: 3)
.overlay(Kreis().stroke(Farbe.rosa, lineWidth: 1))
Text("Ihr Name")
.foregroundColor(HellblauFarbe)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Veröffentlichungen")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Follower")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Folgende")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(height: 100)
.padding(.leading, 10)
Button(action: {}){
Text("Profil bearbeiten")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divider()
}
}
}
}
und unsere UI:
Mocking unserer Zeitleiste
Unsere Timeline-Ansicht wird in anderen Teilen der Anwendung verwendet werden, daher ist es sinnvoll, sie in einer anderen Datei zu unterbrechen.
Sie könnte genauso gut innerhalb unserer ProfileView wiederverwendet werden, aber so bleibt alles übersichtlicher, wenn wir den Code aufteilen.
Erstellen Sie eine TimelineView.swift-Datei.
Es gibt viele verschiedene Möglichkeiten, Daten in SwiftUI anzuzeigen, aber ich habe diese für meine App gewählt:
- Unsere Zeitleistenansicht ist ein VStack von LineViews
- Jede LineView ist ein HStack bestehend aus 3 PreviewViews
- Jede PreviewView hat ein Bild in ihr
Als erstes werde ich eine Struktur erstellen, um unsere Daten zu speichern. Ich nenne diese Struktur Preview und sie hat 2 Parameter: eine id (Typ Int), um zu iterieren und eine imageURL (Typ String), die die URL für ein Bild enthält, das ich übergeben werde:
struct Vorschau {
var id: Int
let imageUrl: String
}
Wie gesagt, man könnte auch einen anderen Weg wählen, um die Daten anzuzeigen, aber ich fand dies sehr einfach zu verstehen, also fügen wir zuerst die Struktur für unsere PreviewView hinzu.
Unsere Struktur hat eine Preview-Eigenschaft, die ich später festlegen werde, aber ich werde die imageURL-Eigenschaft verwenden, um das Bild zu rendern:
struct PreviewView: View {
let preview: Preview
var body: some Ansicht {
Image(preview.imageUrl)
.resizable()
.frame(Breite: 136, Höhe: 136)
}
}
Wenn das erledigt ist, können wir die Struktur für unsere LineView hinzufügen, die ein Array mit 3 Vorschauen erhält, die in der Zeile angezeigt werden sollen.
Ich werde das in der Zukunft ändern, um echte Daten wiederzugeben, aber für den Moment ist das OK:
struct LineView: View {
let previewArray:[Vorschau]
var body: some View {
HStack(spacing: 2){
PreviewView(preview: previewArray[0])
PreviewView(vorschau: previewArray[1])
PreviewView(preview: previewArray[2])
}
}
}
Schließlich können wir ein Array von Vorschauobjekten erstellen, das wir in einer Schleife durchlaufen werden:
let previews:[Preview] = [
Vorschau(id: 0, imageUrl: "1"),
Vorschau(id: 1, imageUrl: "2"),
Vorschau(id: 2, imageUrl: "3"),
Vorschau(id: 3, imageUrl: "4"),
Vorschau(id: 4, imageUrl: "5"),
Vorschau(id: 5, imageUrl: "6"),
Vorschau(id: 6, imageUrl: "7"),
Vorschau(id: 7, imageUrl: "8"),
Vorschau(id: 8, imageUrl: "9"),
Vorschau(id: 9, imageUrl: "10"),
Vorschau(id: 10, imageUrl: "11"),
Vorschau(id: 11, imageUrl: "12"),
Vorschau(id: 12, imageUrl: "13")
]
Dieses Array hat 13 Objekte, und ich habe die Bilder, die ich verwenden werde, mit Namen von 1 bis 13 referenziert. Ich habe diese Bilder auch in meinem Ordner Assets gespeichert, aber auch das werde ich in Zukunft ändern:
Nun, da wir alles erledigt haben, können wir unser Array durchgehen und unsere LinePreviews erstellen, indem wir 3 Vorschauobjekte übergeben.
Beachten Sie, dass ich dasselbe Objekt übergebe, aber auch dies ist nur vorübergehend für die Anzeige und wird geändert werden:
var body: some Ansicht {
ScrollView{
VStack(alignment: .leading, spacing: 2){
ForEach(previews, id: \.id) { preview in
LineView(previewArray: [preview, preview, preview])
}
}
}
}
Unser vollständiger Code würde also etwa so aussehen:
struct TimelineView: Ansicht {
let previews:[Preview] = [
Vorschau(id: 0, imageUrl: "1"),
Vorschau(id: 1, imageUrl: "2"),
Vorschau(id: 2, imageUrl: "3"),
Vorschau(id: 3, imageUrl: "4"),
Vorschau(id: 4, imageUrl: "5"),
Vorschau(id: 5, imageUrl: "6"),
Vorschau(id: 6, imageUrl: "7"),
Vorschau(id: 7, imageUrl: "8"),
Vorschau(id: 8, imageUrl: "9"),
Vorschau(id: 9, imageUrl: "10"),
Vorschau(id: 10, imageUrl: "11"),
Vorschau(id: 11, imageUrl: "12"),
Vorschau(id: 12, imageUrl: "13")
]
var body: some Ansicht {
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 Ansicht {
TimelineView()
}
}
struct Vorschau {
var id: Int
let imageUrl: String
}
struct LineView: View {
let previewArray:[Vorschau]
var body: some Ansicht {
HStack(spacing: 2){
PreviewView(preview: previewArray[0])
PreviewView(vorschau: previewArray[1])
PreviewView(preview: previewArray[2])
}
}
}
struct PreviewView: Ansicht {
let preview: Preview
var body: some Ansicht {
Image(preview.imageUrl)
.resizable()
.frame(Breite: 136, Höhe: 136)
}
}
Und wenn wir es von unserer ProfileView.swift direkt unter unserem Divider aufrufen:
...
Button(action: {}){
Text("Profil bearbeiten")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(Breite: 400)
.padding()
Divider()
TimelineView().padding(.leading, 10)
...
Wir können auch einen weiteren Divider direkt darunter hinzufügen, so dass wir fast das gewünschte Endergebnis haben:
...
Button(action: {}){
Text("Profil bearbeiten")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(Breite: 400)
.padding()
Divider()
TimelineView().padding(.leading, 10)
Teiler()
...
Wie sieht es aus?
Sieht es schon gut aus?
Fügen wir zum Schluss noch unsere …
Untere Ansicht
Die untere Ansicht wird eine weitere Datei sein, da wir sie in mehreren Teilen der Anwendung verwenden werden.
Erstellen Sie Ihre BottomView.swift-Datei und erstellen Sie darin einen HStack (da die Schaltflächen nebeneinander liegen werden) mit 4 Schaltflächen und Spacern dazwischen. Vergessen Sie die Icons nicht!
struct BottomView: View {
var body: einige Ansicht {
HStack{
Button(action: {}){
Image("home")
.resizable()
.frame(Breite: 30, Höhe: 30)
}.padding()
Spacer()
Button(action: {}){
Image("Suche")
.resizable()
.frame(Breite: 30, Höhe: 30)
}.padding()
Spacer()
Button(action: {}){
Image("plus-button")
.resizable()
.frame(Breite: 30, Höhe: 30)
}.padding()
Spacer()
Button(action: {}){
Bild("Herz")
.resizable()
.frame(Breite: 30, Höhe: 30)
}.padding()
Spacer()
Button(action: {}){
Image("user")
.resizable()
.frame(Breite: 30, Höhe: 30)
}.padding()
}.frame(height: 35)
}
}
Das war einfach! Integrieren wir es in unsere ProfileView.swift, direkt unter unserem letzten Divider:
...
Teiler()
TimelineView().padding(.leading, 10)
Teiler()
BottomView()
...
Unser vollständiger Code für ProfileView wäre also:
SwiftUI importieren
struct ProfileView: View {
var body: einige Ansicht {
GeometryReader { geometry in
VStack(Ausrichtung: .leading){
HStack{
Text("username")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Image("Pfeil-nach-unten")
.resizable()
.frame(Breite: 10, Höhe: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Image("menu")
.resizable()
.frame(Breite: 20, Höhe: 20)
}.padding()
}.frame(Höhe: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(Breite: 90, Höhe: 90)
.clipShape(Kreis())
.shadow(radius: 3)
.overlay(Kreis().stroke(Farbe.rosa, lineWidth: 1))
Text("Ihr Name")
.foregroundColor(hellblauFarbe)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Veröffentlichungen")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Follower")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Folgende")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(height: 100)
.padding(.leading, 10)
Button(action: {}){
Text("Profil bearbeiten")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(width: 400)
.padding()
Divider()
TimelineView().padding(.leading, 10)
Teiler()
BottomView()
}
}
}
}
struct ProfileView_Previews: PreviewProvider {
static var previews: some Ansicht {
ProfileView()
}
}
Und schließlich…
Wir haben unsere vollständige ProfileView:
Nun, wie toll war das!
Fazit
Heute hast du gelernt, wie du eine Profilansicht in deine App einbauen kannst. Noch ist es nur eine Attrappe, aber wir werden ihr mit der Zeit einige Funktionen geben.
Sie haben gelernt, wie Sie Komponenten in SwiftUI erstellen und wiederverwenden können und wie Sie diese wunderbar nutzen können, um eine komplexe Ansicht zu erstellen. Fantastisch!
Im nächsten Artikel werden wir ein paar andere Ansichten erstellen!
Bleiben Sie dran!
Referenz
- Teil 1 dieser Serie ist der Artikel Instagram Clone.
- Teil 2 ist der Artikel Swift Instagram Clone.
- Teil 3 ist der Artikel Instagram Clone Profil.
- Teil 4 ist der Artikel Insta Clone Homeview.
- Laden Sie ein iOS Instagram Clone Projekt mit Quellcode herunter und starten Sie mit Back4App.
Melden Sie sich jetzt bei Back4App an und beginnen Sie mit der Erstellung Ihrer Instagram Clone App.
Was ist der Pluspunkt von SwiftUI?
Wenn Sie Klone wie die Instagram-App erstellen möchten, ist SwiftUI die perfekte Lösung.
– Es unterstützt die Erstellung komplexer Benutzeroberflächen.
– Wiederverwendung von Komponenten.
– Die Wiederverwendung von Benutzeroberflächen ist einfach und unkompliziert.
Sie benötigen lediglich das Wissen, diese Komponenten gemeinsam wiederzuverwenden.
Was ist Hstack, Vstack und Zstack?
Diese Namen sind aufgrund der US-amerikanischen Darstellung miteinander verknüpft.
SwiftUI erstellt seine Benutzeroberflächen nach folgenden Mustern:
– Die Benutzeroberfläche wird vertikal mithilfe eines vertikalen Stapels erstellt.
– Die Benutzeroberfläche wird horizontal mithilfe eines horizontalen Stapels erstellt.
– Überlappende Ansichten werden mithilfe eines ZStacks erstellt.
Was ist die beste Funktion von SwiftUI?
Das Beste an SwiftUI ist die Wiederverwendbarkeit. Sie können die Komponenten immer wieder verwenden, um die Ansichten zu erstellen. Das gilt für alle Apps. Sie müssen wissen, wie Sie mit diesen Komponenten umgehen.
