Lag en rullevisning med raske: 9 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

For noen måneder siden visste jeg ikke eksistensen av swift og Xcode. I dag klarte jeg å utvikle en liten del av applikasjonen jeg vil lage. Jeg klarte å lage noe kult, som jeg gjerne vil dele med deg.

I denne opplæringen tar jeg deg gjennom prosessen med å bygge en rullevisningsscene, der brukere blir omdirigert når de vil registrere en ny konto. Underveis vil jeg sørge for å gi deg noen teoretiske forklaringer på tingene vi gjør, slik at du faktisk kan forstå hva det er vi gjør.

Før vi gjør det, la oss snakke om hva som er Swift og Xcode:

1. Swift er et kraftig og intuitivt programmeringsspråk for macOS, iOS, watchOS og tvOS. Å skrive Swift -kode er interaktivt og morsomt, syntaksen er kortfattet, men uttrykksfull, og Swift inkluderer moderne funksjoner utviklere elsker. Swift-koden er trygg med design, men produserer også programvare som kjører lynrask. Den er designet for å fungere med Apples rammeverk for kakao og kakao og den store mengden eksisterende Objective-C-kode som er skrevet for Apple-produkter. Den er bygget med åpen kildekode LLVM-kompilatorramme og har blitt inkludert i Xcode siden versjon 6, utgitt i 2014. På Apple-plattformer bruker den Objective-C runtime-biblioteket som lar C, Objective-C, C ++ og Swift-kode kjøre i ett program.

2. Xcode er et integrert utviklingsmiljø (IDE) for macOS som inneholder en pakke med programvareutviklingsverktøy utviklet av Apple for utvikling av programvare for macOS, iOS, watchOS og tvOS.

Trinn 1: Last ned Xcode

Xcode 10 inneholder alt du trenger for å lage fantastiske apper for alle Apple -plattformer. Nå ser Xcode og instrumenter flotte ut i den nye mørke modusen på macOS Mojave. Med kildekodeditoren kan du lettere transformere eller omforme kode, se endringer i kildekontroll ved siden av den relaterte linjen og raskt få detaljer om oppstrøms kodeforskjeller. Du kan bygge ditt eget instrument med tilpasset visualisering og dataanalyse. Swift kompilerer programvare raskere, hjelper deg med å levere raskere apper og genererer enda mindre binære filer. Testpakker fullføres mange ganger raskere, arbeid med et team er enklere og sikrere, og mye mer.

Xcode 10 inkluderer Swift 4.2, som kompilerer programvaren din raskere, hjelper deg med å levere raskere apper og genererer enda mindre binære filer. Sammenlignet med Swift 4.0 kan den nyeste Swift -kompilatoren bygge store apper mer enn dobbelt så raskt.* Kombinert med det nye Xcode -systemet for nybygging, er din daglige arbeidsflyt for redigering, bygging og test mye raskere. Xcode og Swift er optimalisert for den nyeste multi-core Mac-maskinvaren, og gir en lynrask utviklingsplattform.

Trinn 2: La oss komme i gang

Så det vi skal gjøre er å gå til Xcode og lage et nytt prosjekt. Når vi klikker på et nytt prosjekt, vil søknaden vår være en enkeltvisningsprogram. For de som ikke vet, betyr en enkelt visningsapp at du må starte alt fra bunnen av og at det vil være en enkelt visning som vi kan programmere.

Gi produktet ditt navnet TutorialApp. Hvis du er en erfaren utvikler som publiserer apper i App Store, vil du sannsynligvis ha et team, men hvis du er ny og ikke har noen programmer publisert, kan du hoppe over dette feltet. I organisasjonsnavnet kan du skrive navnet på selskapet i tilfelle du har et. I mitt tilfelle vil jeg bare beholde MacBook Pro. Deretter blir organisasjonsidentifikatoren betraktet som en unik identifikator for prosjektet ditt. Derfor kan du skrive hva du vil. Språket vil definitivt være raskt.

Så trykk på neste og la oss lagre prosjektet på skrivebordet, slik at det er enkelt å få tilgang til.

Det nye prosjektet består av tre filer, AppDelegate.swift, ViewController.swift og stjernen i denne opplæringen: Main.storyboard. Under distribusjonsinfo> Enhetsorientering i de generelle prosjektinnstillingene, angi enheter til iPhone. Siden dette er en app kun for portrett, fjerner du merket for alternativene Landscape Left og Landscape Right. Åpne Main.storyboard i prosjektnavigatoren for å se det i Interface Buildereditor:

Vi kommer ikke til å gjøre noen endringer i konfigurasjonen, og vi går direkte til hovedtavlen. Siden vi laget en enkelt visningsapp, har vi laget en enkel, tom, visning. Dette er noe vi må jobbe med.

Trinn 3: Arbeide i brukergrensesnittet

Den offisielle storyboard -terminologien for en visningskontroller er "scene", men du kan bruke begrepene om hverandre. En scene representerer en visningskontroller i storyboardet.

Her ser du en enkelt visningskontroller som inneholder en tom visning. Pilen som peker mot visningskontrolleren fra venstre indikerer at det er den første visningskontrolleren som skal vises for dette storyboardet. Å utforme et oppsett i storyboard-editoren gjøres ved å dra kontroller fra objektbiblioteket (se øverste høyre hjørne) til visningskontrolleren.

For å få en følelse av hvordan storyboard -redaktøren fungerer, dra noen kontroller fra objektbiblioteket til den tomme visningskontrolleren som sett i videoen.

Når du drar kontrollene inn, bør de vises i dokumentoversikten til venstre.

Du kan lage brukergrensesnittet du ønsker. I mitt tilfelle brukte jeg den du ser på bildet.

Trinn 4: Utvikle en Second View Controller og initier segmenter (overganger)

Så i appen min, når brukeren trykker på knappen "Registrer ny konto", vil jeg at han skal bli omdirigert til registerkontosiden. Så for dette formålet er hver eneste side en ny scene, en ny visning. Av den grunn må vi lage en andre visningskontroller, som du finner i objektbiblioteket.

Skriv visningskontrolleren og plasser den ved siden av den første visningskontrolleren. Denne scenen vil være ansvarlig for registervisningskontrolleren. Omdirigering til den siden kan gjøres på to måter:

1. vi kan gjøre det manuelt når vi oppretter en handlingstilkobling fra knappen til den andre visningskontrollen
2. vi kan gjøre det programatisk

Det jeg valgte å gjøre er å lage det manuelt. Det er enkelt som det:

1. Gjør ett venstre klikk på knappen din (i mitt tilfelle, registrer ny konto)
2. Hold kommandoen og venstre museklikk for å dra den til registerkontrollscenen.
3. Slipp den der og velg "Present Modally"

Trinn 5: Lag programmeringsklasse for registreringsprosess

Så nå vil vi lage en dedikert kodingsklasse for den nye scenen.

For å gjøre dette må du gjøre følgende:

• høyreklikk på prosjektmappen
• klikk på den nye filen som heter cocoa touch class
• skriv i klassen: RegisterVC
• VELDIG VIKTIG! Sørg for at underklassen må være av typen UIViewController
• språket må være raskt.
• klikk neste og lagre kakaoklassen din inne i hovedroten til prosjektet.
• Klikk på hovedtavlen og gå til den nye visningskontrolleren
• klikk på den gule knappen som er plassert over den
• til høyre gå til klasseinspektøren og referer til Register VC (Costum class, class = RegisterVC

Trinn 6: Bygg den horisontale sveipingen på siden

I iOS brukes rullevisninger for å se innhold som ikke passer helt på skjermen. Rullevisninger har to hovedformål:

For å la brukerne dra området med innholdet de vil vise, for å la brukerne zoome inn eller ut av det viste innholdet ved å bruke knipebevegelsene. En vanlig kontroll som brukes i iOS -apper - UITableView - er en underklasse av UIScrollView og gir en flott måte å se innhold som er større enn skjermen.

Hva bruker undersider i et horisontalt sveip?

Vel, hvis jeg skulle lage 6 forskjellige sider, ville det bety at jeg må lage en dedikert klasse for hver enkelt av dem, og det er ikke så praktisk å overføre informasjon fra en klasse til en annen. Når jeg for eksempel skriver inn e -posten min og klikker neste, hvis jeg har en annen visningskontroller, forlater jeg den første siden i visningskontrolleren, og så blir den andre presentert. I dette tilfellet må informasjonen til den første visningskontrolleren sendes videre til den neste og deretter igjen til den tredje visningskontrolleren osv. Når jeg har alle visningskontrollerne jeg trenger, må jeg samle alle dataene fra alle sidene og send dem til serveren. Så dette ville være veldig komplisert.

Så videre til opprettelsen av denne visningskontrolleren, i mitt tilfelle, hadde jeg 5 sider jeg ønsket å lage:

1. E -post
2. Fullt navn
3. Passord
4. Fødselsdato
5. Kjønn

Dette betyr at visningskontrolleren som vi skal lage, må være 5 ganger større enn den vi laget før.

Velg visningskontrolleren og gå til øverste, høyre hjørne og klikk på linjalikonet og rediger den simulerte størrelsen. Du vil velge Freeform for å justere bredden og høyden. Standardbredden på skjermen som er egnet for iphone 8 er 375, så hvis jeg multipliserer 375*5 = 1875. Og her har du en utvidet visningskontroller.

På samme måte følger du den samme prosessen for alle de forskjellige telefonene og skjermstørrelsene.

For å få rullevisningen til å fungere, trenger vi et rullevisningobjekt. Rullvisning gir en mekanisme for å vise innhold som er større enn størrelsen på programmets vindu. Klikk på dette objektet, dra det og plasser det i øverste venstre hjørne av visningskontrolleren, og kontroller at X og Y er på null posisjoner og at strekk er tilsvarende visningskontrolleren.

Rullvisning lar oss bare rulle, ingenting annet. Deretter må vi legge til en innholdsvisning, som lagrer andre visninger. Du kan finne UIView - den representerer et rektangulært område der den trekker og mottar hendelser - i objektbiblioteket. Bare klikk og dra den inn i rullevisningen, og strekk den igjen.

Velg rullevisningen fra venstre panel, så kaller vi justering 0, 0, 0, 0 og legger til begrensninger. Gjør det samme for innholdsvisning.

Trinn 7: Utvikle brukergrensesnittet for undersidene i den horisontale sveipingen

I dette trinnet må du lage brukergrensesnittet for undersidene dine. Det jeg valgte å gjøre, er å lage en prototype i Sketch og deretter bygge den i Xcode.

Trinn 8: Gjennomfør designet i Xcode

Det neste trinnet er å implementere dette designet i Xcode. For å gjøre dette må du opprette uttakstilkoblinger for alle undersidene og opprette en annen for "modervisning", det vil si én uttakstilkobling for hele visningskontrolleren.

Elementer i et storyboard er knyttet til kildekoden. Det er viktig å forstå forholdet et storyboard har til koden du skriver.

I et storyboard representerer en scene en skjerm med innhold og vanligvis en visningskontroller. Visekontrollere implementerer appens oppførsel og administrerer en enkelt innholdsvisning med hierarkiet av undervisninger. De koordinerer informasjonsflyten mellom appens datamodell, som innkapsler appens data, og visningene som viser disse dataene, administrerer livssyklusen til innholdsvisningene, håndterer retningsendringer når enheten roteres, definerer navigasjonen i appen din, og implementere atferden for å svare på brukerens input. Alle visningskontrollerobjekter i iOS er av typen UIViewController eller en av dens underklasser.

Du definerer oppførselen til visningskontrollerne i kode ved å opprette og implementere tilpassede visningskontrollerunderklasser. Du kan deretter opprette en forbindelse mellom disse klassene og scenene i storyboardet ditt for å få oppførselen du definerte i kode og brukergrensesnittet du definerte i storyboardet.

Xcode opprettet allerede en slik klasse som du så på tidligere, ViewController.swift, og koblet den til scenen du jobber med i storyboardet ditt. Etter hvert som du legger til flere scener, gjør du denne forbindelsen selv i identitetsinspektøren. Identitetsinspektøren lar deg redigere egenskapene til et objekt i storyboardet ditt knyttet til objektets identitet, for eksempel hvilken klasse objektet tilhører.

Lag uttak for brukergrensesnittelementer Utløp gir en måte å referere til grensesnittobjekter-objektene du la til i storyboardet-fra kildekodefiler. For å opprette et utsalgssted, kontroll-dra fra et bestemt objekt i storyboardet til en visningskontrollfil. Denne operasjonen oppretter en egenskap for objektet i visningskontrollfilen, som lar deg få tilgang til og manipulere objektet fra kode ved kjøretid

1. Åpne storyboardet ditt, Main.storyboard.
2. Klikk på Assistent -knappen på Xcode -verktøylinjen øverst til høyre i Xcode for å åpne assistentredaktøren. Hvis du vil ha mer plass til å arbeide, kan du skjule prosjektnavigatoren og verktøyområdet ved å klikke på knappene Navigator og Verktøy på Xcode -verktøylinjen.
3. Du kan også skjule omrissvisningen.

I redigeringsvelgeren, som vises øverst i assistentredaktøren, endrer du assistentredaktøren fra Forhåndsvisning til Automatisk> ViewController.swift.

Klikk på undersiden og dra inn den aktuelle klassen i koden.

Trinn 9: Integrer tilpassede bevegelser

SWIPE GESTURE

En sveipebevegelse oppstår når brukeren beveger en eller flere fingre over skjermen i en bestemt horisontal eller vertikal retning. Bruk UISwipeGestureRecognizer -klassen for å oppdage sveipebevegelser.

Implementering av sveipebevegelse

Trinn 1: Legg til sveipebevegelser i viewDidLoad () -metoden

overstyr func viewDidLoad () {super.viewDidLoad ()

la swipeLeft = UISwipeGestureRecognizer (mål: self, action: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

la swipeRight = UISwipeGestureRecognizer (mål: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

la swipeUp = UISwipeGestureRecognizer (mål: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

la swipeDown = UISwipeGestureRecognizer (mål: self, action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

Trinn 2: Kontroller gestdeteksjonen i handleGesture () -metoden func handleGesture (gest: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} ellers if gesture.direction == UISwipeGestureRecognizer. venstre {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}}

I appen min ønsket jeg å bruke swipeRight, men ble fri til å bruke den som er mer passende for søknaden din.

La oss implementere dette i koden vår.

Vi går til registerVC.swift som vi opprettet før og skriver koden som du kan se på bildene.

FORKLARING AV KODEN

la current_x få nåværende posisjon for ScrollView (horisontal posisjon) la screen_width få bredden på skjermen, trekke fra denne størrelsen la new_x fra nåværende posisjon i scrollview, i comeback med bredden på skjermen hvis current_x> 0 til med mindre den er mer enn 0 - 0 er den første siden.

Og vi er ferdige!

Godt jobbet folkens!