Luo vieritysnäkymä Swiftillä: 9 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:02

Muutama kuukausi sitten en tiennyt swiftin ja Xcoden olemassaolosta. Tänään pystyin kehittämään pienen osan sovelluksesta, jonka haluan luoda. Pystyin luomaan jotain hienoa, jonka haluaisin jakaa kanssanne.

Tässä opetusohjelmassa tutustun vieritysnäkymän luomiseen, jossa käyttäjät ohjataan uudelleen, kun he haluavat rekisteröidä uuden tilin. Varmistan matkan varrella, että annan sinulle joitain teoreettisia selityksiä tekemistämme asioista, jotta voit todella ymmärtää, mitä teemme.

Ennen kuin teemme sen, puhutaanpa siitä, mikä on Swift ja Xcode:

1. Swift on tehokas ja intuitiivinen ohjelmointikieli macOS: lle, iOS: lle, watchOS: lle ja tvOS: lle. Swift -koodin kirjoittaminen on vuorovaikutteista ja hauskaa, syntaksi on tiivis mutta ilmeikäs, ja Swift sisältää kehittäjien rakastamia moderneja ominaisuuksia. Swift-koodi on rakenteeltaan turvallinen, mutta se tuottaa myös ohjelmistoja, jotka toimivat salamannopeasti. Se on suunniteltu toimimaan Applen kaakao- ja kaakaokosketuskehysten sekä Applen tuotteille kirjoitetun suuren Objective-C-koodin kanssa. Se on rakennettu avoimen lähdekoodin LLVM-kääntäjäkehyksen avulla, ja se on ollut mukana Xcodessa vuodesta 2014 julkaistusta versiosta 6 lähtien. yhden ohjelman sisällä.

2. Xcode on integroitu kehitysympäristö (IDE) macOS: lle, joka sisältää joukon Applen kehittämiä ohjelmistokehitystyökaluja MacOS-, iOS-, watchOS- ja tvOS -ohjelmistojen kehittämiseen.

Vaihe 1: Lataa Xcode

Xcode 10 sisältää kaiken mitä tarvitset hämmästyttävien sovellusten luomiseen kaikille Apple -alustoille. Nyt Xcode ja Instruments näyttävät hyvältä uudessa pimeässä tilassa macOS Mojavessa. Lähdekoodieditorin avulla voit muuntaa tai muokata koodia helpommin, nähdä lähdekoodin muutokset asiaan liittyvän rivin rinnalla ja saada nopeasti tietoja alkupään koodieroista. Voit rakentaa oman instrumentin mukautetun visualisoinnin ja data -analyysin avulla. Swift kokoaa ohjelmiston nopeammin, auttaa toimittamaan nopeampia sovelluksia ja luo vielä pienempiä binääritiedostoja. Testisarjat valmistuvat monta kertaa nopeammin, tiimin kanssa työskentely on yksinkertaisempaa ja turvallisempaa ja paljon muuta.

Xcode 10 sisältää Swift 4.2: n, joka kokoaa ohjelmistosi nopeammin, auttaa toimittamaan nopeampia sovelluksia ja luo vielä pienempiä binääritiedostoja. Verrattuna Swift 4.0: een, uusin Swift -kääntäjä voi rakentaa suuria sovelluksia yli kaksi kertaa nopeammin.* Yhdessä uuden uuden Xcode -koontijärjestelmän kanssa päivittäinen muokkaaminen, luominen ja testaaminen on paljon nopeampaa. Xcode ja Swift on optimoitu uusimmalle moniytimiselle Mac-laitteistolle, ja ne muodostavat salamannopean kehitysalustan.

Vaihe 2: Aloitetaan

Joten menemme Xcodeen ja luomme uuden projektin. Kun napsautamme uutta projektia, sovelluksemme on yhden näkymän sovellus. Niille, jotka eivät tiedä, yksi näkymäsovellus tarkoittaa, että sinun on aloitettava kaikki alusta ja että meillä on yksi näkymä, jonka voimme ohjelmoida.

Nimeä tuotteesi TutorialApp. Jos olet kokenut kehittäjä, joka julkaisee sovelluksia App Storessa, sinulla on todennäköisesti tiimi, mutta jos olet uusi ja sinulla ei ole julkaistuja sovelluksia, voit ohittaa tämän kentän. Organisaation nimeen voit kirjoittaa yrityksen nimen siltä varalta, että sinulla on sellainen. Minun tapauksessani pidän vain MacBook Pron. Tämän jälkeen organisaatiotunnistetta pidetään projektisi yksilöivänä tunnisteena, joten voit kirjoittaa mitä haluat. Kieli tulee varmasti olemaan nopea.

Joten paina seuraava ja tallennetaan projekti työpöydälle, jotta sitä on helppo käyttää.

Uusi projekti koostuu kolmesta tiedostosta, AppDelegate.swift, ViewController.swift ja tämän opetusohjelman tähti: Main.storyboard. Kosketa Yleiset projektiasetukset -kohdassa Käyttöönottotiedot> Laitesuunta Laitteet -asetukseksi iPhone. Koska tämä on vain pystysuuntainen sovellus, poista valinta Maisema vasemmalle ja Vaaka oikealle. Avaa Main.storyboard projektinavigaattorissa nähdäksesi sen Interface Buildereditorissa:

Emme aio tehdä muutoksia kokoonpanoon ja siirrymme suoraan kuvakäsikirjoitukseen. Koska teimme yhden näkymän sovelluksen, loimme yksinkertaisen yhden tyhjän näkymän. Tämä on asia, jonka parissa meidän on työskenneltävä.

Vaihe 3: Työskentely käyttöliittymässä

Näkymäohjaimen virallinen kuvakäsikirjoituksen terminologia on”kohtaus”, mutta voit käyttää termejä keskenään. Kohtaus edustaa kuvakäsikirjoituksen näkymän ohjainta.

Tässä näet yhden näkymäohjaimen, joka sisältää tyhjän näkymän. Näkymän ohjaimeen vasemmalta osoittava nuoli osoittaa, että se on ensimmäinen kuvakäsikirjoituksessa näytettävä näkymän ohjain. Asettelu suunnitellaan kuvakäsikirjoitusohjelmassa vetämällä säätimet objektikirjastosta (katso oikea yläkulma) näkymän ohjaimeen.

Saadaksesi käsityksen kuvakäsikirjoitusohjelman toiminnasta, vedä joitain objektikirjaston säätimiä tyhjään näkymän ohjaimeen, kuten videossa näkyy.

Kun vedät säätimiä sisään, niiden pitäisi näkyä asiakirjan ääriviivoissa vasemmalla.

Voit luoda haluamasi käyttöliittymän. Minun tapauksessani käytin sitä, jonka näet kuvassa.

Vaihe 4: Kehitä toisen näkymän ohjain ja aloita jaksot (siirtymät)

Joten kun sovelluksessani käyttäjä painaa "Rekisteröi uusi tili" -painiketta, haluan, että hänet ohjataan rekisteritilin sivulle. Joten tätä tarkoitusta varten jokainen sivu on uusi kohtaus, uusi näyttö. Tästä syystä meidän on luotava toinen näkymäohjain, joka löytyy objektikirjastosta.

Kirjoita näkymäohjain ja aseta se alkuperäisen näkymän ohjaimen viereen. Tämä kohtaus vastaa rekisterinäkymän ohjaimesta. Sivulle uudelleenohjaus voidaan tehdä kahdella tavalla:

1. voimme tehdä sen manuaalisesti, kun muodostamme toimintoyhteyden painikkeesta toiseen näkymän ohjaimeen
2. voimme tehdä sen ohjelmoidusti

Päätin tehdä sen käsin. Se on yksinkertaista näin:

1. Napsauta painiketta hiiren vasemmalla painikkeella (minun tapauksessani rekisteröi uusi tili)
2. Pidä komento painettuna ja hiiren vasen napsautus vetääksesi sen rekisterin ohjauspaikkaan.
3. Vapauta se siellä ja valitse "Esitä modaalisesti"

Vaihe 5: Luo ohjelmointiluokka rekisteröintiprosessia varten

Joten nyt haluamme luoda uudelle kohtaukselle omistetun koodausluokan.

Tätä varten sinun on suoritettava seuraavat vaiheet:

• napsauta projektikansioasi hiiren kakkospainikkeella
• napsauta uutta tiedostoa nimeltä kaakaon kosketusluokka
• luokassa kirjoita: RegisterVC
• HYVIN TÄRKEÄ! Varmista, että alaluokan on oltava tyyppiä UIViewController
• kielen on oltava nopeaa.
• Napsauta seuraavaksi ja tallenna kaakaoluokka projektisi pääjuuriin.
• Napsauta pääkuvakäsikirjoitusta ja siirry uuteen näkymän ohjaimeen
• napsauta sen yläpuolella olevaa keltaista painiketta
• siirry oikealle luokkatarkastajalle ja tee viittaus rekisterivakuutukseen (Costum -luokka, luokka = RegisterVC

Vaihe 6: Luo sivun vaakasuuntainen pyyhkäisy

IOS: ssa vieritysnäkymiä käytetään katsomaan sisältöä, joka ei mahdu kokonaan näytölle. Vieritysnäkymillä on kaksi päätarkoitusta:

Jos haluat antaa käyttäjien vetää näytettävän sisällön aluetta, antaa käyttäjien suurentaa tai loitontaa näytettyä sisältöä nipistämällä eleitä. IOS -sovelluksissa käytetty yleinen ohjaus - UITableView - on UIScrollView -alaluokka ja tarjoaa loistavan tavan tarkastella näyttöä suurempaa sisältöä.

Mihin alisivuja käytetään vaakasuorassa pyyhkäisyssä?

Jos luon kuusi eri sivua, se tarkoittaa, että minun on luotava oma luokka kullekin niistä, eikä ole niin kätevää siirtää tietoja luokalta toiselle. Kun esimerkiksi kirjoitan sähköpostini ja napsautan seuraavaksi, jos minulla on eri näkymäohjain, poistun View Controllerin ensimmäiseltä sivulta ja sitten näytetään toinen. Tässä tapauksessa ensimmäisen näkymäohjaimen tiedot on siirrettävä seuraavalle ja sitten kolmannelle näkymän ohjaimelle jne. Kun minulla on kaikki tarvitsemani näkymäohjaimet, minun on kerättävä kaikki tiedot kaikista sivut ja lähetä ne palvelimelle. Tämä olisi siis todella monimutkaista.

Siirryttäessä tämän näkymäohjaimen luomiseen minulla oli tapauksessani 5 sivua, jotka halusin luoda:

1. Sähköposti
2. Koko nimi
3. Salasana
4. Syntymäaika
5. Sukupuoli

Tämä tarkoittaa, että luomamme näkymäohjaimen on oltava viisi kertaa suurempi kuin aiemmin tekemämme.

Valitse näkymän ohjain ja siirry oikeassa yläkulmassa olevaan viivainkuvakkeeseen ja muokkaa Simuloitu koko. Voit valita vapaamuotoisen leveyden ja korkeuden säätämiseksi. IPhonelle 8 sopivan näytön oletusleveys on 375, joten jos kerron 375*5 = 1875. Ja tässä, sinulla on laajennettu näkymäohjain.

Samoin noudatat samaa prosessia kaikille eri puhelimille ja näytön koolle.

Jotta vieritysnäkymä toimisi, tarvitsemme vierityskuvan objektin. Scroll View tarjoaa mekanismin näyttää sovelluksen ikkunan kokoa suurempi sisältö. Napsauta tätä objektia, vedä sitä ja aseta se näkymän ohjaimen vasempaan yläkulmaan ja varmista, että X ja Y ovat nolla -asennossa ja venytys on näkymäohjaimesi mukainen.

Scroll View mahdollistaa vain vierityksen, ei mitään muuta. Sitten meidän on lisättävä sisältönäkymä, joka tallentaa muita näkymiä. Löydät UIView - se edustaa suorakulmaista aluetta, johon se piirtää ja vastaanottaa tapahtumia - objektikirjastosta. Napsauta ja vedä se vieritysnäkymään ja venytä sitä uudelleen vastaavasti.

Valitse vieritysnäkymä vasemmasta paneelista ja kutsumme kohdistusta 0, 0, 0, 0 ja lisäämme rajoituksia. Tee sama sisältönäkymässä.

Vaihe 7: Kehitä käyttöliittymä vaakasuoran pyyhkäisyn alisivuille

Tässä vaiheessa sinun on luotava alisivujesi käyttöliittymä. Päätin tehdä prototyypin Sketchissä ja rakentaa sen sitten Xcodeen.

Vaihe 8: Toteuta suunnittelu Xcodessa

Seuraava askel on toteuttaa tämä malli Xcodessa. Tätä varten sinun on luotava pistorasiayhteydet kaikille alisivuille ja luotava toinen "emänäkymään" eli yksi ulostuloliitäntä koko näkymäohjaimelle.

Kuvakäsikirjoituksen elementit on linkitetty lähdekoodiin. On tärkeää ymmärtää kuvakäsikirjoituksen suhde kirjoittamaasi koodiin.

Kuvakäsikirjoituksessa kohtaus edustaa yhtä sisältönäyttöä ja tyypillisesti yhtä katseluohjainta. Näkymän ohjaimet toteuttavat sovelluksesi käyttäytymisen ja hallinnoivat yksittäistä sisältönäkymää alinäkymien hierarkian avulla. Ne koordinoivat tiedonkulkua sovelluksen tietomallin, joka sisältää sovelluksen tiedot, ja näkymien välillä, jotka sisältävät tietoja, hallitsevat niiden sisältönäkymien elinkaarta, käsittelevät suunnanmuutoksia, kun laitetta käännetään, määrittävät navigoinnin sovelluksessasi ja toteuttaa käyttäytyminen vastaamaan käyttäjän syötteeseen. Kaikki iOS: n näkymänohjaimen objektit ovat tyyppiä UIViewController tai jokin sen alaluokista.

Voit määrittää näkymäohjaimien käyttäytymisen koodissa luomalla ja ottamalla käyttöön mukautettuja näkymäohjaimen alaluokkia. Voit sitten luoda yhteyden näiden luokkien ja kuvakäsikirjoituksen välille saadaksesi koodissa määrittämäsi käyttäytymisen ja kuvakäsikirjoituksesi määrittämän käyttöliittymän.

Xcode loi jo yhden tällaisen luokan, jota katsoit aiemmin, ViewController.swift, ja yhdisti sen kohtaukseen, jota käsittelet kuvakäsikirjoituksessa. Kun lisäät lisää kohtauksia, muodostat tämän yhteyden itse identiteettitarkastajassa. Identiteetintarkastajan avulla voit muokata kuvakäsikirjoituksesi objektin ominaisuuksia, jotka liittyvät kohteen identiteettiin, kuten mihin luokkaan kohde kuuluu.

Luo Outlets for UI Elements Outlets tarjoaa tavan viitata käyttöliittymäobjekteihin-kuvakäsikirjoitukseen lisäämiisi objekteihin-lähdekooditiedostoista. Jos haluat luoda pistorasian, vedä Control-vetämällä kuvakäsikirjoituksesi tietystä objektista näkymän ohjaintiedostoon. Tämä toiminto luo ominaisuuden näkymäohjaintiedostosi objektille, jonka avulla voit käyttää objektia ja käsitellä sitä koodista ajon aikana

1. Avaa kuvakäsikirjoitus, Main.storyboard.
2. Avaa Assistant -editori napsauttamalla Assistant -painiketta Xcode -työkalupalkissa lähellä Xcoden oikeaa yläkulmaa. Jos haluat enemmän tilaa työskentelyyn, kutista projektinavigaattori ja apuohjelma -alue napsauttamalla Xcode -työkalurivin Navigator and Utilities -painikkeita.
3. Voit myös tiivistää ääriviivanäkymän.

Muuta editorin valintarivillä, joka näkyy avustajaeditorin yläosassa, avustajaeditori esikatselusta automaattiseksi> ViewController.swift.

Napsauta alisivua ja vedä haluamaasi luokkaan koodissa.

Vaihe 9: Integroitujen eleiden integrointi

Pyyhkäise ele

Pyyhkäisyliike tapahtuu, kun käyttäjä liikuttaa yhtä tai useampaa sormea näytön poikki tietyssä vaaka- tai pystysuunnassa. Käytä UISwipeGestureRecognizer -luokkaa pyyhkäisyeleiden havaitsemiseen.

Pyyhkäisyeleen toteuttaminen

Vaihe 1: Lisää pyyhkäisyele (t) viewDidLoad () -menetelmään

ohita funktionäkymäDidLoad () {super.viewDidLoad ()

anna swipeLeft = UISwipeGestureRecognizer (kohde: itse, toiminta: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

anna swipeRight = UISwipeGestureRecognizer (kohde: itse, toiminta: #selector (handleGesture)) swipeRight.direction =.oikea self.view.addGestureRecognizer (swipeRight)

anna swipeUp = UISwipeGestureRecognizer (kohde: itse, toiminta: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

anna swipeDown = UISwipeGestureRecognizer (kohde: itse, toiminta: #selector (handleGesture)) swipeDown.direction =. down self.view.addGestureRecognizer (swipeDown)}

Vaihe 2: Tarkista eleiden tunnistus kahvassaGesture () -menetelmässä func handleGesture (ele: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} else if gesture.direction == UISecognDiz vasen {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Pyyhkäise alas")}}

Sovelluksessani halusin käyttää swipeRight -sovellusta, mutta vapaasti voisin käyttää sovellustasi sopivampaa.

Otetaan tämä nyt käyttöön koodissamme.

Siirrymme aiemmin luomallemme registerVC.swiftille ja kirjoitamme koodin, kuten kuvissa näkyy.

KOODIN SELITYS

anna current_x saada ScrollView'n nykyinen sijainti (vaaka -asento) anna screen_width saada näytön leveys, vähentämällä tämä koko anna new_x vierityskuvan nykyisestä sijainnista, i comeback näytön leveyden mukaan, jos current_x> 0, ellei se ole yli 0 - 0 on ensimmäinen sivu.

Ja olemme valmiita!

Hyvää työtä kaverit!