Opret en rullevisning med hurtig: 9 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

For et par måneder siden vidste jeg ikke eksistensen af swift og Xcode. I dag kunne jeg udvikle en lille del af den applikation, jeg vil oprette. Jeg var i stand til at skabe noget fedt, som jeg gerne vil dele med dig.

I denne vejledning tager jeg dig igennem processen med at opbygge en rullevisningsscene, hvor brugere vil blive omdirigeret, når de vil registrere en ny konto. Undervejs sørger jeg for at give dig nogle teoretiske forklaringer på de ting, vi gør, så du rent faktisk kan forstå, hvad det er, vi gør.

Inden vi gør det, lad os tale om, hvad der er Swift og Xcode:

1. Swift er et kraftfuldt og intuitivt programmeringssprog til macOS, iOS, watchOS og tvOS. At skrive Swift -kode er interaktivt og sjovt, syntaksen er kortfattet, men alligevel udtryksfuld, og Swift indeholder moderne funktioner, som udviklere elsker. Swift-kode er sikker i design, men producerer også software, der kører lynhurtigt. Det er designet til at fungere med Apples kakao- og kakaotouch-rammer og den store mængde eksisterende Objective-C-kode skrevet til Apple-produkter. Det er bygget med open source LLVM compiler framework og er blevet inkluderet i Xcode siden version 6, udgivet i 2014. På Apple-platforme bruger det Objective-C runtime-biblioteket, som gør det muligt at køre C, Objective-C, C ++ og Swift-kode inden for ét program.

2. Xcode er et integreret udviklingsmiljø (IDE) til macOS, der indeholder en række softwareudviklingsværktøjer udviklet af Apple til udvikling af software til macOS, iOS, watchOS og tvOS.

Trin 1: Download Xcode

Xcode 10 indeholder alt, hvad du har brug for for at oprette fantastiske apps til alle Apple -platforme. Nu ser Xcode og Instruments godt ud i den nye Dark Mode på macOS Mojave. Med kildekodeditoren kan du lettere transformere eller omdanne kode, se ændringer i kildekontrol ved siden af den relaterede linje og hurtigt få oplysninger om forskelle i opstrøms kode. Du kan bygge dit eget instrument med brugerdefineret visualisering og dataanalyse. Swift kompilerer software hurtigere, hjælper dig med at levere hurtigere apps og genererer endnu mindre binære filer. Testsuiter gennemføres mange gange hurtigere, det er enklere og mere sikkert at arbejde med et team og meget mere.

Xcode 10 indeholder Swift 4.2, som kompilerer din software hurtigere, hjælper dig med at levere hurtigere apps og genererer endnu mindre binære filer. Sammenlignet med Swift 4.0 kan den nyeste Swift -kompilator bygge store apps mere end dobbelt så hurtigt.* Kombineret med det nye Xcode -nybygningssystem er din daglige arbejdsgang til redigering, opbygning og test meget hurtigere. Optimeret til den nyeste multi-core Mac-hardware, Xcode og Swift giver en lynhurtig udviklingsplatform.

Trin 2: Lad os komme i gang

Så hvad vi vil gøre er at gå til Xcode og oprette et nyt projekt. Når vi klikker på et nyt projekt, er vores applikation en app med én visning. For dem, der ikke ved det, betyder en enkelt visningsapp, at du skal starte alt fra bunden, og at der vil være en enkelt visning, som vi kan programmere.

Navngiv dit produkt TutorialApp. Hvis du er en erfaren udvikler, der udgiver apps i App Store, har du sandsynligvis et team, men hvis du er ny, og du ikke har nogen programmer offentliggjort, kan du springe dette felt over. I organisationsnavnet kan du skrive firmaets navn, hvis du har et. I mit tilfælde vil jeg bare beholde MacBook Pro. Derefter betragtes organisationsidentifikatoren som noget som en unik identifikator for dit projekt, derfor kan du skrive, hvad du vil. Sproget vil helt sikkert være hurtigt.

Så tryk på næste og lad os gemme projektet på skrivebordet, så det er let at få adgang til.

Det nye projekt består af tre filer, AppDelegate.swift, ViewController.swift og stjernen i denne vejledning: Main.storyboard. Under implementeringsinfo> Enhedsorientering i de generelle projektindstillinger skal du angive Enheder til iPhone. Da dette er en app kun til portræt, skal du fjerne markeringen af indstillingerne Landskab til venstre og Landskab til højre. Åbn Main.storyboard i projektnavigatoren for at se det i Interface Buildereditor:

Vi kommer ikke til at foretage ændringer i konfigurationen, og vi går direkte til hoved storyboardet. Da vi lavede en enkelt visningsapp, har vi oprettet en enkel, tom, visning. Det er noget, vi skal arbejde med.

Trin 3: Arbejde i brugergrænsefladen

Den officielle storyboard -terminologi for en visningscontroller er "scene", men du kan bruge udtrykkene i flæng. En scene repræsenterer en visningscontroller i storyboardet.

Her ser du en enkelt visningskontroller, der indeholder en tom visning. Pilen, der peger på visningskontrolleren fra venstre, angiver, at det er den første visningskontroller, der skal vises til dette storyboard. Design af et layout i storyboard-editoren udføres ved at trække kontrolelementer fra objektbiblioteket (se øverste højre hjørne) til din visningskontroller.

For at få en fornemmelse af, hvordan storyboard -editoren fungerer, skal du trække nogle kontroller fra objektbiblioteket ind i den tomme visningskontroller som set i videoen.

Når du trækker kontrollerne ind, skal de vises i dokumentoversigten til venstre.

Du kan oprette den ønskede brugergrænseflade. I mit tilfælde brugte jeg den, du ser på billedet.

Trin 4: Udvikl en Second View Controller, og start segmenter (overgange)

Så i min app, når brugeren trykker på knappen "Registrer ny konto", vil jeg have ham til at blive omdirigeret til registrerings kontosiden. Så til det formål er hver eneste side en ny scene, et nyt display. Af den grund skal vi oprette en anden visningskontroller, som du kan finde i objektbiblioteket.

Skriv view controller og placer den ved siden af din første view controller. Denne scene er ansvarlig for registervisningskontrolleren. Omdirigering til siden kan udføres på to måder:

1. vi kan gøre det manuelt, når vi laver en handlingstilslutning fra knappen til den anden visningskontrol
2. vi kan gøre det programatisk

Det jeg valgte at gøre er at lave det manuelt. Det er enkelt som det:

1. Foretag et venstreklik på din knap (i mit tilfælde, registrer ny konto)
2. Hold kommandoen nede og venstre museklik for at trække den til registerkontrollescenen.
3. Slip det der, og vælg "Present Modally"

Trin 5: Opret programmeringsklasse til registreringsproces

Så nu vil vi oprette en dedikeret kodningsklasse til den nye scene.

For at gøre det skal du gøre følgende trin:

• højreklik på din projektmappe
• klik på den nye fil kaldet cacao touch class
• i klassen skrive: RegisterVC
• MEGET VIGTIGT! Sørg for, at underklassen skal være af typen UIViewController
• sproget skal være hurtigt.
• klik på næste og gem din kakaoklasse inde i hovedroden af dit projekt.
• Klik på hoved storyboardet og gå til den nye view controller
• klik på den gule knap, der er placeret over den
• i højre gå til klasseinspektøren og henvis til Register VC (Costum class, class = RegisterVC

Trin 6: Byg den horisontale strygning af siden

I iOS bruges rullevisninger til at se indhold, der ikke passer helt på skærmen. Rullevisninger har to hovedformål:

For at lade brugerne trække området med det indhold, de vil vise, for at lade brugerne zoome ind eller ud af det viste indhold ved hjælp af knivbevægelser. En almindelig kontrol, der bruges i iOS -apps - UITableView - er en underklasse af UIScrollView og giver en fantastisk måde at se indhold, der er større end skærmen.

Hvad bruger undersider i et vandret stryg?

Godt, hvis jeg skulle oprette 6 forskellige sider, ville det betyde, at jeg er nødt til at oprette en dedikeret klasse for hver enkelt af dem, og det er ikke så bekvemt at videregive oplysninger fra en klasse til en anden. Når jeg f.eks. Skriver min e -mail og derefter klikker på næste, hvis jeg har en anden visningskontroller, forlader jeg den første side i visningscontrolleren, og derefter bliver den anden præsenteret. I dette tilfælde skal oplysningerne fra den første visningscontroller videregives til den næste og derefter igen til den tredje visningskontroller osv. Når jeg har alle de visningscontrollere, jeg har brug for, skal jeg indsamle alle data fra alle siderne og send dem til serveren. Så det ville være virkelig komplekst.

Så videre til oprettelsen af denne view controller, i mit tilfælde, havde jeg 5 sider, som jeg ønskede at oprette:

1. E -mail
2. Fulde navn
3. Adgangskode
4. Fødselsdato
5. Køn

Det betyder, at den visningscontroller, som vi vil oprette, skal være 5 gange større end den, vi lavede før.

Vælg din visningskontroller, og gå til øverste, højre hjørne og klik på linealikonet og rediger den simulerede størrelse. Du vælger Freeform for at justere bredden og højden. Standardbredden på skærmen, der er egnet til iphone 8, er 375, så hvis jeg multiplicerer 375*5 = 1875. Og her har du en udvidet visningskontroller.

På samme måde følger du den samme proces for alle de forskellige telefoner og skærmstørrelser.

For at få rullevisningen til at fungere, har vi brug for et rullevisningsobjekt. Rulvisning har en mekanisme til visning af indhold, der er større end størrelsen på programmets vindue. Klik på dette objekt, træk det og placer det i øverste venstre hjørne af visningskontrollen, og sørg for, at X og Y er på nulpositioner og strækning er i overensstemmelse med din visningskontroller.

Rullevisning tillader os kun at rulle, intet andet. Derefter skal vi tilføje en indholdsvisning, som gemmer andre visninger. Du kan finde UIView - det repræsenterer et rektangulært område, hvor det tegner og modtager begivenheder - i objektbiblioteket. Bare klik og træk den ind i rullevisningen, og stræk den igen i overensstemmelse hermed.

Vælg rullevisning fra venstre panel, og vi kalder justering 0, 0, 0, 0 og tilføjer begrænsninger. Gør det samme for indholdsvisning.

Trin 7: Udvikl brugergrænsefladen til undersiderne i det vandrette stryg

I dette trin skal du oprette brugergrænsefladen for dine undersider. Det, jeg valgte at gøre, er at lave en prototype i Sketch og derefter bygge den i Xcode.

Trin 8: Implementér designet i Xcode

Det næste trin er at implementere dette design i Xcode. For at gøre det skal du oprette outletforbindelser til alle undersiderne og oprette en anden til "modervisning", hvilket vil sige en stikkontaktforbindelse til hele visningskontrolleren.

Elementer i et storyboard er knyttet til kildekoden. Det er vigtigt at forstå det forhold, et storyboard har til den kode, du skriver.

I et storyboard repræsenterer en scene en skærm med indhold og typisk en view controller. View -controllere implementerer din apps adfærd og administrerer en enkelt indholdsvisning med hierarkiet af undervisninger. De koordinerer informationsstrømmen mellem appens datamodel, som indkapsler appens data, og de visninger, der viser disse data, styrer livscyklussen for deres indholdsvisning, håndterer orienteringsændringer, når enheden roteres, definerer navigationen i din app og implementere adfærden for at reagere på brugerinput. Alle view controller -objekter i iOS er af typen UIViewController eller en af dens underklasser.

Du definerer din visnings controllers adfærd i kode ved at oprette og implementere tilpassede visningskontrollerunderklasser. Du kan derefter oprette en forbindelse mellem disse klasser og scener i dit storyboard for at få den adfærd, du har defineret i kode, og den brugergrænseflade, du har defineret i dit storyboard.

Xcode har allerede oprettet en sådan klasse, som du kiggede på tidligere, ViewController.swift, og koblede den til den scene, du arbejder på i dit storyboard. Når du tilføjer flere scener, opretter du denne forbindelse selv i identitetsinspektøren. Identitetsinspektøren lader dig redigere egenskaber for et objekt i dit storyboard relateret til objektets identitet, f.eks. Hvilken klasse objektet tilhører.

Opret Outlets til UI Elements Outlets giver en måde at henvise til grænsefladeobjekter-de objekter, du har føjet til dit storyboard-fra kildekodefiler. For at oprette en stikkontakt skal du styre og trække fra et bestemt objekt i dit storyboard til en visningscontrollerfil. Denne handling opretter en egenskab for objektet i din visningscontrollerfil, som giver dig mulighed for at få adgang til og manipulere dette objekt fra kode ved runtime

1. Åbn dit storyboard, Main.storyboard.
2. Klik på knappen Assistant på Xcode -værktøjslinjen i øverste højre hjørne af Xcode for at åbne assistenteditoren. Hvis du vil have mere plads til at arbejde, skal du skjule projektnavigatoren og værktøjsområdet ved at klikke på knapperne Navigator og hjælpeprogrammer på Xcode -værktøjslinjen.
3. Du kan også skjule omridsvisningen.

I editorens vælgerlinje, der vises øverst i assistenteditoren, skal du ændre assistenteditoren fra Preview til Automatic> ViewController.swift.

Klik på undersiden, og træk ind i den relevante klasse i koden.

Trin 9: Integrer tilpassede bevægelser

SWIPE GESTURE

En svejsebevægelse opstår, når brugeren bevæger en eller flere fingre hen over skærmen i en bestemt vandret eller lodret retning. Brug klassen UISwipeGestureRecognizer til at registrere strygbevægelser.

Implementering af swipe gestus

Trin 1: Tilføj swipe Gesture (s) i viewDidLoad () -metoden

tilsidesætte func viewDidLoad () {super.viewDidLoad ()

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

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

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

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

Trin 2: Kontroller gestusdetektering i handleGesture () -metoden func handleGesture (gestus: UISwipeGestureRecognizer) -> Annullér {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} ellers hvis 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 min app ville jeg bruge swipeRight, men blev fri til at bruge den, der er mere passende til din applikation.

Lad os nu implementere dette i vores kode.

Vi går til registerVC.swift, som vi har oprettet før, og skriver koden, som du kan se på billederne.

FORKLARING AF KODEN

lad current_x få den aktuelle position for ScrollView (vandret position) lad screen_width få skærmens bredde, fratrukket denne størrelse lad new_x fra den aktuelle position i scrollview, jeg vender tilbage med bredden af skærmen, hvis current_x> 0 indtil medmindre det er mere end 0 - 0 er den første side.

Og vi er færdige!

Godt arbejde fyre!