Working with Table View Controllers in Swift

Written by Reinder de Vries on August 3 2020 In App Development, iOS

Taulukkonäkymäohjaimien kanssa tässä opetusohjelmassa näytän sinulle vaihe vaiheelta, miten taulukkonäkymäohjaimet toimivat ja miten voit käyttää niitä. Mennään UITableViewController koko kirjo, sukeltamalla Oliokeskeiseen ohjelmointiin, delegointiin ja pöytänäkymien kulissien takaisiin mekanismeihin.

taulunäkymäohjain näyttää jäsenneltyä, toistettavaa tietoa pystysuorassa luettelossa. Voit käyttää UITableViewController – luokkaa iOS-sovelluksessasi rakentaaksesi taulunäkymäohjaimen.

työskentely taulunäkymäohjaimen kanssa tarkoittaa myös muutamien tärkeiden iOS-kehityskonseptien, kuten aliluokituksen, delegaation suunnittelukuvion ja näkymien uudelleenkäytön parissa työskentelyä.

se on tärkeää ammattimaisille ja käytännöllisille iOS-kehittäjille (sinulle!) master työskentely taulukko näkymä ohjaimet. Kun olet tottunut työstämään tällaista monitahoista KÄYTTÖLIITTYMÄKOMPONENTTIA, kuten UITableViewController, muutkin iOS: n kehityksen monimutkaisemmat näkökohdat alkavat olla järkeviä.

valmis? Sukelletaan!

1. miten Taulukkonäkymäohjain toimii
2. yksinkertaisen taulukon näkymäohjaimen asettaminen
3. taulukon näkymäohjaimen tietolähteen koodaaminen
4. tarjoamalla soluja taulukon Näkymäohjaimelle
5. vastaaminen käyttäjän vuorovaikutukseen
6. lisäluku

miten taulukko View Controller toimii

jos olet käyttänyt iOS-sovellusta ennen, Olet käyttänyt Table View-ohjaimia aiemmin. Niitä käytetään usein iOS-sovelluksissa!

tässä esimerkki taulunäkymän ohjaimesta:

taulukkonäkymäohjaimessa on tyypillisesti nämä näkyvät komponentit:

• taulunäkymä, joka on näytöllä näkyvä käyttöliittymäkomponentti eli näkymä. Taulukkonäkymä on UITableView luokan ilmentymä, joka on UIScrollView: n alaluokka.
• taulukkonäkymän solut, jotka ovat taulukkonäkymässä olevia toistettavia rivejä eli näkymiä. Taulukkonäkymän solu on UITableViewCell luokan ilmentymä, ja kyseinen luokka on usein aliluokitettu, jotta voidaan luoda mukautettuja taulunäkymän soluja.

taulunäkymän ohjain perustuu myös näiden komponenttien käyttöön, kulissien takana:

• pöytänäkymän delegaatti, joka vastaa taulukkonäkymän asettelun hallinnasta ja käyttäjän vuorovaikutustapahtumiin vastaamisesta. Taulukkonäkymän delegaatti on UITableViewDelegate – luokan instanssi.
• taulukkonäkymän tietolähde, joka vastaa tietojen hallinnasta taulukkonäkymässä, mukaan lukien taulukkonäkymän solut ja osiot. Tietolähde on UITableViewDataSource – luokan instanssi.

mielenkiintoisin osa pöytänäkymäohjaimien kanssa työskentelyä on itse pöytänäkymäohjain! Miten niin?

Tunnetko Model-View-ohjaimen arkkitehtuurin? Kuten kohti malli-näkymä-ohjain arkkitehtuuri, taulukon näkymä ja taulukon näkymä solu ovat näkymiä, ja taulukon näkymä ohjain on ohjain.

Views vastaa tietojen näyttämisestä käyttäjälle näkyvästi käyttöliittymällä (UI). Rekisterinpitäjät vastaavat logiikan toteuttamisesta, tietojen hallinnasta ja päätösten tekemisestä. Sanoi toisin: et voi nähdä ohjain, mutta se on siellä, hallita mitä näet kautta näkymiä.

kun käytät sovelluksessasi taulunäkymäohjainta, aliluokitat UITableViewController – luokan. Itse UITableViewController – luokka on Uiviewcontrollerin alaluokka.

tässä esimerkkitaulun näkymäohjaimen luokkahierarkia, joka näyttää yhteystiedot:

• esiintymä ContactsTableViewController
  • alaluokat UITableViewController
    • alaluokat UIViewController

olio-ohjelmoinnin (OOP) periaatteiden mukaisesti, kun Luokka RaceCar alaluokka Vehicle perii kyseisen superluokan ominaisuudet ja toiminnot, kuten maxSpeed ja drive().

Vehicle luokkaa kutsutaan tällöin RaceCarsuperluokaksi. Tätä periaatetta kutsutaan perinnöksi.

hämmentävää? Se voi olla! Ajattele sitä näin: jotta taulunäkymäohjain toimisi hyvin, sinun on perittävä joukko koodia, joten sinun ei tarvitse kirjoittaa kaikkea koodia itse. Luokkahierarkia, ja OOP, on olemassa jäsentää, että perintö.

taulukkonäkymien kanssa voi työskennellä ilman taulukkonäkymäohjainta. Lisää vain UITableView näkymäohjaimeen, tarjoa sille toteutuksia taulunäkymän delegointi-ja tietolähdetoiminnoista, ja olet valmis.

Luokka UITableViewController sisältää oletustoteutukset näistä taulunäkymän delegointi-ja taulunäkymän tietolähdetoiminnoista. Se on olennainen osa työskentelyä pöydän näkymäohjaimen kanssa!

kuten tämän opetusohjelman seuraavissa luvuissa näkyy, ohitamme nämä toiminnot omilla toteutuksillamme. Voimme muokata taulukon näkymä ohjain tekemällä, että.

yksinkertaisen Taulunäkymäohjaimen perustaminen

Okei, laitetaan kaikki tämä käytäntöön. Tässä osiossa, aiomme rakentaa yksinkertainen taulukko näkymä ohjain. Toteutat tarvittavat toiminnot, jotta se toimisi.selitän, miten ne toimivat. Liikettä!

Xcodessa voi käyttää 3 erilaista lähestymistapaa UIs: n kanssa työskentelyyn:

1. näkymien luominen ohjelmallisesti, eli niiden koodaaminen käsin
2. UIs: n määrittäminen Interface Builderissa ja niiden yhdistäminen Swift-koodiin XIBs: n kautta
3. UIS: n määrittäminen ja niiden siirtymät Interface Builderissa käyttäen kuvakäsikirjoituksia
4. (teknisesti Swiftuita voi käyttää myös, mutta taulukkonäkymäohjaimien osalta se ei kuulu tämän opetusohjelman piiriin.)

on työlästä ja tuottamatonta koodata UIs käsin. Jos et ole varovainen Kuvakäsikirjoitusten kanssa, he päätyvät piilottamaan monimutkaisuutta kehittäjältä. Aiomme työskennellä kuvakäsikirjoituksia, samalla selvittää, miten ne toimivat kulissien takana.

tässä mitä aiot tehdä:

luo ensin Uusi Xcode-projekti tiedoston → uuden → projektin kautta…. Varmista, että valitset Sovellusmallin ja valitset kuvakäsikirjoituksen käyttöliittymälle ja UIKit App delegaatin elinkaarelle.

ota sitten nämä askeleet:

1. Napsauta projektia hiiren kakkospainikkeella Project Navigatorissa ja valitse uusi tiedosto…
2. valitse Cocoa Touch Class template (iOS)
3. valitse UITableViewController alaluokalle
4. nimi luokka ContactsTableViewController
5. älä rasti myös luo XIB-tiedosto
6. lopulta, valitse Seuraava ja tallenna tiedosto muiden Swift-tiedostojen kanssa

lopuksi, tee tämä:

1. Siirry Main.storyboard ja poista nykyinen näkymäohjain kohtaus
2. Lisää uusi Taulunäkymäohjain kuvakäsikirjoitukseen kirjaston kautta
3. kun taulunäkymäohjain on valittu, siirry attribuuttien tarkastajaan ja rasti Is: n alkuperäisen näkymäohjaimen valintaruutuun
4. lopuksi Siirry Identity Inspector-ruutuun ja aseta Luokka ContactsTableViewController

nyt riitti! Sinulla on nyt taulunäkymäohjain projektin kuvakäsikirjoituksen sisällä, ja olet liittänyt sen ContactsTableViewController Swift-luokkaan.

kuten arvata saattaa, ContactsTableViewController luokkasi on alaluokka UITableViewController. Sen näkee Swift-tiedostosta, yläluokasta, luokkajulistuksesta.

class ContactsTableViewController: UITableViewController { ···

tämä syntaksi tarkoittaa: Luokka ContactsTableViewController on alaluokka UITableViewController.

kun napsautat ”Uitableviewcontrolleria” hiiren kakkospainikkeella Optio-näppäintä painaessasi, näet luokkailmoituksesta, että UITableViewController on UIViewController: n alaluokka ja vastaa UITableViewDelegate ja UITableViewDataSource protokollia.

se on taulukon näkymäohjaimen voima! Se ei vain anna meille yksittäisiä komponentteja tehdä taulukon näkymä, ohjain tarjoaa myös oletustoteutuksen. Siksi aliluokitamme UITableViewController sen sijaan, että loisimme tyhjän näkymäohjaimen, jossa on taulunäkymä.

tässä vaiheessa voit suorittaa sovelluksesi nimellä Command-R tai Play-painikkeella, ja näet tyhjän pöydän näkymäohjaimen ilmestyvän näytölle.

miksi muuten? Emme ole koodanneet vielä mitään! Tämä johtuu siitä, että taulunäkymän ohjaimessa on oletustoteutus, joka näyttää vain tyhjiä soluja näytöllä. Siistiä!

koodaus taulukon näkymäohjaimen tietolähde

nyt kun taulunäkymäohjain on perustettu, herätetään se eloon! Tässä luvussa keskitymme eri toimintoihin, jotka sinun on toteutettava, jotta taulunäkymäohjain toimii.

kuten aiemmin selitettiin, nämä toiminnot kuuluvat joko taulukkonäkymän valvojan delegoimaan tai taulukkonäkymän valvojan tietolähteeseen. Molemmat protokollat käyttävät delegointia taulukkonäkymän muokkaamiseen.

UITableViewDataSource tärkeimmät funktiot ovat:

• numberOfSections(in:)
• tableView(_:numberOfRowsInSection:)
• tableView(_:cellForRowAt:)

muita UITableViewDelegate: lle merkityksellisiä funktioita ovat:

• tableView(_:didSelectRowAt:)
• tableView(_:willDisplay:for:)

löydät lisää toimintoja Apple Developer Documentation for Uitableviewdelegate ja UITableViewDataSource.

Yhteystietojen lisääminen

aloitat lisäämällä taulukkonäkymän ohjaimen yhteystietotiedot. Lisää ContactsTableViewController – luokkaan seuraava ominaisuus:

let contacts:] = , , , , , , , , , , , , , , , , ]

sehän on rolodex, jonka me kaikki haluaisimme. Näin se toimii:

• let contacts julistaa vakion, jonka nimi on contacts. Olet lisännyt sen ominaisuutena luokkaan, joten jokaisella luokan instanssilla on pääsy tähän vakioon koko luokan koodiin.
• contacts tyyppi on ], joka on merkkijonojen rivistö. Olet pohjimmiltaan luoda array, joista kohteet ovat rivejä. (Muuttujan nimi ja sen tyyppi erotetaan kaksoispisteellä :)
• = – koodi antaa contacts – kirjaimelle joukon, joka on täytetty muutamien miljardöörien nimillä ja puhelinnumeroilla.

myöhemmin voidaan käyttää joukon kappalemäärää, jossa on contacts.count. Ja voimme saada yksittäisiä nimiä ja puhelinnumeroita contacts ja contacts käyttäen alaindeksin syntaksia.

Taulunäkymän Soluluokan rekisteröinti

ennen kuin voit käyttää soluja taulunäkymän ohjaimessa, sinun on rekisteröitävä ne taulukkonäkymään. Voit tehdä sen kahdella tavalla:

1. antamalla taulukon näkymän soluluokan ja tunnisteen
2. antamalla taulukon näkymän solun XIB ja tunnisteen

kun käytät mukautettua taulukon näkymän solua, haluat todennäköisesti rekisteröidä XIB: N tätä varten. Kun käytät oletustaulunäkymän soluja tai jotain muuta ohjelmallista solua, rekisteröit luokan. Käytämme luokkaa, toistaiseksi!

lisätään viewDidLoad() funktioon seuraava koodi:

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellIdentifier")

lisää se super.viewDidLoad() – rivin alle. Kuten luultavasti tiedät, viewDidLoad() – toiminto on osa näkymäohjaimen elinkaarta ja kuuluu UIViewController – luokkaan.

ohitat viewDidLoad()-toiminnon reagoidaksesi tähän tapahtumaan näkymäohjaimen elinkaaren aikana, joten voit määrittää näkymän sen lataamisen jälkeen. Meidän tapauksessamme, käytämme toimintoa rekisteröidä taulukon näkymä solu.

kun rekisteröit taulunäkymän, sinun on annettava myös tunniste. Tämä on yksinkertaisesti liittää solun Luokka nimeen, jota voit käyttää myöhemmin, kun dequeuing solun tableView(_:cellForRowAt:).

Are you still with me? Jatketaan!

Implementing”numberOfSections(in:)”

the first delegate function we ’ re going to implement is numberOfSections(in:).

taulukkonäkymässä voi olla useita osioita tai ryhmiä. Jokaisella ryhmällä on otsake, joka kelluu pystysuoran solurivin päällä. Kontaktisovelluksessa kontakteja voisi ryhmitellä aakkosjärjestyksessä. Tämä tapahtuu itse asiassa iPhonen Yhteystietosovelluksessa, jossa yhteystiedot on ryhmitelty A-Z.

rakentamassamme sovelluksessa on vain yksi osio. Lisää luokkaan seuraava funktio:

override func numberOfSections(in tableView: UITableView) -> Int{ return 1}

yksinkertaista, eikö? Funktio palauttaa 1, kun sitä kutsutaan.

Implementing ”tableView(_:numberOfRowsInSection:)”

a similar function is tableView(_:numberOfRowsInSection:). Sen sijaan, että se ilmoittaisi osioiden määrän, se kertoo osan rivien määrän. Koska taulukkonäkymässä solut ovat pystysuorassa luettelossa, jokainen solu vastaa taulukkonäkymässä olevaa riviä.

rakentamassamme sovelluksessa on vain yksi osio, ja sen yhden osan kappalemäärä on sama kuin contacts joukon kappalemäärä. Eli siis contacts.count!

lisätään luokkaan seuraava funktio:

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{ return contacts.count}

Näetkö, miten se toimii? Me yksinkertaisesti palaamme contacts.count. Jos contacts: ään lisäisi toisen nimen ja puhelinnumeron, se näkyisi nätisti myös taulukkonäkymässä.

rivien ja osioiden ymmärtäminen

Yhteystietosovelluksemme on yksiulotteinen, se näyttää vain yhden nimilistan ja puhelinnumerot, eikä käytä ryhmiä. Mutta entä jos sinulla on ryhmitelty taulukko näkymä?

useimmissa tapauksissa tietolähteesi, kuten contacts array, olisi myös moniulotteinen. Voit järjestää ryhmiä ensimmäisellä tasolla, ja yksittäisiä kohteita toisella tasolla, ”alla” ryhmiä.

- Countries - A - Afghanistan - Albania - ... - B - Bahamas - Bahrain - ... - C - Cambodia - Cameroon - ...

ryhmien lukumäärä on yhtä suuri kuin countries.count, ja maiden lukumäärä yhdessä ryhmässä on yhtä suuri kuin countries.count, missä x on sektioindeksi. Kyseinen pääluokan indeksi ilmoitetaan muuttujana tableView(_:numberOfRowsInSection:).

tarjoten soluja Taulunäkymän ohjaimelle

me pääsemme sinne! Siirrytään taulunäkymäohjaimen tärkeimpään tehtävään: tableView(_:cellForRowAt:).

toteutamme toiminnon ennen yksityiskohtiin sukeltamista, mutta sinun on ymmärrettävä siitä pari asiaa.:

• kun sitä kutsutaan
• mikä indeksipolku on
• miten se käyttää soluja uudelleen

ensin, lisätään seuraava funktio ContactsTableViewController luokkaan:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{}

näin se toimii:

• funktio ohittaa sen superluokan toteutuksen UITableViewController. Tiedäthän jo, miten se toimii? Ohitamme oletustoteutuksen ja korvaamme omamme. Tämä johtuu siitä, että UITableViewController on jo toteuttanut taulukkonäkymän delegaatin ja tietolähteen meille.
• kuten ennenkin, funktiolla on yksi parametri tableView, jonka avulla voidaan tunnistaa Taulukkonäkymä, johon funktiota kutsutaan.
• toinen parametri on indexPath, argumenttimerkinnällä cellForRowAt. Indeksipolulla yksilöidään solun row ja section indeksit. Lisää siitä myöhemmin.
• funktion palautustyyppi on UITableViewCell. Mielenkiintoista. Tätä toimintoa kutsutaan taulukon näkymä ohjain, joka kerta Meidän täytyy tarjota taulukon näkymä solu!

kun selaat tämän sovelluksen yhteystietoja, aina kun solu on näytettävä näytöllä, funktiota tableView(_:cellForRowAt:) kutsutaan. Joka kerta! Todistan sen hetken kuluttua.

seuraavaksi kirjoitetaan funktion kappale. Lisää funktion sisään seuraava koodi:

let cell = tableView.dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath)print("\(#function) --- section = \(indexPath.section), row = \(indexPath.row)")cell.textLabel?.text = contactsreturn cell

näin tapahtuu:

• ensin poistamme solun, jolla on tunniste. Se on sama tunniste, jota käytimme aiemmin, kun rekisteröimme solun. Siten taulunäkymä tietää, millaisen solun haluamme. Dequeued-solulle on annettu cell vakio. Nyt meillä on taulukon näkymä solu työskennellä. Lisää dequeuing myöhemmin.
• sitten tulostamme konsolille joitakin tietoja. Tämä on, jotta voimme nähdä, kun tätä toimintoa kutsutaan, kun sovellus toimii.
• tämän jälkeen annamme yhteydenottajan nimen tämän taulukon näkymän solun tekstietikettiin. contacts sisältää kontaktin nimen arvon, johon päästään käyttämällä indexPath.row. Jokaisella UITableViewCell esiintymällä on UILabel ominaisuus textLabel, ja jokaisella sen tyyppisellä merkinnällä on ominaisuus text. Asetat sen avulla tekstin etikettiin.

ei hätää, käydään jokainen näistä asioista tarkemmin läpi. Kokeile ensin, osaatko käyttää sovellustasi. Näetkö yhteystietoja? Näetkö vianetsintätulosteen konsolissa? Kokeile vierittää sovellusta!

milloin” tableView(_:cellForRowAt:) ” kutsutaan?

jos suoritit Yhteystietosovelluksen ja pelasit vierittämällä ylös ja alas, et voi olla huomaamatta, että joka kerta vieritettäessä debug-tuloste näkyy konsolissa.

joka kerta, kun solu, joka ei ollut aiemmin ruudulla, ilmestyy, funktio tableView(_:cellForRowAt:) kutsutaan, ja konsoliin ilmestyy uusi rivi.

joten milloin tableView(_:cellForRowAt:) kutsutaan? Joka kerta taulukon näkymä solu on näytettävä ruudulla!

taulunäkymän ohjain on määrittänyt, että tarvitaan solu, joten se kutsuu tableView(_:cellForRowAt:). Tämän toiminnon toteutus dequeues a cell, changes it, and provides it back to the table view controller. Taulunäkymäohjain ja UIKit-kehys tekevät sen sitten graafisesti näytölle.

mikä on Indeksipolku?

joka kerta, kun taulunäkymän ohjain tarvitsee solua tableView(_:cellForRowAt:), se tarjoaa indeksipolun funktion argumentiksi. Funktion rungon sisällä voit käyttää parametria indexPath tietääksesi tarkalleen, minkä solun taulunäkymän ohjain tarvitsee.

indeksipolku on kuin osoite tai koordinaatti ruudukossa. Tyypillisessä kuvaajassa on X-akseli ja Y-akseli, joten koordinaattia voisi ilmaista kyseisessä kuvaajassa muodossa x, y, kuten 0, 1 ja 42, 3. Vastaavasti taulukkolaskennassa on rivejä ja sarakkeita, joissa on indeksejä.

taulukkonäkymässä käytetään osioita ja rivejä. Kuten edellä mainittiin, voit käyttää osia ryhmitellä soluja yhteen. Sovelluksessamme on vain yksi osio, ja siinä on contacts.count riviä. Taulukkonäkymän rivit kulkevat ylhäältä alas.

sanoi toisin: taulukkonäkymän osat ja rivit ovat sitä, mitä sarakkeet ja rivit ovat taulukkolaskentaan. Indeksipolku määrittää sijainnin taulukkonäkymässä rivin ja osion avulla.

rivejä ja sektioita edustavat numerot, joita kutsutaan indekseiksi. Nämä indeksit alkavat nollasta, joten ensimmäisellä rivillä ja jaksossa on indeksiluku 0.

kun katsoo edellistä kuvakaappausta taaksepäin, se on paljon järkevämpää. Ensimmäisen solun indeksitie on 0, 0, toisen solun 0, 1 jatkuen viimeiseen näkyvään soluun asti indeksitie 0, 11.

taulukkonäkymän Uudelleenkäyttömekanismi

huomionarvoisinta taulukkonäkymässä on sen mekanismi solujen uudelleenkäyttöön. Se on yksinkertaista.

• joka kerta, kun taulunäkymäohjaimen on näytettävä solu näytöllä, funktio tableView(_:cellForRowAt:) kutsutaan, kuten olemme aiemmin keskustelleet.
• sen sijaan, että se loisi uuden taulunäkymän joka kerta, kun funktiota kutsutaan, se poimii aiemmin luodun solun jonosta.
• solu nollautuu tyhjään tilaan, tyhjentää ulkonäkönsä ja solu räätälöidään uudelleen tableView(_:cellForRowAt:).
• aina kun solu vieritetään ruudun ulkopuolella, se ei tuhoudu. Se on lisätty jonoon odottamaan uudelleenkäyttöä.

aika nokkelaa, vai mitä? Sen sijaan, että luodaan ja poistetaan soluja, voit yksinkertaisesti käyttää niitä uudelleen. Mutta miksi?

solujen uusiokäyttö on paljon vähemmän muistia vaativaa. Taulunäkymän ohjain kirjoittaisi jatkuvasti muistiin soluja luotaessa ja poistettaessa. Muistin hallinta olisi myös intensiivisempää. Kun soluja käytetään uudelleen, muistia käytetään tehokkaammin, ja muistioperaatioita tarvitaan vähemmän.

itt: llä on myös hieman vähemmän prosessoritehoa käyttää soluja uudelleen niiden luomisen ja poistamisen sijaan, koska uudelleenkäyttöön liittyy yksinkertaisesti vähemmän toimintoja kuin solujen luomiseen ja poistamiseen.

kun selaat nopeasti taulukkonäkymää, et näe uusia soluja – näet samat solut yhä uudelleen, uutta tietoa.

solun uudelleenkäyttöön liittyvä koodi on tämä:

let cell = tableView.dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath)

funktio dequeueReusableCell(withIdentifier:) yrittää dequeueta solun. Kun jonossa ei ole soluja, se luo solun meille. Tunnistetta käytetään pitämään jokainen solutyyppi omassa jonossaan ja varmistamaan, että oikeaa luokkaa käytetään uusien solujen luomiseen.

vastaaminen käyttäjän vuorovaikutukseen

yksi asia puuttuu pöytänäkymäohjaimestamme: kyky soittaa ihmisille yhteystietoluettelossamme! Mutta ennen kuin teemme, let ’ s varmista, että voit myös nähdä yhteyshenkilön puhelinnumero taulukon view controller.

oletusarvo UITableViewCell luokalla on 4 erilaista tyyppiä, jotka on ilmaistu UITableViewCellStyle – arvojoukossa. Voit valita:

• .default – yksinkertainen näkymä yhdellä rivillä mustaa tekstiä
• .value1 – yksinkertainen näkymä, jossa yksi rivi mustaa tekstiä vasemmalla, ja pieni sininen etiketti oikealla (käytetään Asetukset-sovelluksessa)
• .value2 – yksinkertainen näkymä, jossa yksi rivi mustaa tekstiä oikealla, ja pieni sininen etiketti vasemmalla (käytetään Yhteystiedot-sovelluksessa)
• .subtitle – yksinkertainen näkymä, jossa on yksi rivi mustaa tekstiä, ja pienempi rivi harmaata tekstiä sen alla

useimmat kehittäjät käyttävät mukautettuja taulunäkymän soluja näinä päivinä, joten et näe näitä solutyyppejä kovin usein. Mutta he ovat siellä!

joudumme hieman muokkaamaan koodia tableView(_:cellForRowAt:). Korvaa funktion ensimmäinen rivi seuraavalla koodilla:

var cell = tableView.dequeueReusableCell(withIdentifier: "cellIdentifier")if cell == nil{ cell = UITableViewCell(style: .subtitle, reuseIdentifier: "cellIdentifier")}

jos katsoo tarkkaan, huomaa, että for: indexPath osa dequeueReusableCell(...) – puhelusta on poistettu. Sen sijaan, että funktio nyt palauttaa valinnainen. Kun se ei voi dequeue solua, funktio palauttaa nil.

sitten hyppäämme itse luomaan solun, jos se on nil. Se näkyy koodin toisessa osassa. Käytät ehdollista if lausetta tarkistaaksesi, onko cell yhtä suuri kuin nil, ja jos se on totta, luot solun käyttäen UITableViewCell(style:reuseIdentifier:) initializeria.

että initializer saa kaksi argumenttia, solutyylin .subtitle ja aiemmin käyttämämme tunnisteen.

tässä vaiheessa meillä on ongelma, koska cell on nyt vapaaehtoinen! Sen tyyppi on UITableViewCell?, mutta funktion palautustyyppi edellyttää, että palautamme instanssin, jossa ei ole valinnaista tyyppiä UITableViewCell.

onneksi tämä on yksi niistä tapauksista,joissa voimme turvallisesti käyttää pakkopurkausta vapaaehtoisen arvon avaamiseksi. Koodimme kirjoitustavan vuoksi on mahdotonta, että cell olisi nil konditionaalin ulkopuolella. Voit taata, että cell ei ole nil if lausunnon jälkeen.

varmista, että päivität funktion käyttääksesi pakkopurkua cellkohdalla. Lisää myös seuraava koodirivi alle cell!.textLabel ... asettaaksesi solun tekstityksen Näytä yhteyshenkilön puhelinnumero.

cell!.detailTextLabel?.text = contacts

koko funktio näyttää nyt tältä:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{ var cell = tableView.dequeueReusableCell(withIdentifier: "cellIdentifier") if cell == nil { cell = UITableViewCell(style: .subtitle, reuseIdentifier: "cellIdentifier") } print("\(#function) --- section = \(indexPath.section), row = \(indexPath.row)") cell!.textLabel?.text = contacts cell!.detailTextLabel?.text = contacts return cell!}

poista lopuksi seuraava rivi kohdasta viewDidLoad(). Se estää taulunäkymää alustamasta soluja väärällä tyypillä.

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellIdentifier")

Mighty fine! Suorita sovellus Command + R tai Play-painiketta, ja tarkista, jos se toimii. Näetkö nimiä ja puhelinnumeroita? Hyvä!

sitten, pièce-de-résistance, lisätään, että käyttäjän vuorovaikutusfunktio. Nyt kun olet oppinut koukerot pöydän näkymä ohjain, luulen, että tiedät jo, miten tämä seuraava toiminto toimii.

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath){ if let url = URL(string: "tel://" + contacts) { UIApplication.shared.open(url) }}

jälleen ohitamme funktion tableView(_:didSelectRowAt:) oletustoteutuksen. Tätä funktiota kutsutaan, kun käyttäjä napauttaa taulunäkymän solua, ja se kuuluu UITableViewDelegate – protokollaan. Kuten muutkin toiminnot, se tarjoaa indeksipolun solun, jota käytetään.

funktion rungossa luodaan yksinkertaisesti tel:// URL puhelinnumerosta. Me sitten kertoa sovelluksen avata, että URL, joka tehokkaasti kertoo iOS aloittaa puhelun tähän numeroon. Koodi on olemassa vain havainnollistamista varten. Huomaa, että tämä ei toimi iPhone Simulator, ja että numerot sovelluksessamme ovat väärennettyjä. (Silti, voit käyttää tätä koodia, jos teet todellinen yhteystiedot sovellus!)

voit lisätä funktioon seuraavan koodin, jos haluat tarkistaa, toimiiko se OK.

print("\(#function) --- Calling: \(contacts)")

Tämä tulostaa vianetsintäviestin, kun napautat taulunäkymän solua.

Jatkoluku

ja siinä kaikki! Tämä on ollut melkoinen matka, mutta nyt tiedät, miten taulunäkymän ohjain toimii.