Kerimisvaate loomine Swiftiga: 9 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:48

Paar kuud tagasi ei teadnud ma swifti ja Xcode'i olemasolust. Täna sain arendada väikese osa rakendusest, mida tahan luua. Sain luua midagi lahedat, mida tahaksin teiega jagada.

Selles õpetuses juhatan teid kerimisvaate stseeni loomise protsessi, kus kasutajad suunatakse ümber, kui nad soovivad uue konto registreerida. Sel teel annan teile kindlasti mõned teoreetilised selgitused meie tegemiste kohta, et saaksite tegelikult aru, millega me tegeleme.

Enne kui seda teeme, räägime sellest, mis on Swift ja Xcode:

1. Swift on võimas ja intuitiivne programmeerimiskeel macOS, iOS, watchOS ja tvOS jaoks. Swifti koodi kirjutamine on interaktiivne ja lõbus, süntaks on lühike, kuid väljendusrikas ning Swift sisaldab kaasaegseid funktsioone, mida arendajad armastavad. Swifti kood on disainilt ohutu, kuid toodab ka välkkiiret tarkvara. See on loodud töötama koos Apple'i kakao- ja kakaopuhastusraamistikega ning Apple'i toodete jaoks kirjutatud suure hulga olemasoleva Objective-C koodiga. See on ehitatud avatud lähtekoodiga LLVM kompilaatori raamistikuga ja on Xcode'i lisatud alates versioonist 6, mis ilmus 2014. aastal. Apple'i platvormidel kasutab see objektiraamatukogu Objective-C, mis võimaldab käivitada C, Objective-C, C ++ ja Swift koodi ühe programmi raames.

2. Xcode on integreeritud arenduskeskkond (IDE) macOS -i jaoks, mis sisaldab Apple'i väljatöötatud tarkvaraarendusvahendite komplekti macOS, iOS, watchOS ja tvOS tarkvara arendamiseks.

Samm: laadige alla Xcode

Xcode 10 sisaldab kõike, mida vajate hämmastavate rakenduste loomiseks kõigile Apple'i platvormidele. Nüüd näevad Xcode ja Instruments MacOS Mojave uues tumedas režiimis suurepärased välja. Lähtekoodi redigeerija võimaldab teil koodi hõlpsamini teisendada või ümber kujundada, näha allika juhtimise muudatusi seotud rea kõrval ja saada kiiresti üksikasju eelvoolu koodide erinevuste kohta. Kohandatud visualiseerimise ja andmete analüüsi abil saate luua oma instrumendi. Swift koostab tarkvara kiiremini, aitab teil kiiremaid rakendusi edastada ja loob veelgi väiksemaid binaarfaile. Testipakid valmivad mitu korda kiiremini, meeskonnaga töötamine on lihtsam ja turvalisem ning palju muud.

Xcode 10 sisaldab Swift 4.2, mis kompileerib teie tarkvara kiiremini, aitab teil kiiremaid rakendusi edastada ja loob veelgi väiksemaid binaarfaile. Võrreldes Swift 4.0 -ga suudab uusim Swifti kompilaator ehitada suuri rakendusi üle kahe korra kiiremini.* Koos uue Xcode'i uue ehitussüsteemiga on teie igapäevane redigeerimine, koostamine ja testimine palju kiirem. Viimase mitme tuumaga Maci riistvara jaoks optimeeritud Xcode ja Swift loovad välkkiire arendusplatvormi.

2. samm: alustame

Nii et me läheme Xcode'i ja loome uue projekti. Kui klõpsame uuel projektil, on meie rakendus ühe vaatega rakendus. Neile, kes ei tea, tähendab ühe vaatega rakendus, et peate alustama kõike nullist ja et meil on üksainus vaade, mida saame programmeerida.

Pange oma tootele nimi TutorialApp. Kui olete kogenud arendaja, kes avaldab rakendusi App Store'is, on teil tõenäoliselt meeskond, kuid kui olete uus ja teil pole ühtegi rakendust avaldatud, võite selle välja vahele jätta. Organisatsiooni nimele saate kirjutada ettevõtte nime, kui teil see on, minu puhul jätan alles MacBook Pro. Seejärel peetakse organisatsiooni identifikaatorit teie projekti unikaalseks identifikaatoriks, seega võite kirjutada kõike, mida soovite. Keel tuleb kindlasti kiire.

Niisiis, vajutage nuppu järgmine ja salvestage projekt töölauale, et sellele oleks lihtne juurde pääseda.

Uus projekt koosneb kolmest failist: AppDelegate.swift, ViewController.swift ja selle õpetuse täht: Main.storyboard. Projekti üldiste sätete jaotises Deployment Info> Device Orientation määrake Devices to iPhone. Kuna see on ainult portreerakendus, tühjendage valik Landscape Left ja Landscape Right. Avage projektinavigaatoris Main.storyboard, et seda liideseehitusprogrammis vaadata:

Me ei tee konfiguratsioonis mingeid muudatusi ja läheme otse põhilise süžeeskeemi juurde. Kuna tegime ühe vaatega rakenduse, lõime lihtsa ühe, tühja vaate. Sellega peame tegelema.

3. samm: kasutajaliideses töötamine

Vaate kontrolleri ametlik storyboard terminoloogia on "stseen", kuid võite kasutada mõisteid vaheldumisi. Stseen kujutab süžeeskeemis vaate kontrollerit.

Siin näete ühe vaate kontrollerit, mis sisaldab tühja vaadet. Vasakult vaadekontrollerile osutav nool näitab, et see on selle süžeeskeemi jaoks kuvatav esmakordne vaate kontroller. Paigutuse kujundamine süžeeskeemi redaktoris toimub, lohistades juhtnupud objektide raamatukogust (vt paremas ülanurgas) oma vaate kontrollerisse.

Süžeeskeemi redaktori toimimise tundmaõppimiseks lohistage objektiraamatust mõned juhtelemendid tühja vaate kontrollerisse, nagu on näha videos.

Juhtnuppe lohistades peaksid need ilmuma vasakul dokumendi ülevaates.

Saate luua soovitud kasutajaliidese. Minu puhul kasutasin seda, mida näete pildil.

4. samm: arendage teise vaate kontroller ja käivitage segid (üleminekud)

Seega soovin oma rakenduses, kui kasutaja vajutab nuppu „Registreeri uus konto“, et ta suunataks konto registreerimise lehele. Nii et sel eesmärgil on iga leht uus stseen, uus kuva. Sel põhjusel peame looma teise vaate kontrolleri, mille leiate objektiteegist.

Tippige vaate kontroller ja asetage see oma esialgse vaate kontrolleri kõrvale. See stseen vastutab registrivaate kontrolleri eest. Sellele lehele saab ümber suunata kahel viisil.

1. saame seda teha käsitsi, kui loome toiminguühenduse nupult teise vaate juhtelemendiga
2. saame seda teha programmeeritult

Valisin teha käsitsi. See on lihtne:

1. Tehke oma nupul üks vasakklõps (minu puhul registreeri uus konto)
2. Hoidke käsku ja hiire vasakut nuppu, et see lohistada registri juhtimiskohale.
3. Vabastage see seal ja valige "Esita modaalselt"

Samm: looge registreerimisprotsessi jaoks programmeerimisklass

Niisiis, nüüd tahame uuele stseenile luua spetsiaalse kodeerimisklassi.

Selleks peate tegema järgmised toimingud.

• paremklõpsake oma projekti kausta
• klõpsake uut faili nimega kakaopuudutusklass
• klassis kirjutage: RegisterVC
• VÄGA TÄHTIS! Veenduge, et alamklass peab olema UIViewController tüüpi
• keel peab olema kiire.
• klõpsake nuppu järgmine ja salvestage oma kakaoklass oma projekti peamisse juure.
• Klõpsake peamist süžeeskeemi ja minge uue vaate kontrolleri juurde
• klõpsake selle kohal olevat kollast nuppu
• paremal minge klassi inspektori juurde ja tehke viide registri VC -le (Costum class, class = RegisterVC)

6. samm: ehitage lehe horisontaalne pühkimine

IOS -is kasutatakse kerimisvaateid sisu vaatamiseks, mis ei mahu täielikult ekraanile. Kerimisvaadetel on kaks peamist eesmärki:

Kui soovite lubada kasutajatel lohistada selle ala piirkonda, mida nad soovivad kuvada, lubada kasutajatel näpistavate liigutuste abil kuvatavat sisu sisse või välja suumida. IOS -i rakendustes kasutatav tavaline juhtelement - UITableView - on UIScrollView alamklass ja pakub suurepärast võimalust ekraanist suurema sisu vaatamiseks.

Milleks kasutada alamlehti horisontaalsel pühkimisel?

Noh, kui ma peaksin looma 6 erinevat lehte, tähendaks see, et pean looma igaühele neist eraldi klassi ja teabe edastamine ühest klassist teise ei ole nii mugav. Kui ma näiteks sisestan oma e -posti ja seejärel klõpsan järgmisel, kui mul on erinev vaate kontroller, lahkun vaate kontrolleri esimeselt lehelt ja seejärel kuvatakse teine. Sel juhul tuleb esimese vaatekontrolleri teave edastada järgmisele ja seejärel uuesti kolmandale vaate kontrollerile jne. Kui mul on kõik vajalikud vaatekontrollerid olemas, pean koguma kõik andmed kõigist lehed ja saatke need serverisse. Niisiis, see oleks tõesti keeruline.

Niisiis, minnes selle vaate kontrolleri loomise juurde, oli minu puhul 5 lehte, mida tahtsin luua:

1. E -post
2. Täisnimi
3. Parool
4. Sünnikuupäev
5. Sugu

See tähendab, et meie loodud vaate kontroller peab olema 5 korda suurem kui see, mille me varem tegime.

Valige oma vaate kontroller ja minge paremasse ülanurka ning klõpsake joonlauaikoonil ja muutke simuleeritud suurust. Laiuse ja kõrguse reguleerimiseks valite vaba vormi. IPhone 8 jaoks sobiva ekraani laius on vaikimisi 375, nii et kui ma korrutan 375*5 = 1875. Ja siin on teil laiendatud vaate kontroller.

Samamoodi järgite sama protsessi kõigi erinevate telefonide ja ekraanisuuruste puhul.

Kerimisvaate toimimiseks vajame kerimisvaate objekti. Kerimisvaade pakub mehhanismi rakenduse akna suurusest suurema sisu kuvamiseks. Klõpsake sellel objektil, lohistage see ja asetage see vaate kontrolleri vasakusse ülanurka ning veenduge, et X ja Y oleksid nullpositsioonil ja venitus oleks vastavalt teie vaate kontrollerile.

Kerimisvaade võimaldab meil ainult kerida, mitte midagi muud. Seejärel peame lisama sisuvaate, mis salvestab teisi vaateid. UIV vaade - see kujutab ristkülikukujulist piirkonda, milles see joonistab ja võtab vastu sündmusi - leiate objektiteegist. Lihtsalt klõpsake ja lohistage see kerimisvaadesse ning venitage seda uuesti.

Valige vasakpoolselt paneelilt kerimisvaade ja me nimetame joonduse 0, 0, 0, 0 ja lisame piiranguid. Tehke sama ka sisuvaate puhul.

7. samm: arendage horisontaalse pühkimise alamlehtede kasutajaliidest

Selles etapis peate looma oma alamlehtede kasutajaliidese. Ma otsustasin teha Sketchis prototüübi ja ehitada selle Xcode'i.

Samm: rakendage disain Xcode'is

Järgmine samm on selle disaini rakendamine Xcode'is. Selleks peate looma väljalaskeühendused kõikidele alamlehtedele ja looma uue "emavaate" jaoks, st ühe väljalaskeühenduse kogu vaate kontrollerile.

Storyboard'i elemendid on lingitud lähtekoodiga. Oluline on mõista suhet, mis süžeeskeemil on teie kirjutatud koodiga.

Süžeeskeemis kujutab stseen ühte sisukuva ja tavaliselt ühte vaate kontrollerit. Vaate kontrollerid rakendavad teie rakenduse käitumist ja haldavad alamvaadete hierarhia abil ühte sisuvaadet. Need koordineerivad infovoogu rakenduse andmemudeli, mis sisaldab rakenduse andmeid, ja neid andmeid kuvavate vaadete vahel, haldavad nende sisuvaadete olelustsüklit, käsitlevad seadme pööramisel suundade muutmist, määravad teie rakenduses navigeerimise. ja rakendama käitumist, mis vastab kasutaja sisendile. Kõik iOS -i vaadekontrolleri objektid on tüüpi UIViewController või mõni selle alamklassidest.

Saate määratleda oma vaadekontrollerite käitumise koodis, luues ja rakendades kohandatud vaadekontrolleri alamklasse. Seejärel saate luua nende klasside ja stseenide vahel oma süžeeskeemis ühenduse, et saada koodis määratletud käitumine ja süžeeskeemis määratletud kasutajaliides.

Xcode on juba loonud ühe sellise klassi, mida varem vaatasite, ViewController.swift ja ühendas selle stseeniga, mille kallal te oma süžeeskeemis töötate. Kui lisate rohkem stseene, loote selle ühenduse ise identiteedikontrollis. Identiteedikontroll võimaldab teil muuta oma storyboardis objekti omadusi, mis on seotud selle objekti identiteediga, näiteks millisesse klassi objekt kuulub.

Väljundite loomine kasutajaliidese elementide jaoks Väljundid võimaldavad lähtekoodifailidest viidata liidese objektidele-objektidele, mille olete lisanud süžeeskeemile. Väljundi loomiseks lohistage juhtklahvi konkreetselt objektilt vaatekontrolleri faili. See toiming loob teie vaate kontrolleri failis olevale objektile atribuudi, mis võimaldab teil sellele objektile koodil käitusajal juurde pääseda ja sellega manipuleerida

1. Avage süžeeskeem, Main.storyboard.
2. Assistendi redaktori avamiseks klõpsake Xcode tööriistariba Xcode paremas ülanurgas asuvat nuppu Assistant. Kui soovite rohkem ruumi töötamiseks, ahendage projekti navigaator ja utiliit, klõpsates tööriistariba Xcode nuppudel Navigaator ja utiliidid.
3. Samuti saate ahendada kontuurivaadet.

Muutke abiredaktori ülaosas kuvataval redaktori valimisribal abiredaktor eelvaate asemel Automaatne> ViewController.swift.

Klõpsake alamlehte ja lohistage koodi sobivasse klassi.

Samm: integreerige kohandatud žeste

Pühkige žest

Pühitsemisžest tekib siis, kui kasutaja liigutab ühte või mitut sõrme üle ekraani kindlas horisontaalses või vertikaalses suunas. Kasutage pühkimisliigutuste tuvastamiseks klassi UISwipeGestureRecognizer.

Pühitsemisžesti rakendamine

1. toiming: lisage meetodil viewDidLoad () pühkimisliigutus (t)

alistama func viewDidLoad () {super.viewDidLoad ()

let swipeLeft = UISwipeGestureRecognizer (sihtmärk: ise, tegevus: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (sihtmärk: ise, tegevus: #selector (handleGesture)) swipeRight.direction =. right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (sihtmärk: ise, tegevus: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (sihtmärk: ise, tegevus: #selector (handleGesture)) swipeDown.direction =. down self.view.addGestureRecognizer (swipeDown)}

2. toiming. Kontrollige käepideme žestituvastust käepidemes vasakule {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

Tahtsin oma rakenduses kasutada swipeRight'i, kuid ei saanud vabalt kasutada seda, mis on teie rakendusele sobivam.

Nüüd rakendame selle oma koodi.

Me läheme registrisseVC.swift, mille oleme varem loonud, ja kirjutame koodi, nagu näete piltidel.

KOODI SELGITUS

laske praegusel_x saada ScrollView praegune asukoht (horisontaalne asend) laske ekraani laiusel saada ekraani laiust, lahutades selle suuruse, laske uus_x kerimisvaate praegusest positsioonist, ma naasen ekraani laiuse järgi, kui praegune_x> 0, kuni see pole suurem kui 0 - 0 on esimene leht.

Ja me oleme valmis!

Hea töö poisid!