Ustvarite pomični pogled s Swiftom: 9 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

Pred nekaj meseci nisem vedel, da obstajata swift in xcode. Danes sem lahko razvil majhen del aplikacije, ki jo želim ustvariti. Ustvaril sem lahko nekaj kul, kar bi rad delil z vami.

V tej vadnici vas bom popeljal skozi postopek izdelave scene za pomikanje, v kateri bodo uporabniki preusmerjeni, ko želijo registrirati nov račun. Med potjo vam bom zagotovil nekaj teoretičnih pojasnil stvari, ki jih počnemo, da boste lahko dejansko razumeli, kaj počnemo.

Preden to storimo, se pogovorimo o tem, kaj sta Swift in Xcode:

1. Swift je zmogljiv in intuitiven programski jezik za macOS, iOS, watchOS in tvOS. Pisanje kode Swift je interaktivno in zabavno, skladnja je jedrnata, vendar izrazna, Swift pa vključuje sodobne funkcije, ki jih imajo razvijalci radi. Koda Swift je oblikovno varna, hkrati pa proizvaja tudi programsko opremo, ki deluje bliskovito hitro. Zasnovan je tako, da deluje z Applovimi ogrodji Cocoa in Cocoa Touch in velikim obsegom obstoječe kode Objective-C, napisane za izdelke Apple. Zgrajen je z odprtokodnim ogrodjem prevajalnika LLVM in je vključen v Xcode od različice 6, ki je izšla leta 2014. Na platformah Apple uporablja knjižnico časa izvajanja Objective-C, ki omogoča izvajanje kod C, Objective-C, C ++ in Swift. znotraj enega programa.

2. Xcode je integrirano razvojno okolje (IDE) za macOS, ki vsebuje nabor orodij za razvoj programske opreme, ki jih je razvilo podjetje Apple za razvoj programske opreme za macOS, iOS, watchOS in tvOS.

Korak: Prenesite Xcode

Xcode 10 vsebuje vse, kar potrebujete za ustvarjanje neverjetnih aplikacij za vse platforme Apple. Zdaj sta Xcode in Instruments v novem temnem načinu na macOS Mojave videti odlično. Urejevalnik izvorne kode vam omogoča lažje preoblikovanje ali preoblikovanje kode, spremljanje sprememb izvornega nadzora poleg povezane vrstice in hitro pridobivanje podrobnosti o razlikah v zgornji kodi. S pomočjo vizualizacije po meri in analize podatkov lahko sestavite svoj instrument. Swift hitreje sestavi programsko opremo, vam pomaga pri hitrejših aplikacijah in ustvari še manjše binarne datoteke. Testni paketi se dokončajo večkrat hitreje, delo z ekipo je enostavnejše in varnejše ter še veliko več.

Xcode 10 vključuje Swift 4.2, ki hitreje zbira vašo programsko opremo, vam pomaga pri hitrejših aplikacijah in ustvarja še manjše binarne datoteke. V primerjavi s Swiftom 4.0 lahko najnovejši prevajalnik Swift velike aplikacije ustvari več kot dvakrat hitreje.* V kombinaciji z novim sistemom gradnje Xcode je vsakdanji potek urejanja, sestavljanja in preizkušanja veliko hitrejši. Optimizirana za najnovejšo večjedrno strojno opremo Mac, Xcode in Swift omogočata bliskovito hitro razvojno platformo.

2. korak: Začnimo

Torej bomo šli na Xcode in ustvarili nov projekt. Ko kliknemo nov projekt, bo naša aplikacija aplikacija za en pogled. Za tiste, ki ne vedo, aplikacija z enim pogledom pomeni, da boste morali vse začeti od začetka in da bo lahko en sam pogled, ki ga lahko programiramo.

Poimenujte svoj izdelek TutorialApp. Če ste izkušen razvijalec, ki objavlja aplikacije v trgovini App Store, boste verjetno imeli ekipo, če pa ste novi in nimate objavljenih aplikacij, lahko to polje preskočite. V ime organizacije lahko vnesete ime podjetja, če ga imate, v mojem primeru bom obdržal samo MacBook Pro. Nato se identifikator organizacije šteje za nekaj podobnega kot edinstven identifikator vašega projekta, zato lahko napišete kar želite. Jezik bo zagotovo hiter.

Torej, pritisnite Next in shranimo projekt na namizje, da bo lažje dostopen.

Novi projekt je sestavljen iz treh datotek, AppDelegate.swift, ViewController.swift in zvezdice te vadnice: Main.storyboard. Pod Deployment Info> Device Orientation v splošnih nastavitvah projekta nastavite Devices na iPhone. Ker je to le portretna aplikacija, počistite možnosti Lendscape Leftand Landscape Right. Odprite Main.storyboard v navigatorju projektov, da si ga ogledate v vmesniku Buildereditor:

V konfiguraciji ne bomo spreminjali in gremo naravnost na glavno zgodbo. Ker smo naredili aplikacijo za en sam pogled, smo ustvarili preprost en sam, prazen pogled. To je nekaj, na čemer moramo delati.

3. korak: Delo v uporabniškem vmesniku

Uradna terminologija snemalne knjige za krmilnik pogledov je »scena«, vendar lahko izraze uporabljate zamenljivo. Prizor predstavlja krmilnik pogleda v snemalni knjigi.

Tu vidite en sam krmilnik pogleda, ki vsebuje prazen pogled. Puščica, ki kaže na krmilnik pogleda na levi, označuje, da je to začetni krmilnik pogleda, ki bo prikazan za to snemalno knjigo. Oblikovanje postavitve v urejevalniku snemalnih knjig se izvede tako, da povlečete kontrolnike iz Knjižnice objektov (glejte zgornji desni kot) v krmilnik pogleda.

Če želite začutiti, kako deluje urejevalnik snemalnih knjig, povlecite nekaj kontrolnikov iz knjižnice objektov v krmilnik praznega pogleda, kot je prikazano v videoposnetku.

Ko povlečete kontrolnike, bi se morali prikazati v orisu dokumenta na levi.

Ustvarite lahko želeni uporabniški vmesnik. V mojem primeru sem uporabil tistega, ki ga vidite na sliki.

4. korak: Razvijte krmilnik drugega pogleda in začnite Segues (prehode)

Zato želim v svoji aplikaciji, ko uporabnik pritisne gumb "Registriraj nov račun", preusmerjen na stran z registrskim računom. V ta namen je torej vsaka stran nov prizor, nov prikaz. Iz tega razloga moramo ustvariti drugi krmilnik pogleda, ki ga najdete v knjižnici objektov.

Vnesite krmilnik pogleda in ga postavite poleg začetnega krmilnika pogleda. Ta prizor bo odgovoren za krmilnik pogleda registra. Preusmeritev na to stran je mogoča na dva načina:

1. lahko to naredimo ročno, ko z gumbom vzpostavimo akcijsko povezavo z drugim kontrolnikom pogleda
2. lahko to naredimo programsko

Odločil sem se, da ga naredim ročno. Preprosto je takole:

1. Levo kliknite na svoj gumb (v mojem primeru registrirajte nov račun)
2. Pridržite ukaz in levi klik miške, da ga povlečete na prizor za upravljanje registra.
3. Spustite ga tam in izberite "Modal Present"

5. korak: Ustvarite razred programiranja za postopek registracije

Torej, zdaj želimo ustvariti namenski razred kodiranja za novo sceno.

Če želite to narediti, morate narediti naslednje korake:

• z desno tipko miške kliknite mapo projekta
• kliknite na novo datoteko, imenovano razred kakava
• v razredu napišite: RegisterVC
• ZELO POMEMBNO! Prepričajte se, da mora biti podrazred tipa UIViewController
• jezik mora biti hiter.
• kliknite Naprej in shranite svoj razred kakava v glavni koren projekta.
• Kliknite na glavno zgodbo in pojdite na nov krmilnik pogleda
• kliknite na rumeni gumb, ki je nameščen nad njim
• na desni strani pojdite na inšpektorja razredov in se sklicujte na Register VC (razred Costum, razred = RegisterVC

Korak 6: Zgradite vodoravno poteg strani

V sistemu iOS se pogledi drsnikov uporabljajo za ogled vsebine, ki ne ustreza popolnoma zaslonu. Pogledi pomikanja imajo dva glavna namena:

Če želite uporabnikom omogočiti, da povlečejo območje vsebine, ki jo želijo prikazati, uporabnikom omogočite, da povečajo ali pomanjšajo prikazano vsebino s kretnjami. Skupni nadzor, ki se uporablja v aplikacijah za iOS - UITableView - je podrazred UIScrollView in ponuja odličen način za ogled vsebine, ki je večja od zaslona.

Kaj uporablja podstrani pri vodoravnem potezu?

No, če bi ustvaril 6 različnih strani, bi to pomenilo, da moram ustvariti poseben razred za vsako od njih in ni tako priročno prenašati informacije iz enega razreda v drugega. Ko na primer vtipkam svoj e -poštni naslov in nato kliknem naprej, če imam drug krmilnik pogleda, bom zapustil prvo stran krmilnika pogleda, nato pa bo predstavljena druga. V tem primeru je treba podatke o prvem krmilniku pogleda prenesti na naslednjega in nato spet na tretji krmilnik pogleda itd. Ko bom imel vse krmilnike pogledov, ki jih potrebujem, bom moral zbrati vse podatke iz vseh strani in jih pošljite na strežnik. Torej bi bilo to res zapleteno.

Tako sem pri ustvarjanju tega krmilnika pogledov v mojem primeru imel 5 strani, ki sem jih želel ustvariti:

1. E-naslov
2. Polno ime
3. Geslo
4. Datum rojstva
5. Spol

To pomeni, da mora biti krmilnik pogleda, ki ga bomo ustvarili, 5 -krat večji od tistega, ki smo ga naredili prej.

Izberite krmilnik pogleda in pojdite v zgornji desni kot, kliknite ikono ravnila in uredite simulirano velikost. Za prilagoditev širine in višine boste izbrali Freeform. Privzeta širina zaslona, ki je primerna za iphone 8, je 375, zato, če pomnožim 375*5 = 1875. In tukaj, imate razširjen krmilnik pogleda.

Podobno sledite istemu postopku za vse različne telefone in velikosti zaslona.

Če želimo, da pogled na drsnik deluje, potrebujemo predmet pogleda na drsnik. Pomakni pogled ponuja mehanizem za prikaz vsebine, ki je večja od velikosti okna aplikacije. Kliknite ta predmet, ga povlecite in ga postavite v zgornji levi kot krmilnika pogleda ter se prepričajte, da sta X in Y na ničelnih položajih, raztezanje pa glede na krmilnik pogleda.

Pomakni pogled nam omogoča samo pomikanje, nič drugega. Nato moramo dodati pogled vsebine, ki bo shranjeval druge poglede. UIView - predstavlja pravokotno regijo, v kateri riše in sprejema dogodke - najdete v knjižnici objektov. Preprosto ga kliknite in povlecite v drsni pogled ter ga znova ustrezno raztegnite.

Na levi plošči izberite pogled pomikanja in poklicali bomo poravnavo 0, 0, 0, 0 in dodali omejitve. Enako storite za pogled vsebine.

Korak 7: Razvijte uporabniški vmesnik za podstrani horizontalnega povlečenja

V tem koraku morate ustvariti uporabniški vmesnik svojih podstrani. Odločil sem se, da naredim prototip v Sketchu in ga nato sestavim v Xcode.

8. korak: Izvedite oblikovanje v Xcode

Naslednji korak je implementacija te zasnove v Xcode. Če želite to narediti, morate ustvariti izhodne povezave za vse podstrani in ustvariti še eno za "matični pogled", kar pomeni eno izhodno povezavo za celoten krmilnik pogleda.

Elementi v snemalni knjigi so povezani z izvorno kodo. Pomembno je razumeti odnos snemalne knjige do kode, ki jo napišete.

V snemalni knjigi prizor predstavlja en zaslon vsebine in običajno en krmilnik pogleda. Krmilniki pogledov izvajajo vedenje vaše aplikacije in upravljajo en pogled vsebine s hierarhijo podpogledov. Usklajujejo pretok informacij med podatkovnim modelom aplikacije, ki zajema podatke aplikacije, in pogledi, ki prikazujejo te podatke, upravljajo življenjski cikel njihovih pogledov vsebine, upravljajo spremembe orientacije pri vrtenju naprave, določajo navigacijo v vaši aplikaciji in izvedite vedenje, da se odzovete na vnos uporabnika. Vsi predmeti krmilnika pogleda v iOS -u so tipa UIViewController ali enega od njegovih podrazredov.

Vedenje vaših krmilnikov pogledov določite v kodi z ustvarjanjem in izvajanjem podrazredov krmilnikov pogledov po meri. Nato lahko ustvarite povezavo med temi razredi in prizori v svoji snemalni knjigi, da dobite vedenje, ki ste ga določili v kodi, in uporabniški vmesnik, ki ste ga določili v svoji snemalni knjigi.

Xcode je že ustvaril en tak razred, ki ste si ga ogledali prej, ViewController.swift, in ga povezal s prizoriščem, na katerem delate v svoji snemalni knjigi. Ko dodate več prizorov, boste to povezavo vzpostavili sami v inšpektorju identitete. Inšpektor za identiteto vam omogoča urejanje lastnosti predmeta v snemalni knjigi, povezanih z identiteto tega predmeta, na primer razreda, kateremu predmet pripada.

Ustvarjanje vtičnic za elemente uporabniškega vmesnika Vtičnice ponujajo način sklicevanja na vmesniške objekte-predmete, ki ste jih dodali v knjigo snemalnika-iz datotek izvorne kode. Če želite ustvariti vtičnico, pritisnite Control in povlecite iz določenega predmeta v svoji snemalni knjigi v datoteko krmilnika pogledov. Ta operacija ustvari lastnost za predmet v datoteki krmilnika pogleda, ki vam omogoča dostop in upravljanje s tem predmetom iz kode med izvajanjem

1. Odprite svojo snemalno knjigo, Main.storyboard.
2. Kliknite gumb Pomočnik v orodni vrstici Xcode blizu zgornjega desnega kota Xcode, da odprete urejevalnik pomočnika. Če želite več prostora za delo, strnite navigacijo projekta in območje pripomočkov s klikom na gumba Navigator in Utilities v orodni vrstici Xcode.
3. Pogled orisa lahko tudi strnete.

V izbirni vrstici urejevalnika, ki se prikaže na vrhu urejevalnika pomočnikov, spremenite pomožni urejevalnik iz Predogled v Samodejno> ViewController.swift.

Kliknite podstran in povlecite v ustrezen razred kode.

9. korak: Vključite kretnje po meri

GUST Z VLIKOM

Gesta povleka se pojavi, ko uporabnik premakne enega ali več prstov po zaslonu v določeni vodoravni ali navpični smeri. Uporabite razred UISwipeGestureRecognizer za zaznavanje potez s potegom.

Izvedba poteze s potegom

1. korak: Dodajte poteze s potegom v metodo viewDidLoad ()

preglasiti funkc viewDidLoad () {super.viewDidLoad ()

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

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

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

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

2. korak: Preverite odkrivanje kretenj v funkciji handleGesture () func handleGesture (poteza: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Povlecite desno")} else if gesture.directregent = UDirectionGireure = UR. levo {print ("Povlecite levo")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

V svoji aplikaciji sem želel uporabiti swipeRight, vendar sem prosto uporabil tistega, ki je bolj primeren za vašo aplikacijo.

Zdaj pa to implementirajmo v našo kodo.

Gremo na registerVC.swift, ki smo ga ustvarili prej, in napišemo kodo, kot vidite na slikah.

RAZLAGA KODE

naj current_x dobi trenutni položaj ScrollView (vodoravni položaj) naj screen_width pridobi širino zaslona, odšteje to velikost naj new_x od trenutnega položaja scrollview, vrnem se po širini zaslona, če je current_x> 0, dokler ni več kot 0 - 0 je prva stran.

In končali smo!

Bravo fantje!