En Instagram Klon mat SwiftUI a GraphQL - ProfileView

Haut an Deel 3 vun eiser Instagram Klon App mat GraphQL gi mir méi déif an de SwiftUI, bauen eis Profilvisioun.

Mir léieren d'Strukturen am SwiftUI z'notzen an diskutéieren iwwer e puer Kontrollen: VStack, HStack, GeometryReader, Text, Button, Spacer, Image, Divider ënner aneren.

An eise fréiere Artikele hu mir geléiert wéi een e Benotzer aschreift a wéi een e Benotzer aloggen, mat de respektiven UIs an eiser Instagram Klon App. Haut maachen mir et vill méi schéin.

Séier Är Gürtelrëm séier a lass et lass!

Wat genau mir bauen

Mir wäerten de folgende Bléck bauen:

SwiftUI mécht et wierklech einfach sou komplexe Schnëttplazen ze bauen well Dir vill Komponenten ganz einfach an einfach benotze kann.

Déi eenzeg Saach ass datt mir musse léieren wéi dës reusbar Komponenten erstallt ginn. Dass eng Vue ass tatsächlech eng Kombinatioun vu multiple Meenungen déi sech zu engem Schlussresultat integréieren. Eng vereinfacht Lëscht vu Komponenten ass wéi follegt:

Wou:

HStack, Vstack, Zstack wat?

SwiftUI baut seng UIs andeems Dir Vue vertikal alignéiert andeems Dir VStack (Vertikale Stack) benotzt an horizontal andeems HStack (Horizontale Stack) benotzt an Iwwerleeunge mat Zstack (Z wéi am Z-Index) iwwerlagert.

All Kéier wann Dir eng Vue ënner engem aneren braucht, sollt Dir e VStack benotzen.

All Kéier wann Dir eng Vue niewt engem aneren braucht, sollt Dir en HStack benotzen.

All Kéier wann Dir eng Vue braucht fir en aneren ze iwwergräifen, sollt Dir e ZStack benotzen.

Well eis Haaptavue aus ville Vue besteet déi een horizontal ënner dem aneren plazéiert ass, enthalen mir alles an den Haapt VStack a fänken vun do aus, awer et gëtt nach eng méi déi mir benotze wäerte fir de ganze Bildschierm ze besetzen: de GeometryReader An.

Et erlaabt eis alles als Funktioun vu senger (GeometryReader) Gréisst a Koordinaten ze rendéieren.

Ëmbenennbarkeet

Reusability ass eng vun de Schéinheeten vum SwiftUI, sou datt mir komplex Kontrollen kreéiere kënnen an se iwwerall benotze wou néideg.

Fir dës App ginn et haaptsächlech zwee Komponenten déi mir a verschiddene Usiichten widerhuelen: d'Timeline an déi ënnescht Bar:

Aus dësem Grond wäerte mir dës UI Coden separat kreéieren sou datt et méi organiséiert gëtt. All den aneren UI-Code spezifesch fir eng Vue kann an de Code-Datei vun dëser Vue bleiwen.

Also loosst eis ufänken ...

Erstellt eise Profil View

Füügt eng nei SwiftUI Datei an en nennt et ProfileView.swift.

Wéi mir Komponente matenee fir de Bildschierm ausfëllen, loosse mer nach e GeometryReader addéieren, sou datt mir all Kontrollen dobausse verséchere wäerten seng Gréisst a Koordinaten benotzen:

Elo gëtt eis Sicht an en Haapt VStack opgebaut déi all eis Kontrollen enthält, also loosse mer dat och nach addéieren:

An eis alleréischten "Linn" vu Kontrollen ass deen ieweschten:

Wat wéi eng einfach Linn vu Kontrollen ausgesäit ass tatsächlech verschidde Kontrollen:

  • den "Benotzernumm" Text
  • dee klenge Pfeil déi hannendru weist
  • e Spacer fir de Raum tëscht deem klenge Pfeil an der nächster Kontroll ze fëllen
  • engem Hamburger Knäppchen op der rietser

Mir benotze Symboler fir d'Knäppercher, also gitt sécher e puer gratis Symboler ze fannen. Eng gutt Plaz fir déi ze fannen ass hei.

Also, loosst eis HStack addéieren:

An an deem, eisen éischten Text:

Sou wäit dat huet Iech méiglecherweis dëst bruecht:

An der Rei. Et ass e Start.

Loosst eis et op der lénker Säit alignéieren andeems Dir eng

(Ausrichtung: .leading)

Code un eise VStack:

Mir kënnen och e puer Text Eegeschafte addéieren fir et méi konsequent mat eisem Design ze maachen:

Fir seng Faarf op eis LiichtBlueColor ze setzen deen an eisem AppDelegate definéiert ass:

.viregroundColor (LiichtBlueColor)

Fir de Schrëftgewiicht z'änneren

.fontWeight (.sibibold)

An endlech e puer Padding (Space) an der féierender Säit ze addéieren:

.padding (.leading, 10)

An Äre Code sollt elo esou ausgesinn:

An Ären UI sollt esou ausgesinn:

Elo loosst den klenge Pfeil Knäppchen derbäi.

Wéi Dir am Deel 2 vun dësem Artikel geléiert hutt, füügt d'Bild fir de Pfeil erof fir eise Knäppchen, a loosst eis de Knäppchen fir eise SwiftUI Code derbäi:

Knäppchen (Aktioun: {}) {}

An eist Bild derbäi:

Knäppchen (Aktioun: {}) {Bild ("Pfeil erof"). Resizéierbar () .frame (Breet: 10, Héicht: 10)}

A just fir Ängscht ze maachen, loosst eis e puer Padding uewen addéieren:

Knäppchen (Aktioun: {}) {Bild ("Pfeil erof"). Resizéierbar () .frame (Breet: 10, Héicht: 10)}. Padding (.top, 5)

Eise komplette Code sollt elo esou sinn:

An eis UI:

Elo loosst den Hamburger Knäpp derbäi ginn:

Knäppchen (Aktioun: {}) {Bild ("Menu") .verännerbar () .frame (Breet: 20, Héicht: 20)} .padding ()

Eise komplette Code:

An eis Meenung:

Wann et nëmmen eppes wier wat mir tëscht deenen zwee Knäpper kéinte setzen fir all de Raum tëscht hinnen ze huelen an alles ze alignéieren ...

Spacer ()

Elo gesäit et gutt aus!

Eise voll Code bis elo:

An elo loosst eis just d'Héicht vun deem HStack fixéieren an et e puer Polsterung op der féierlecher Säit ginn, a mir si gutt ze goen:

.frame (Héicht: 50). padding (.leading, 10)

Voll Code:

Elo kënne mir eis…

Zweet HStack

Wéi mir alles an engem Haapt VStack erstallt hunn, gëtt all nei Kontroll déi mir dobausse vun deem éischten HStack addéieren automatesch ënner him gesat.

Also ass et Zäit eis zweet HStack ze maachen an den zweeten Deel vun eisem Bildschierm ze bauen:

Dëst wäert och en HStack sinn, enthale 4 VStacks dobannen: ee fir d'Bild an Text drënner, an 3 fir d'Zuelen mat Text ënner hinne.

Wéi Dir méiglecherweis d'Konzept bis elo krut, loosst ech de komplette Code fir dësen neien HStack:

An eise komplette Code wier:

Also eis Vue wäert esou ausgesinn:

Schéin!

Füügt eis Edit Profil Knäppchen an Divider

Ee géif probéieren de Gedanken ze maachen datt den Edit Profil Knäppchen an den Divider ënner et sollt an engem VStack sinn:

Awer dat ass net wierklech noutwendeg well eis ganz Vue an eisem Haapts VStack ass, sou datt mir se einfach an eise Code bäidroen:

Knäppchen (Aktioun: {}) {Text ("Profil änneren") .fontWeight (.bold) .foregroundColor (lightBlueColor)} .frame (Breet: 400). Padding () Divider ()

dat géif esou ausgesinn:

an eisen UI:

Spott eis Timeline

Eis Timeline View gëtt an aneren Deeler vun der Applikatioun benotzt, sou datt et Sënn mécht et an enger anerer Datei ze briechen. Et kéint vu bannen an eisem ProfileView genotzt ginn genau datselwecht, awer et hält d'Saache méi organiséiert wann mir de Code splitten.

Erstellt eng TimelineView.swift Datei.

Et gi vill verschidde Weeër fir Daten am SwiftUI ze weisen, awer ech hunn dës fir meng App gewielt:

  • Eis Timeline Vue ass e VStack vun LineViews
  • All LineView ass en HStack komponéiert vun 3 PreviewViews
  • All PreviewView huet e Bild dran

Déi éischt Saach, déi ech maachen, ass e Strukt erstellen fir eis Daten ze halen. Ech ruffen dee Stru Preview an et huet 2 Parameteren: eng ID (Typ Int) fir ze iteréieren an eng imageURL (Typ String) déi d'URL fir eng Bild hält déi ech passéieren:

struct Preview {var id: Int let imageUrl: String}

Wéi ech gesot hunn, Dir kënnt e anere Wee wielen fir Är Donnéeën ze weisen, awer ech hunn dat ganz einfach fonnt ze verstoen, also loosst eis de Strukt fir eis PreviewView als éischt addéieren. Eise Strukt huet eng Preview Eegeschafte wou ech spéider astellen, awer mir benotze de bildURL Properties fir d'Bild ze maachen:

struct PreviewView: View {let preview: Preview var body: puer View {Image (preview.imageUrl). resizable () .frame (Breet: 136, Héicht: 136)}}

mat deem gemaach, kënne mir de Strukt fir eise LineView addéieren, deen eng Array vun 3 Previews kritt fir an der Linn ze weisen. Ech wäert dat an Zukunft änneren fir richteg Donnéeën ze reflektéieren, awer fir de Moment ass et OK:

struct LineView: View {let previewArray: [Preview] var body: puer View {HStack (Abstand: 2) {PreviewView (preview: previewArray [0]) PreviewView (preview: previewArray [1]) PreviewView (preview: previewArray [2] )}}}

Schlussendlech kënne mir eng Array vun Preview Objekter kreéieren déi mir duerchschloen:

loosse Previews: [Preview] = [Preview (id: 0, imageUrl: "1"), Preview (id: 1, imageUrl: "2"), Preview (id: 2, imageUrl: "3"), Preview (id: : 3, imageUrl: "4"), Preview (id: 4, imageUrl: "5"), Preview (id: 5, imageUrl: "6"), Preview (id: 6, imageUrl: "7"), Preview (id: 7, imageUrl: "8"), Preview (id: 8, imageUrl: "9"), Preview (id: 9, imageUrl: "10"), Preview (id: 10, imageUrl: "11") , Preview (id: 11, imageUrl: "12"), Preview (id: 12, imageUrl: "13")]

Dës Array huet 13 Objeten an ech hunn d'Biller bezeechent déi ech mat Nimm vun 1 bis 13. Ech benotzen dës Biller och a mengem Assets Dossier, awer nach eng Kéier wäert ech dat an Zukunft änneren:

Elo datt mir alles gemaach hunn, kënne mir et duerch eis Array iteréieren an eis LinePreviews erstellen andeems mir 3 Virschauobjekter dermat ofginn. Notice Ech passéieren datselwecht Objet, awer nach eng Kéier, dëst ass temporär fir ze weisen a wäert geännert ginn:

var body: puer View {ScrollView {VStack (Ausrichtung: .leading, Abstand: 2) {ForEach (previews, id: \ .id) {preview an LineView (previewArray: [preview, preview, preview])}}}}

Also eise komplette Code wier sou eppes:

A wa mir et vun eisem ProfileView.swift direkt ënner eisem Divider nennen:

... Knäppchen (Aktioun: {}) {Text ("Profil änneren") .fontWeight (.bold) .foregroundColor (lightBlueColor)} .frame (Breet: 400). Padding () Divider () TimelineView (). Padding () .leading, 10) ...

Mir kënnen och en anere Divider derbäi addéieren, sou datt mir bal dat lescht Resultat hunn, dat mir wëllen:

... Knäppchen (Aktioun: {}) {Text ("Profil änneren") .fontWeight (.bold) .foregroundColor (lightBlueColor)} .frame (Breet: 400). Padding () Divider () TimelineView (). Padding () .leading, 10) Divider () ...

Wéi gesäit et aus?

Gesäit et scho schéin aus?

Loosst eis et fäerdeg maachen ...

Ënnen View

Déi ënnen Vue ass nach eng aner Datei, well mir se a verschidden Deeler vun der Applikatioun benotzen.

Erstellt Är BottomView.swift Datei an an en erstellt en HStack (als Knäpper wëlle matenee stoen) vu 4 Knäpper mat Spacers ënner hinnen. Vergiess d'Ikonen net!

Dëst war einfach! Loosst eis et an eisem ProfileView.swift integréieren, direkt ënner eisem leschten Divider:

... Divider () TimelineView (). Padding (.leading, 10) Divider () BottomView () ...

Also eise komplette Code of ProfileView wär:

A schliisslech…

Mir hunn eis voll ProfilView:

Elo, wéi genial war dat!

Konklusioun

Haut hutt Dir geléiert wéi ee Profil View zu Ärer App mocken. Et ass ëmmer nach ëmmer e Spott, awer mir ginn et e puer Funktionalitéit mat der Zäit.

Dir hutt geléiert wéi Komponenten am SwiftUI erstallt an nei benotzen an wéi schéi se benotze fir eng komplex Vue ze kreéieren. Fantastesch!

Mir erstellen e puer aner Views am nächsten Artikel!

Bleift drun!

Ursprénglech op https://blog.back4app.com de 16. September 2019 verëffentlecht.