Izradite pregledni prikaz pomoću Swifta: 9 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:36

Prije nekoliko mjeseci nisam znao da postoje Swift i Xcode. Danas sam uspio razviti mali dio aplikacije koju želim stvoriti. Uspio sam stvoriti nešto super, što bih želio podijeliti s vama.

U ovom ću vas vodiču provesti kroz proces izgradnje scene s pomicanjem, u kojoj će korisnici biti preusmjereni kada žele registrirati novi račun. Usput ću vam pružiti neka teoretska objašnjenja stvari koje radimo, kako biste zapravo mogli razumjeti što to radimo.

Prije nego što to učinimo, razgovarajmo o tome što su Swift i Xcode:

1. Swift je moćan i intuitivan programski jezik za macOS, iOS, watchOS i tvOS. Pisanje Swift koda interaktivno je i zabavno, sintaksa je jezgrovita, ali izražajna, a Swift uključuje moderne značajke koje programeri vole. Swift kôd je siguran po dizajnu, ali također proizvodi softver koji radi munjevito. Dizajniran je za rad s Appleovim okvirima Cocoa i Cocoa Touch i velikim brojem postojećeg Objective-C koda napisanog za Appleove proizvode. Izgrađen je s otvorenim kodom LLVM kompajlera i uključen je u Xcode od verzije 6, objavljene 2014. Na Apple platformama koristi biblioteku vremena izvođenja Objective-C koja omogućuje pokretanje C, Objective-C, C ++ i Swift koda unutar jednog programa.

2. Xcode je integrirano razvojno okruženje (IDE) za macOS koje sadrži paket alata za razvoj softvera koje je razvila Apple za razvoj softvera za macOS, iOS, watchOS i tvOS.

Korak 1: Preuzmite Xcode

Xcode 10 uključuje sve što vam je potrebno za stvaranje nevjerojatnih aplikacija za sve Apple platforme. Sada Xcode i Instruments izgledaju sjajno u novom tamnom načinu rada na macOS Mojave. Uređivač izvornog koda omogućuje vam lakšu transformaciju ili preradu koda, pregled promjena izvorne kontrole uz srodnu liniju i brzo dobivanje pojedinosti o razlikama uzvodnog koda. Možete izgraditi vlastiti instrument s prilagođenom vizualizacijom i analizom podataka. Swift brže kompilira softver, pomaže vam u isporuci bržih aplikacija i generira još manje binarne datoteke. Testni paketi dovršavaju se mnogo puta brže, rad s timom jednostavniji je i sigurniji, i još mnogo toga.

Xcode 10 uključuje Swift 4.2 koji brže kompilira vaš softver, pomaže vam u isporuci bržih aplikacija i generira još manje binarne datoteke. U usporedbi sa Swiftom 4.0, najnoviji Swift kompajler može graditi velike aplikacije više nego dvostruko brže.* U kombinaciji s novim sustavom nove gradnje Xcode, vaš svakodnevni tijek uređivanja, izgradnje i testiranja je mnogo brži. Optimizirani za najnoviji višejezgreni Mac hardver, Xcode i Swift čine munjevito brzu razvojnu platformu.

Korak 2: Počnimo

Ono što ćemo učiniti je otići na Xcode i stvoriti novi projekt. Nakon što kliknemo na novi projekt, naša će aplikacija biti aplikacija za jedan prikaz. Za one koji ne znaju, aplikacija s jednim prikazom znači da ćete morati sve započeti ispočetka i da će postojati jedan jedini pogled koji možemo programirati.

Imenujte svoj proizvod TutorialApp. Ako ste iskusni programer koji objavljuje aplikacije u App Storeu, vjerojatno ćete imati tim, ali ako ste novi i nemate objavljenih aplikacija, ovo polje možete preskočiti. U naziv organizacije možete upisati naziv tvrtke u slučaju da je imate, u mom slučaju zadržat ću samo MacBook Pro. Zatim se Identifikator organizacije smatra nečim poput jedinstvenog identifikatora vašeg projekta, stoga možete napisati što god želite. Jezik će definitivno biti brz.

Dakle, pritisnite sljedeće i spremimo projekt na radnu površinu kako bi mu bilo lako pristupiti.

Novi projekt sastoji se od tri datoteke, AppDelegate.swift, ViewController.swift i zvjezdice ovog vodiča: Main.storyboard. Ispod Deployment Info> Device Orientation u općim postavkama projekta postavite Devices na iPhone. Budući da je ovo samo portretna aplikacija, poništite odabir opcija Pejzažni lijevi i pejzažni desni. Otvorite Main.storyboard u navigatoru projekta da biste ga vidjeli u Građevinskom sučelju:

Nećemo napraviti nikakve promjene u konfiguraciji i idemo izravno na glavnu priču. Budući da smo napravili aplikaciju s jednim prikazom, stvorili smo jednostavan jedan jedini, prazan prikaz. Ovo je nešto na čemu moramo poraditi.

Korak 3: Rad u korisničkom sučelju

Službena terminologija storyboard -a za kontroler pogleda je "scena", ali izraze možete koristiti naizmjenično. Scena predstavlja kontroler pogleda u storyboardu.

Ovdje vidite jedan kontroler prikaza koji sadrži prazan prikaz. Strelica koja pokazuje na kontroler pogleda s lijeve strane označava da je to početni kontroler prikaza koji će se prikazati za ovu priču. Dizajniranje izgleda u uređivaču storyboarda vrši se povlačenjem kontrola iz Knjižnice objekata (vidi gornji desni kut) u kontroler prikaza.

Da biste stekli dojam o načinu rada uređivača storyboarda, povucite neke kontrole iz Knjižnice objekata u kontroler praznog prikaza kako se vidi u videu.

Dok povlačite kontrole, one bi se trebale prikazati u obrisu dokumenta s lijeve strane.

Možete stvoriti korisničko sučelje koje želite. U mom slučaju, upotrijebio sam onaj koji vidite na slici.

Korak 4: Razvijte drugi kontroler pogleda i pokrenite segues (prijelaze)

Dakle, u mojoj aplikaciji, kada korisnik pritisne gumb "Registriraj novi račun", želim da bude preusmjeren na stranicu registra računa. Stoga je u tu svrhu svaka stranica nova scena, novi prikaz. Iz tog razloga moramo stvoriti drugi kontroler pogleda koji možete pronaći u biblioteci objekata.

Upišite kontroler pogleda i postavite ga pored početnog kontrolera prikaza. Ova scena bit će odgovorna za kontroler prikaza registra. Preusmjeravanje na tu stranicu može se izvršiti na dva načina:

1. to možemo učiniti ručno kada napravimo akcijsku vezu s gumba na drugu kontrolu prikaza
2. to možemo učiniti programski

Ono što sam odlučio učiniti je ručno. Jednostavno je tako:

1. Pritisnite jedan gumb lijevim gumbom miša (u mom slučaju, registrirajte novi račun)
2. Držite naredbu i kliknite lijevom tipkom miša da biste je povukli na kontrolnu scenu registra.
3. Otpustite ga tamo i odaberite "Modalno prezentiraj"

Korak 5: Stvorite klasu programiranja za postupak registracije

Dakle, sada želimo stvoriti namjensku klasu kodiranja za novu scenu.

Da biste to učinili, morate učiniti sljedeće:

• desnom tipkom miša kliknite mapu vašeg projekta
• kliknite na novu datoteku koja se zove klasa dodira kakaovca
• u razredu napišite: RegisterVC
• JAKO VAŽNO! Uvjerite se da potklasa mora biti tipa UIViewController
• jezik mora biti brz.
• kliknite sljedeći i spremite svoju klasu kakaa u glavni korijen vašeg projekta.
• Kliknite na glavnu ploču s pričama i idite na novi kontroler prikaza
• kliknite žuti gumb koji se nalazi iznad njega
• s desne strane idite do razrednog inspektora i uputite se na Register VC (Costum class, class = RegisterVC

Korak 6: Izradite vodoravno prevlačenje stranice

U iOS -u se prikazi pomicanja koriste za prikaz sadržaja koji neće stati u potpunosti na zaslon. Pogledi pomicanja imaju dvije glavne svrhe:

Omogućiti korisnicima povlačenje područja sadržaja koji žele prikazati, dopustiti korisnicima da povećavaju ili umanjuju prikazani sadržaj pomoću gesti prstiju. Uobičajena kontrola koja se koristi u iOS aplikacijama - UITableView - potklasa je UIScrollView i pruža izvrstan način za pregled sadržaja koji je veći od zaslona.

Što koristi podstranice u vodoravnom prevlačenju?

Pa, kad bih stvorio 6 različitih stranica, to bi značilo da moram stvoriti namjenski razred za svaku od njih i nije tako zgodno prenositi podatke iz jednog razreda u drugi. Kada, na primjer, upišem svoju e -poštu, a zatim kliknem na sljedeće, ako imam drugi kontroler prikaza, napustit ću prvu stranicu kontrolera pogleda, a zatim će se prikazati druga. U tom slučaju, informacije o prvom kontroleru prikaza moraju se prenijeti na sljedeći, a zatim ponovno na treći kontroler prikaza itd. Kad budem imao sve kontrolere pregleda koji su mi potrebni, morat ću prikupiti sve podatke iz svih stranice i poslati ih na poslužitelj. Dakle, ovo bi bilo zaista složeno.

Dakle, prelazeći na stvaranje ovog kontrolera pogleda, u mom slučaju, imao sam 5 stranica koje sam želio stvoriti:

1. E -pošta
2. Puno ime
3. Lozinka
4. Datum rođenja
5. Spol

To znači da kontroler pogleda koji ćemo stvoriti mora biti 5 puta veći od onog koji smo prethodno napravili.

Odaberite kontroler pogleda i idite u gornji desni kut, kliknite ikonu ravnala i uredite simuliranu veličinu. Odabrat ćete Freeform kako biste prilagodili širinu i visinu. Zadana širina zaslona koja je prikladna za iphone 8 je 375, pa ako pomnožim 375*5 = 1875. I evo, imate prošireni kontroler prikaza.

Slično, slijedite isti postupak za sve različite telefone i veličine zaslona.

Kako bi scroll view funkcionirao, potreban nam je objekt scroll view. Scroll View pruža mehanizam za prikaz sadržaja koji je veći od veličine prozora aplikacije. Kliknite na ovaj objekt, povucite ga i postavite u gornji lijevi kut kontrolera pogleda i provjerite jesu li X i Y na nultim položajima te se rastezanje u skladu s vašim kontrolerom prikaza.

Scroll View dopušta samo pomicanje, ništa drugo. Zatim moramo dodati prikaz sadržaja koji će pohraniti druge prikaze. UIView - on predstavlja pravokutnu regiju u kojoj crta i prima događaje - možete pronaći u biblioteci objekata. Jednostavno kliknite i povucite ga u prikaz pomicanja i još jednom ga rastegnite u skladu s tim.

Odaberite prikaz pomicanja s lijeve ploče i nazvat ćemo poravnanje 0, 0, 0, 0 i dodati ograničenja. Učinite isto za prikaz sadržaja.

Korak 7: Razvijte korisničko sučelje za podstranice vodoravnog prevlačenja

U ovom koraku morate stvoriti korisničko sučelje svojih podstranica. Ono što sam odlučio učiniti je napraviti prototip u Sketchu, a zatim ga izgraditi u Xcodeu.

Korak 8: Implementirajte dizajn u Xcode

Sljedeći korak je implementacija ovog dizajna u Xcode. Da biste to učinili, morate stvoriti izlazne veze za sve podstranice i stvoriti drugu za "matični prikaz", što znači, jednu izlaznu vezu za cijeli kontroler pogleda.

Elementi u storyboardu povezani su s izvornim kodom. Važno je razumjeti odnos koji storyboard ima prema kodu koji napišete.

U storyboardu scena prikazuje jedan zaslon sa sadržajem i tipično jedan kontroler prikaza. Kontrolori prikaza implementiraju ponašanje vaše aplikacije i upravljaju jednim prikazom sadržaja s hijerarhijom podprikaza. Oni koordiniraju protok informacija između podatkovnog modela aplikacije, koji obuhvaća podatke aplikacije, i prikaza koji prikazuju te podatke, upravljaju životnim ciklusom prikaza njihovih sadržaja, upravljaju promjenama orijentacije pri rotiranju uređaja, definiraju navigaciju unutar vaše aplikacije i implementirati ponašanje za odgovor na unos korisnika. Svi objekti kontrolera pogleda u iOS -u su tipa UIViewController ili jedne od njegovih podklasa.

Ponašanje vaših kontrolera pogleda definirate u kodu stvaranjem i implementacijom prilagođenih podklasa kontrolera pogleda. Zatim možete stvoriti vezu između tih klasa i scena u svojoj storyboardu kako biste dobili ponašanje koje ste definirali u kodu i korisničko sučelje koje ste definirali u svojoj storyboardu.

Xcode je već stvorio jednu takvu klasu koju ste ranije pogledali, ViewController.swift, i povezao je sa scenom na kojoj radite u svojoj storyboardu. Kako budete dodavali još scena, povezat ćete se sami u inspektoru identiteta. Inspektor identiteta omogućuje vam uređivanje svojstava objekta u vašoj storyboardu povezanih s identitetom tog objekta, poput klase kojoj objekt pripada.

Izradite utičnice za UI ElementsOutlets pružaju način referenciranja objekata sučelja-objekata koje ste dodali u storyboard-iz datoteka izvornog koda. Da biste stvorili utičnicu, pritisnite Control i povucite s određenog objekta u storyboardu u datoteku kontrolera prikaza. Ova operacija stvara svojstvo objekta u datoteci kontrolera prikaza, što vam omogućuje pristup i upravljanje tim objektom iz koda tijekom izvođenja

1. Otvorite svoju storyboard, Main.storyboard.
2. Pritisnite gumb Asistent na alatnoj traci Xcode blizu gornjeg desnog kuta Xcodea da biste otvorili uređivač pomoćnika. Ako želite više prostora za rad, sažmite navigator projekta i pomoćno područje klikom na gumbe Navigator i pomoćni programi na alatnoj traci Xcode.
3. Također možete sažeti vanjski prikaz.

Na traci za odabir uređivača koja se prikazuje pri vrhu uređivača pomoćnika promijenite uređivač pomoćnika iz Pregleda u Automatski> ViewController.swift.

Pritisnite podstranicu i povucite je u odgovarajuću klasu u kodu.

Korak 9: Integrirajte prilagođene geste

GEST POKRETANJEM

Gesta prevlačenja događa se kada korisnik pomiče jedan ili više prstiju po zaslonu u određenom vodoravnom ili okomitom smjeru. Upotrijebite klasu UISwipeGestureRecognizer za otkrivanje gesti prevlačenja.

Implementacija geste prevlačenja

Korak 1: Dodajte pokrete prevlačenja u metodu viewDidLoad ()

nadjačati funkc viewDidLoad () {super.viewDidLoad ()

neka swipeLeft = UISwipeGestureRecognizer (cilj: self, akcija: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

neka swipeRight = UISwipeGestureRecognizer (cilj: self, akcija: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

neka swipeUp = UISwipeGestureRecognizer (cilj: self, akcija: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

neka swipeDown = UISwipeGestureRecognizer (cilj: self, akcija: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

Korak 2: Provjerite detekciju gesta u handleGesture () metodi func handleGesture (gesta: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Prijeđite prstom udesno")} else if gesture.directrerection = URedirection = URedirection = URI lijevo {print ("Prijeđite prstom ulijevo")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

U svojoj sam aplikaciji htio koristiti swipeRight, ali nisam mogao koristiti onu koja je prikladnija za vašu aplikaciju.

Sada, implementirajmo ovo u naš kod.

Idemo na registerVC.swift koji smo već stvorili i zapisujemo kôd kao što vidite na slikama.

OBJAŠNJENJE KODEKSA

neka current_x dobiva trenutni položaj ScrollView -a (vodoravni položaj) neka screen_width dobiva širinu zaslona, oduzimajući ovu veličinu neka new_x od trenutne pozicije scrollview -a, vraćam se po širini zaslona ako current_x> 0 sve dok nije više od 0 - 0 je prva stranica.

I gotovi smo!

Bravo momci!