Skapa en rullningsvy med snabb: 9 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:45

För några månader sedan visste jag inte förekomsten av swift och Xcode. Idag kunde jag utveckla en liten del av applikationen jag vill skapa. Jag kunde skapa något coolt, som jag skulle vilja dela med dig av.

I den här självstudien tar jag dig igenom processen att bygga en rullningsvy, där användare omdirigeras när de vill registrera ett nytt konto. Längs vägen ska jag se till att ge dig några teoretiska förklaringar till de saker vi gör, så att du faktiskt kan förstå vad det är vi gör.

Innan vi gör det, låt oss prata om vad som är Swift och Xcode:

1. Swift är ett kraftfullt och intuitivt programmeringsspråk för macOS, iOS, watchOS och tvOS. Att skriva Swift -kod är interaktivt och roligt, syntaxen är kortfattad men uttrycksfull och Swift innehåller moderna funktioner som utvecklare älskar. Swift-koden är säker i design, men producerar också programvara som kör blixtsnabbt. Det är utformat för att fungera med Apples ramar för kakao och kakao och den stora mängden befintlig Objective-C-kod som är skriven för Apple-produkter. Den är byggd med LLVM-kompilatorramen med öppen källkod och har inkluderats i Xcode sedan version 6, som släpptes 2014. På Apple-plattformar använder den Objective-C runtime-biblioteket som gör att C, Objective-C, C ++ och Swift-koden kan köras inom ett program.

2. Xcode är en integrerad utvecklingsmiljö (IDE) för macOS som innehåller en uppsättning mjukvaruutvecklingsverktyg som utvecklats av Apple för att utveckla programvara för macOS, iOS, watchOS och tvOS.

Steg 1: Ladda ner Xcode

Xcode 10 innehåller allt du behöver för att skapa fantastiska appar för alla Apple -plattformar. Nu ser Xcode och Instruments bra ut i det nya mörka läget på macOS Mojave. Med källkodredigeraren kan du lättare omforma eller omforma kod, se källkontrollförändringar vid sidan av den relaterade raden och snabbt få information om uppströms kodskillnader. Du kan bygga ditt eget instrument med anpassad visualisering och dataanalys. Swift sammanställer programvara snabbare, hjälper dig att leverera snabbare appar och genererar ännu mindre binära filer. Testsviterna slutförs många gånger snabbare, att arbeta med ett team är enklare och säkrare och mycket mer.

Xcode 10 innehåller Swift 4.2, som sammanställer din programvara snabbare, hjälper dig att leverera snabbare appar och genererar ännu mindre binära filer. Jämfört med Swift 4.0 kan den senaste Swift -kompilatorn bygga stora appar mer än dubbelt så snabbt.* I kombination med det nya Xcode -nybyggnadssystemet är din dagliga redigering, byggning och test arbetsflöde mycket snabbare. Optimerad för den senaste multi-core Mac-hårdvaran, Xcode och Swift ger en blixtsnabb utvecklingsplattform.

Steg 2: Låt oss komma igång

Så det vi ska göra är att gå till Xcode och skapa ett nytt projekt. När vi klickar på ett nytt projekt kommer vår applikation att vara en enda vy -app. För dem som inte vet betyder en enda visningsapp att du måste starta allt från början och att det kommer att finnas en enda vy som vi kan programmera.

Namnge din produkt TutorialApp. Om du är en erfaren utvecklare som publicerar appar i App Store har du förmodligen ett team, men om du är ny och inte har några program publicerade kan du hoppa över det här fältet. I organisationsnamnet kan du skriva företagets namn om du har ett, i mitt fall kommer jag bara att behålla MacBook Pro. Sedan betraktas organisationsidentifieraren som en unik identifikator för ditt projekt. Därför kan du skriva vad du vill. Språket kommer definitivt att vara snabbt.

Så tryck på nästa och låt oss spara projektet på skrivbordet så att det är lätt att komma åt.

Det nya projektet består av tre filer, AppDelegate.swift, ViewController.swift och stjärnan i den här självstudien: Main.storyboard. Under distributionsinformation> Enhetsorientering i de allmänna projektinställningarna, ställ in enheter till iPhone. Eftersom det här är en app endast för porträtt, avmarkerar du alternativen Landskap vänster och Landskap höger. Öppna Main.storyboard i projektnavigatorn för att visa den i Interface Buildereditor:

Vi kommer inte att göra några ändringar i konfigurationen och vi kommer att gå direkt till huvud storyboard. Eftersom vi skapade en enda vy -app skapade vi en enkel, enkel, tom vy. Detta är något vi behöver arbeta med.

Steg 3: Arbeta i användargränssnittet

Den officiella storyboardterminologin för en visningskontroller är "scen", men du kan använda termerna omväxlande. En scen representerar en visningskontroller i storyboard.

Här ser du en enda vykontroller som innehåller en tom vy. Pilen som pekar på vykontrollen från vänster indikerar att det är den första vykontrollen som ska visas för denna storyboard. Att utforma en layout i storyboard-redigeraren görs genom att dra kontroller från objektbiblioteket (se övre högra hörnet) till din vykontroll.

För att få en uppfattning om hur storyboard -redigeraren fungerar, dra några kontroller från objektbiblioteket till den tomma vykontrollern som den syns i videon.

När du drar kontrollerna in bör de dyka upp i dokumentöversikten till vänster.

Du kan skapa det användargränssnitt du vill ha. I mitt fall använde jag den du ser på bilden.

Steg 4: Utveckla en andravyskontroller och initiera segment (övergångar)

Så, i min app, när användaren trycker på knappen "Registrera nytt konto", vill jag att han ska omdirigeras till registerkontosidan. Så för detta ändamål är varje sida en ny scen, en ny display. Av den anledningen måste vi skapa en andra vykontroller som du kan hitta i objektbiblioteket.

Skriv view controller och placera den bredvid din första view controller. Denna scen kommer att vara ansvarig för registervyskontrollern. Omdirigeringen till den sidan kan göras på två sätt:

1. vi kan göra det manuellt när vi gör en åtgärdsanslutning från knappen till den andra vykontrollen
2. vi kan göra det programatiskt

Det jag valde att göra är att göra det manuellt. Det är enkelt som det:

1. Gör ett vänsterklicka på din knapp (i mitt fall, Registrera nytt konto)
2. Håll kommandot och vänster musklick för att dra det till registerkontrollscenen.
3. Släpp den där och välj "Present Modally"

Steg 5: Skapa programmeringsklass för registrering

Så nu vill vi skapa en dedikerad kodningsklass för den nya scenen.

För att göra det måste du göra följande steg:

• högerklicka på din projektmapp
• klicka på den nya filen cocoa touch class
• i klassen skriva: RegisterVC
• VÄLDIGT VIKTIGT! Se till att underklassen måste vara av typen UIViewController
• språket måste vara snabbt.
• klicka på nästa och spara din kakaoklass inuti huvudprojektet i ditt projekt.
• Klicka på huvudberättelsen och gå till den nya visningskontrollen
• klicka på den gula knappen som är placerad ovanför den
• gå till höger till klassinspektören och hänvisa till Register VC (Costum class, class = RegisterVC

Steg 6: Skapa sidans horisontella svep

I iOS används rullningsvyer för att visa innehåll som inte passar helt på skärmen. Rullningsvyer har två huvudsyften:

För att låta användare dra området med innehållet de vill visa, för att låta användare zooma in eller ut från det visade innehållet med hjälp av nypgesterna. En vanlig kontroll som används i iOS -appar - UITableView - är en underklass av UIScrollView och ger ett bra sätt att visa innehåll som är större än skärmen.

Vad använder undersidor i ett horisontellt svep?

Tja, om jag skulle skapa 6 olika sidor skulle det betyda att jag måste skapa en dedikerad klass för var och en av dem och det är inte så bekvämt att skicka information från en klass till en annan. När jag till exempel skriver in min e -post och sedan klickar på nästa, om jag har en annan vykontroll, lämnar jag den första sidan i View Controller och sedan presenteras den andra. I det här fallet måste informationen från den första vykontrollern överföras till nästa och sedan till den tredje vykontrollern etc. När jag har alla de vykontroller som jag behöver måste jag samla all data från alla sidorna och skicka dem till servern. Så det här skulle vara riktigt komplext.

Så, gå vidare till skapandet av denna view controller, i mitt fall hade jag 5 sidor som jag ville skapa:

1. E-post
2. Fullständiga namn
3. Lösenord
4. Födelsedatum
5. Kön

Det betyder att den visningskontroller som vi kommer att skapa måste vara fem gånger större än den vi gjorde tidigare.

Välj din kontrollenhet och gå till det övre högra hörnet och klicka på linjalikonen och redigera den simulerade storleken. Du väljer Freeform för att justera bredd och höjd. Standardbredden på skärmen som är lämplig för iphone 8 är 375, så om jag multiplicerar 375*5 = 1875. Och här har du en förlängd visningskontroller.

På samma sätt följer du samma process för alla olika telefoner och skärmstorlekar.

För att få rullningsvyn att fungera behöver vi ett rullningsvyobjekt. Scroll View ger en mekanism för att visa innehåll som är större än storleken på programmets fönster. Klicka på det här objektet, dra det och placera det i det övre vänstra hörnet av visningskontrollen och se till att X och Y är på nollägen och att sträckningen är i enlighet med din visningskontroller.

Scroll View tillåter oss bara att rulla, inget annat. Sedan måste vi lägga till en innehållsvy som kommer att lagra andra vyer. Du kan hitta UIView - den representerar en rektangulär region där den drar och tar emot händelser - i objektbiblioteket. Klicka helt enkelt på och dra den till rullningsvyn och sträck ut den igen.

Välj rullningsvyn från den vänstra panelen så ringer vi in justering 0, 0, 0, 0 och lägger till begränsningar. Gör samma sak för innehållsvy.

Steg 7: Utveckla användargränssnittet för undersidorna i den horisontella svepningen

I det här steget måste du skapa användargränssnittet för dina undersidor. Det jag valde att göra är att göra en prototyp i Sketch och sedan bygga den i Xcode.

Steg 8: Implementera designen i Xcode

Nästa steg är att implementera denna design i Xcode. För att göra det måste du skapa utloppsanslutningar för alla undersidor och skapa en annan för "modervy", det vill säga en utloppsanslutning för hela vykontrollen.

Element i en storyboard är länkade till källkoden. Det är viktigt att förstå förhållandet som en storyboard har till koden du skriver.

I en storyboard representerar en scen en skärm med innehåll och vanligtvis en view controller. View -kontroller implementerar din apps beteende och hanterar en enda innehållsvy med dess hierarki av delvyer. De samordnar informationsflödet mellan appens datamodell, som inkapslar appens data, och vyerna som visar dessa data, hanterar livscykeln för deras innehållsvyer, hanterar orienteringsändringar när enheten roteras, definierar navigeringen i din app och implementera beteendet för att svara på användarens input. Alla view controller -objekt i iOS är av typen UIViewController eller en av dess underklasser.

Du definierar beteendet hos dina vykontroller i kod genom att skapa och implementera anpassade visningskontrollerunderklasser. Du kan sedan skapa en anslutning mellan dessa klasser och scener i din storyboard för att få det beteende du definierade i kod och det användargränssnitt du definierade i din storyboard.

Xcode skapade redan en sådan klass som du tittade på tidigare, ViewController.swift, och kopplade den till scenen du arbetar med i din storyboard. När du lägger till fler scener gör du denna anslutning själv i identitetsinspektören. Identitetsinspektören låter dig redigera egenskaper för ett objekt i din storyboard relaterat till objektets identitet, till exempel vilken klass objektet tillhör.

Skapa uttag för UI-element Outlet ger ett sätt att referera till gränssnittsobjekt-de objekt du har lagt till i din storyboard-från källkodfiler. För att skapa ett uttag, dra och dra från ett visst objekt i din storyboard till en vykontrollfil. Den här åtgärden skapar en egenskap för objektet i din view controller -fil, som låter dig komma åt och manipulera objektet från kod vid körning

1. Öppna din storyboard, Main.storyboard.
2. Klicka på assistentknappen i Xcode -verktygsfältet nära det övre högra hörnet av Xcode för att öppna assistentredigeraren. Om du vill ha mer utrymme att arbeta, kollapsa projektnavigatorn och verktygsområdet genom att klicka på knapparna Navigator och Verktyg i Xcode -verktygsfältet.
3. Du kan också komprimera konturvyn.

I redigeringsfältet som visas högst upp i assistentredigeraren ändrar du assistentredigeraren från Förhandsvisning till Automatisk> ViewController.swift.

Klicka på undersidan och dra till rätt klass i koden.

Steg 9: Integrera anpassade gester

SWIPE GESTURE

En svepning uppstår när användaren flyttar ett eller flera fingrar över skärmen i en specifik horisontell eller vertikal riktning. Använd UISwipeGestureRecognizer -klassen för att upptäcka svepgester.

Implementering av svepgest

Steg 1: Lägg till svep -gest (er) i viewDidLoad () -metoden

åsidosätta func viewDidLoad () {super.viewDidLoad ()

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

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

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

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

Steg 2: Kontrollera gestdetekteringen i handleGesture () -metoden func handleGesture (gest: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} annars ifall gesture.direction == UISwipeGestureRecognizer. vänster {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 jag använda swipeRight, men blev fri att använda den som är mer lämplig för din applikation.

Låt oss nu implementera detta i vår kod.

Vi går till registerVC.swift som vi skapade tidigare och skriver koden som du kan se på bilderna.

KODFÖRKLARING

låt current_x få aktuell position för ScrollView (horisontell position) låt screen_width få skärmens bredd, dra av denna storlek låt new_x från nuvarande position i scrollview, jag återkommer med skärmens bredd om current_x> 0 tills den inte är mer än 0 - 0 är den första sidan.

Och vi är klara!

Bra jobbat killar!