Een schuifweergave maken met Swift: 9 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Een paar maanden geleden wist ik het bestaan van swift en Xcode niet. Vandaag heb ik een klein deel van de applicatie kunnen ontwikkelen die ik wil maken. Ik heb iets gaafs kunnen maken, dat ik graag met jullie wil delen.

In deze tutorial zal ik je door het proces leiden van het bouwen van een scroll view-scène, waarin gebruikers worden omgeleid wanneer ze een nieuw account willen registreren. Onderweg zal ik ervoor zorgen dat je wat theoretische uitleg geeft over de dingen die we doen, zodat je echt kunt begrijpen wat we doen.

Voordat we dat doen, laten we het hebben over wat Swift en Xcode zijn:

1. Swift is een krachtige en intuïtieve programmeertaal voor macOS, iOS, watchOS en tvOS. Swift-code schrijven is interactief en leuk, de syntaxis is beknopt en toch expressief, en Swift bevat moderne functies waar ontwikkelaars dol op zijn. Swift-code is van nature veilig, maar produceert ook software die razendsnel draait. Het is ontworpen om te werken met Apple's Cocoa- en Cocoa Touch-frameworks en de grote hoeveelheid bestaande Objective-C-code die voor Apple-producten is geschreven. Het is gebouwd met het open source LLVM-compilerframework en is opgenomen in Xcode sinds versie 6, uitgebracht in 2014. Op Apple-platforms gebruikt het de Objective-C runtime-bibliotheek waarmee C, Objective-C, C++ en Swift-code kan worden uitgevoerd binnen één programma.

2. Xcode is een geïntegreerde ontwikkelomgeving (IDE) voor macOS die een reeks softwareontwikkelingstools bevat die door Apple zijn ontwikkeld voor het ontwikkelen van software voor macOS, iOS, watchOS en tvOS.

Stap 1: Xcode downloaden

Xcode 10 bevat alles wat je nodig hebt om geweldige apps te maken voor alle Apple-platforms. Nu zien Xcode en Instruments er geweldig uit in de nieuwe donkere modus op macOS Mojave. Met de broncode-editor kunt u code gemakkelijker transformeren of herstructureren, wijzigingen in het bronbeheer naast de gerelateerde regel zien en snel details krijgen over upstream-codeverschillen. U kunt uw eigen instrument bouwen met aangepaste visualisatie en gegevensanalyse. Swift compileert software sneller, helpt je snellere apps te leveren en genereert nog kleinere binaire bestanden. Testsuites worden vele malen sneller voltooid, werken met een team is eenvoudiger en veiliger, en nog veel meer.

Xcode 10 bevat Swift 4.2, dat uw software sneller compileert, u helpt snellere apps te leveren en nog kleinere binaire bestanden genereert. Vergeleken met Swift 4.0 kan de nieuwste Swift-compiler grote apps meer dan twee keer zo snel bouwen.* In combinatie met het nieuwe Xcode nieuwe build-systeem is uw dagelijkse bewerkings-, bouw- en testworkflow veel sneller. Xcode en Swift zijn geoptimaliseerd voor de nieuwste multi-core Mac-hardware en zorgen voor een razendsnel ontwikkelplatform.

Stap 2: Laten we beginnen

Dus wat we zullen doen, is naar Xcode gaan en een nieuw project maken. Zodra we op een nieuw project klikken, wordt onze applicatie een app met één weergave. Voor degenen die het niet weten, een app met één weergave betekent dat je alles helemaal opnieuw moet beginnen en dat er één enkele weergave zal zijn die we kunnen programmeren.

Geef uw product een naam TutorialApp. Als je een ervaren ontwikkelaar bent die apps publiceert in de App Store, heb je waarschijnlijk een team, maar als je nieuw bent en je hebt geen applicaties gepubliceerd, kun je dit veld overslaan. In de naam van de organisatie kun je de naam van het bedrijf schrijven voor het geval je er een hebt, in mijn geval zal ik gewoon MacBook Pro houden. Vervolgens wordt de organisatie-ID beschouwd als zoiets als een unieke identificatie van uw project, daarom kunt u schrijven wat u maar wilt. Taal zal zeker snel zijn.

Druk dus op volgende en laten we het project op het bureaublad opslaan, zodat het gemakkelijk toegankelijk is.

Het nieuwe project bestaat uit drie bestanden, AppDelegate.swift, ViewController.swift en de ster van deze tutorial: Main.storyboard. Stel onder Implementatie-info > Apparaatoriëntatie in de Algemene projectinstellingen Apparaten in op iPhone. Aangezien dit een app voor alleen portretten is, schakelt u de opties Liggend links en Liggend rechts uit. Open Main.storyboard in de project-navigator om het te bekijken in de Interface Builder-editor:

We gaan geen wijzigingen aanbrengen in de configuratie en we gaan rechtstreeks naar het hoofdverhaalbord. Omdat we een app met één weergave hebben gemaakt, hebben we een eenvoudige enkele, lege weergave gemaakt. Dit is iets waar we aan moeten werken.

Stap 3: Werken in de gebruikersinterface

De officiële storyboard-terminologie voor een weergavecontroller is 'scène', maar u kunt de termen door elkaar gebruiken. Een scène vertegenwoordigt een weergavecontroller in het storyboard.

Hier zie je een enkele weergavecontroller met een lege weergave. De pijl die van links naar de weergavecontroller wijst, geeft aan dat dit de eerste weergavecontroller is die voor dit storyboard moet worden weergegeven. Het ontwerpen van een lay-out in de storyboard-editor doet u door besturingselementen uit de Objectenbibliotheek (zie rechterbovenhoek) naar uw weergavecontroller te slepen.

Om een idee te krijgen van hoe de storyboard-editor werkt, sleept u enkele bedieningselementen van de objectbibliotheek naar de lege weergavecontroller, zoals te zien is in de video.

Terwijl u besturingselementen naar binnen sleept, zouden ze in de documentoverzicht aan de linkerkant moeten verschijnen.

U kunt de gewenste gebruikersinterface maken. In mijn geval gebruikte ik degene die je op de foto ziet.

Stap 4: Ontwikkel een Second View Controller en initieer Segues (overgangen)

Dus, in mijn app, wanneer de gebruiker op de knop "Nieuw account registreren" drukt, wil ik dat hij wordt doorgestuurd naar de accountpagina registreren. Dus voor dat doel is elke afzonderlijke pagina een nieuwe scène, een nieuwe weergave. Om die reden moeten we een second view-controller maken, die u kunt vinden in de objectbibliotheek.

Typ view controller en plaats deze naast je initiële view controller. Deze scène is verantwoordelijk voor de registerview-controller. De omleiding naar die pagina kan op twee manieren gebeuren:

1. we kunnen het handmatig doen wanneer we een actieverbinding maken van de knop naar de andere weergavebesturing
2. we kunnen het programmatisch doen

Wat ik heb gekozen om te doen is om het handmatig te maken. Zo simpel is het:

1. Klik met één linkermuisknop op uw knop (in mijn geval Registreer een nieuw account)
2. Houd het commando ingedrukt en klik met de linkermuisknop om het naar de registerbesturingsscène te slepen.
3. Laat het daar los en kies "Modaal presenteren"

Stap 5: Programmeerklasse maken voor registratieproces

Dus nu willen we een speciale coderingsklasse maken voor de nieuwe scène.

Om dit te doen, moet u de volgende stappen uitvoeren:

• klik met de rechtermuisknop op uw projectmap
• klik op het nieuwe bestand met de naam cacao touch class
• schrijf in de klas: RegisterVC
• ERG BELANGRIJK! Zorg ervoor dat de subklasse van het type UIViewController moet zijn
• taal moet snel zijn.
• klik op volgende en sla je cacaoklasse op in de hoofdmap van je project.
• Klik op het hoofdverhaalbord en ga naar de nieuwe weergavecontroller
• klik op de gele knop die erboven staat
• ga rechts naar de klasseninspecteur en verwijs naar het Register VC (Costum class, class = RegisterVC

Stap 6: Bouw de horizontale veeg van de pagina

In iOS worden scrollweergaven gebruikt om inhoud te bekijken die niet helemaal op het scherm past. Scrollweergaven hebben twee hoofddoelen:

Om gebruikers het gebied van de inhoud die ze willen weergeven te laten slepen, om gebruikers te laten in- of uitzoomen op de weergegeven inhoud met behulp van knijpbewegingen. Een veelgebruikt besturingselement dat wordt gebruikt in iOS-apps - UITableView - is een subklasse van UIScrollView en biedt een geweldige manier om inhoud te bekijken die groter is dan het scherm.

Wat gebruiken subpagina's in een horizontale veegbeweging?

Welnu, als ik 6 verschillende pagina's zou maken, zou dat betekenen dat ik voor elk ervan een speciale klas moet maken en het is niet zo handig om informatie van de ene klas naar de andere door te geven. Als ik bijvoorbeeld mijn e-mail typ en vervolgens op volgende klik, als ik een andere viewcontroller heb, verlaat ik de eerste pagina van de View Controller en wordt de tweede weergegeven. In dit geval moet de informatie van de eerste view-controller worden doorgegeven aan de volgende en dan weer aan de derde view-controller enz. Als ik alle view-controllers heb die ik nodig heb, moet ik alle gegevens van alle de pagina's en stuur ze naar de server. Dit zou dus heel complex zijn.

Dus toen ik verder ging met het maken van deze weergavecontroller, had ik in mijn geval 5 pagina's die ik wilde maken:

1. E-mail
2. Voor-en achternaam
3. Wachtwoord
4. Geboortedatum
5. Geslacht

Dit betekent dat de viewcontroller die we gaan maken 5 keer groter moet zijn dan degene die we eerder hebben gemaakt.

Selecteer uw weergavecontroller en ga naar de rechterbovenhoek en klik op het liniaalpictogram en bewerk de gesimuleerde grootte. U kiest voor Freeform om de breedte en hoogte aan te passen. De standaardbreedte van het scherm dat geschikt is voor iphone 8 is 375, dus als ik 375*5 = 1875 vermenigvuldig, heb je een extended view-controller.

Op dezelfde manier volg je hetzelfde proces voor alle verschillende telefoons en schermformaten.

Om de scroll-weergave te laten werken, hebben we een scroll-view-object nodig. Scroll View biedt een mechanisme om inhoud weer te geven die groter is dan de grootte van het toepassingsvenster. Klik op dit object, sleep het en plaats het in de linkerbovenhoek van de viewcontroller en zorg ervoor dat X en Y op nul staan en dat de stretch overeenkomt met uw viewcontroller.

Met Scroll View kunnen we alleen scrollen, verder niets. Vervolgens moeten we een inhoudsweergave toevoegen, waarin andere weergaven worden opgeslagen. U vindt de UIView - het vertegenwoordigt een rechthoekig gebied waarin het gebeurtenissen tekent en ontvangt - in de objectbibliotheek. Klik en sleep het eenvoudig naar de schuifweergave en rek het opnieuw dienovereenkomstig uit.

Selecteer de schuifweergave in het linkerdeelvenster en we noemen uitlijning 0, 0, 0, 0 en voegen beperkingen toe. Doe hetzelfde voor de inhoudsweergave.

Stap 7: Ontwikkel de gebruikersinterface voor de subpagina's van de horizontale veegbeweging

In deze stap moet u de gebruikersinterface van uw subpagina's maken. Wat ik koos om te doen, is een prototype maken in Sketch en het vervolgens bouwen in Xcode.

Stap 8: Implementeer het ontwerp in Xcode

De volgende stap is om dit ontwerp in Xcode te implementeren. Om dit te doen, moet u voor alle subpagina's uitlaatverbindingen maken en een andere voor de "moederweergave", wat inhoudt dat u één uitlaatverbinding voor de hele view-controller maakt.

Elementen in een storyboard zijn gekoppeld aan broncode. Het is belangrijk om de relatie te begrijpen die een storyboard heeft met de code die u schrijft.

In een storyboard vertegenwoordigt een scène één scherm met inhoud en meestal één weergavecontroller. View-controllers implementeren het gedrag van uw app en beheren één inhoudsweergave met zijn hiërarchie van subviews. Ze coördineren de informatiestroom tussen het gegevensmodel van de app, waarin de gegevens van de app zijn opgenomen, en de weergaven die die gegevens weergeven, beheren de levenscyclus van hun inhoudsweergaven, verwerken oriëntatieveranderingen wanneer het apparaat wordt gedraaid, definiëren de navigatie binnen uw app en het gedrag implementeren om te reageren op gebruikersinvoer. Alle view controller-objecten in iOS zijn van het type UIViewController of een van zijn subklassen.

U definieert het gedrag van uw viewcontrollers in code door aangepaste subklassen van viewcontrollers te maken en te implementeren. U kunt vervolgens een verbinding maken tussen die klassen en scènes in uw storyboard om het gedrag te krijgen dat u in code hebt gedefinieerd en de gebruikersinterface die u in uw storyboard hebt gedefinieerd.

Xcode heeft al zo'n klasse gemaakt waar je eerder naar hebt gekeken, ViewController.swift, en deze verbonden met de scène waaraan je werkt in je storyboard. Naarmate u meer scènes toevoegt, maakt u deze verbinding zelf in de Identiteitsinspectie. Met de identiteitscontrole kunt u eigenschappen van een object in uw storyboard bewerken met betrekking tot de identiteit van dat object, zoals tot welke klasse het object behoort.

Outlets maken voor UI ElementsOutlets bieden een manier om te verwijzen naar interface-objecten - de objecten die u aan uw storyboard hebt toegevoegd - vanuit broncodebestanden. Om een stopcontact te maken, houdt u de Control-toets ingedrukt en sleept u van een bepaald object in uw storyboard naar een weergavecontrollerbestand. Deze bewerking maakt een eigenschap voor het object in uw view controller-bestand, waarmee u dat object tijdens runtime vanuit code kunt openen en manipuleren

1. Open je storyboard, Main.storyboard.
2. Klik op de Assistent-knop in de Xcode-werkbalk in de rechterbovenhoek van Xcode om de Assistent-editor te openen. Als u meer werkruimte wilt, kunt u de projectnavigator en het hulpprogrammagebied samenvouwen door op de knoppen Navigator en Hulpprogramma's in de Xcode-werkbalk te klikken.
3. U kunt de overzichtsweergave ook samenvouwen.

Wijzig in de editor-selectiebalk, die bovenaan de assistent-editor verschijnt, de assistent-editor van Voorbeeld in Automatisch > ViewController.swift.

Klik op de subpagina en sleep naar de juiste klasse in de code.

Stap 9: Aangepaste gebaren integreren

SWIPE GEBAAR

Een veeggebaar vindt plaats wanneer de gebruiker een of meer vingers in een bepaalde horizontale of verticale richting over het scherm beweegt. Gebruik de klasse UISwipeGestureRecognizer om veegbewegingen te detecteren.

Implementatie van veeggebaar

Stap 1: Voeg veegbeweging(en) toe in de viewDidLoad()-methode

overschrijven func viewDidLoad() { super.viewDidLoad()

let swipeLeft = UISwipeGestureRecognizer(doel: zelf, actie: #selector(handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer(swipeLeft)

let swipeRight = UISwipeGestureRecognizer(doel: zelf, actie: #selector(handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer(swipeRight)

let swipeUp = UISwipeGestureRecognizer(doel: zelf, actie: #selector(handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer(swipeUp)

let swipeDown = UISwipeGestureRecognizer(doel: zelf, actie: #selector(handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer(swipeDown) }

Stap 2: Controleer de bewegingsdetectie in handleGesture() methode func handleGesture(gesture: UISwipeGestureRecognizer) -> Void { if gebaren.direction == UISwipeGestureRecognizerDirection.right { print("Veeg naar rechts") } else if gebaren.direction == UISwipeGestureRecognizerDirection. left { print("Swipe Left") } else if gebaren.direction == UISwipeGestureRecognizerDirection.up { print("Swipe Up") } else if gebaren.direction == UISwipeGestureRecognizerDirection.down { print("Swipe Down") } }

In mijn app wilde ik swipeRight gebruiken, maar viel vrij om degene te gebruiken die meer geschikt is voor uw toepassing.

Laten we dit nu in onze code implementeren.

We gaan naar de registerVC.swift die we eerder hebben gemaakt en schrijven de code zoals je op de foto's kunt zien.

UITLEG VAN DE CODE

laat current_x de huidige positie van de ScrollView krijgen (horizontale positie)laat screen_width de breedte van het scherm krijgen, deze grootte aftrekken laat new_x van de huidige positie van scrollview, ik kom terug op de breedte van het scherm als current_x > 0 tot tenzij het meer dan 0 is - 0 is de 1e pagina.

En we zijn klaar!

Goed bezig jongens!