arbeta med Table View Controllers i Swift

skriven av Reinder de Vries den 3 augusti 2020 i apputveckling, iOS

i den här handledningen visar jag dig steg för steg hur tabellvy controllers fungerar och hur du kan använda dem. Vi kommer att gå in i hela skalan av UITableViewController, genom att dyka in objektorienterad programmering, delegation och bakom kulisserna mekanismer tabellvyer.

en kontrollenhet för tabellvy visar strukturerad, repeterbar information i en vertikal lista. Du använder klassen UITableViewController i din iOS-app för att bygga en tabellvykontroll.

arbeta med en table view controller innebär också att arbeta med några viktiga iOS utvecklingskoncept, såsom subclassing, delegationen designmönster, och återanvända vyer.

det är viktigt för professionella och praktiska iOS utvecklare (din!) för att behärska arbetet med tabellvykontroller. När du har blivit van vid att arbeta med en sådan mångfacetterad UI-komponent, som UITableViewController, kommer andra mer komplexa aspekter av iOS-utvecklingen att börja vara meningsfulla också.

redo? Låt oss dyka in!

1. hur en tabell View Controller fungerar
2. ställa in en enkel tabell View Controller
3. kodning tabellen View Controller datakälla
4. tillhandahålla celler till tabellen View Controller
5. svara på användarinteraktion
6. Vidare läsning

hur en tabell View Controller View Controller fungerar

om du har använt någon iOS-App tidigare har du använt Table View controllers tidigare. De används så ofta i iOS-appar!

här är ett exempel på en tabell View controller:

en tabell View controller har vanligtvis dessa synliga komponenter:

• en tabellvy, som är komponenten användargränssnitt, eller vy, som visas på skärmen. En tabellvy är en instans av klassen UITableView, som är en underklass av UIScrollView.
• Tabellvyceller, som är de repeterbara raderna eller vyerna, som visas i tabellvyn. En tabellvycell är en instans av en UITableViewCell – klass, och den klassen är ofta underklassad för att skapa anpassade tabellvyceller.

en tabell View controller förlitar sig också på användningen av dessa komponenter, bakom kulisserna:

• en delegat för tabellvy, som ansvarar för att hantera tabellvyns layout och svara på användarinteraktionshändelser. En delegat för tabellvy är en instans av klassen UITableViewDelegate.
• en datakälla för tabellvy, som ansvarar för att hantera data i en tabellvy, inklusive tabellvyceller och sektioner. En datakälla är en instans av klassen UITableViewDataSource.

den mest intressanta delen av att arbeta med table view controllers är table view controller själv! Hur så?

är du bekant med arkitekturen Model-View-Controller? Enligt arkitekturen Model-View-Controller, en tabellvy och en tabellvy cell är vyer, och en tabellvy controller är en styrenhet.

visningar är ansvariga för att visa information synligt för användaren, med ett användargränssnitt (UI). Controllers ansvarar för att implementera logik, hantera data och fatta beslut. Sagt annorlunda: Du kan inte se en controller, men det är där, hantera vad du ser genom vyer.

när du använder en tabellvykontroll i din app underklassar du klassen UITableViewController. Klassen UITableViewController är en underklass av UIViewController.

här är klasshierarkin för en exempeltabellvykontroll som visar kontaktinformation:

• en instans av ContactsTableViewController
  • underklasser UITableViewController
    • underklasser UIViewController

enligt principerna för objektorienterad programmering (OOP), när klass RaceCar underklasser klass Vehicle, ärver den superklassens egenskaper och funktioner, såsom maxSpeed och drive().

klassen Vehicle kallas sedan superklassen för RaceCar. Denna princip kallas arv.

förvirrande? Det kan vara! Tänk på det så här: för att din table view controller ska fungera OK måste du ärva en massa kod, så du behöver inte skriva all den koden själv. Klasshierarkin, och OOP, är där för att strukturera det arvet.

du kan arbeta med tabellvyer utan att använda en tabell View controller. Lägg bara till en UITableView i en vykontroll, förse den med implementeringar av tabellvyn delegat och datakällfunktioner, och du är klar.

klassen UITableViewController tillhandahåller standardimplementeringar av dessa tabellvisningsdelegat-och tabellvisningsdatakällfunktioner. Det är en viktig aspekt av att arbeta med en table view controller!

som du ser i nästa kapitel i denna handledning kommer vi att åsidosätta dessa funktioner med våra egna implementeringar. Vi kan anpassa table view controller genom att göra det.

ställa in en enkel tabell View Controller

Okej, låt oss sätta allt detta i praktiken. I det här avsnittet kommer vi att bygga en enkel tabellvykontroll. Du kommer att genomföra de funktioner som behövs för att få det att fungera, och jag ska förklara hur de fungerar när vi går. Låt oss få ett drag på!

du kan använda 3 olika metoder för att arbeta med UIs i Xcode:

1. skapa vyer programmatiskt, dvs. koda dem för hand
2. ställa in UIs i Interface Builder och ansluta dem med Swift-kod via XIBs
3. ställa in UIs och deras övergångar i Interface Builder med Storyboards
4. (Tekniskt kan du använda SwiftUI också, men vad gäller tabellvykontroller är det utanför ramen för denna handledning.)

det är tråkigt och oproduktivt att koda UIs för hand. Om du inte är försiktig med Storyboards, de hamnar dölja komplexitet från utvecklaren. Vi kommer att arbeta med Storyboards, samtidigt räkna ut exakt hur de fungerar bakom kulisserna.

här är vad du ska göra:

först, skapa ett nytt Xcode-projekt via fil Se till att välja app mall och plocka Storyboard för gränssnitt och UIKit App delegat för livscykel.

ta sedan dessa steg:

1. högerklicka på ditt projekt i Project Navigator och välj Ny fil…
2. Välj Cocoa Touch-klassmallen (iOS)
3. Välj UITableViewController för underklass av
4. namnge klassen ContactsTableViewController
5. kryssa inte också skapa XIB-fil
6. slutligen, klicka på Nästa och spara filen tillsammans med de andra Swift-filerna

slutligen gör du det här:

1. gå in i Main.storyboard och ta bort den befintliga View Controller-scenen
2. Lägg till en ny Table View Controller till storyboard via biblioteket
3. med table view controller vald, gå till attribute Inspector och kryssa i kryssrutan is Initial View Controller
4. slutligen, gå till Identity Inspector och ställ in Klass till ContactsTableViewController

det är det! Du har nu en tabellvykontroll i projektets storyboard, och du har anslutit den till Swift-klassen ContactsTableViewController.

som du gissat är din ContactsTableViewController klass en underklass av UITableViewController. Du kan se det i Swift-filen, högst upp, i klassdeklarationen.

class ContactsTableViewController: UITableViewController { ···

denna syntax betyder: klassen ContactsTableViewController är en underklass av UITableViewController.

när du högerklickar på” UITableViewController ” medan du håller Option-tangenten kan du se i klassdeklarationen att UITableViewController är en underklass av UIViewController och överensstämmer med protokollen UITableViewDelegate och UITableViewDataSource.

det är kraften i tabellen View controller! Det ger oss inte bara de enskilda komponenterna för att göra en tabellvy, regulatorn ger också en standardimplementering. Det är därför vi underklass UITableViewController, istället för att skapa en tom vy controller med en tabellvy.

vid denna tidpunkt kan du köra din app med Command-R eller Play-knappen och se den tomma tabellvykontrollen visas på skärmen.

Varför är det förresten? Vi har inte kodat något ännu! Det beror på att table view controller har en standardimplementering, som bara visar tomma celler på skärmen. Snyggt!

kodning av datakällan för Tabellvykontrollen

nu när din tabellvykontroll har ställts in, låt oss få den till liv! I det här kapitlet fokuserar vi på de olika funktionerna du behöver implementera för att få din tabellvykontroll att fungera.

som förklarats tidigare hör dessa funktioner antingen till delegaten för tabellvykontroll eller datakällan för tabellvykontroll. Båda dessa protokoll använder delegering för att anpassa tabellvyn.

de viktigaste funktionerna för UITableViewDataSource är:

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

andra relevanta funktioner för UITableViewDelegate är:

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

du kan hitta fler funktioner i Apples utvecklardokumentation för UITableViewDelegate och UITableViewDataSource.

lägga till kontaktdata

du börjar med att lägga till kontaktinformationsdata för kontrollenheten för tabellvy. Lägg till följande egenskap i klassen ContactsTableViewController :

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

det är en rolodex som vi alla skulle vilja ha, eller hur? Så här fungerar det:

• let contacts förklarar en konstant med namnet contacts. Du har lagt till den som en egenskap i klassen, så varje klassinstans har tillgång till denna konstant i hela klassens kod.
• typen av contacts är ], vilket är en rad matriser av strängar. Du skapar i huvudsak en array, varav objekten är matriser av strängar. (Ett variabelnamn och dess typ separeras med ett kolon :)
• koden = tilldelar en array bokstavlig till contacts, fylld med namn och telefonnummer till några miljardärer.

vid ett senare tillfälle kan vi använda antalet objekt i matrisen med contacts.count. Och vi kan få enskilda namn och telefonnummer med contacts och contacts, med hjälp av prenumerationssyntax.

Registrera en Tabellvycellklass

innan du kan använda celler i en tabellvykontroll måste du registrera dem i tabellvyn. Du kan göra det på två sätt:

1. genom att tillhandahålla en tabellvycellklass och en identifierare
2. genom att tillhandahålla en tabellvycell XIB och en identifierare

när du använder en anpassad tabellvycell vill du troligen registrera en XIB för det. När du använder standardcellerna för tabellvy eller någon annan programmatisk cell registrerar du klassen. Vi kommer att använda klassen, för nu!

Lägg till följande kod till funktionen viewDidLoad() :

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

se till att lägga till den under raden super.viewDidLoad(). Som du säkert vet är funktionen viewDidLoad() en del av view controller livscykel och tillhör klassen UIViewController.

du åsidosätter funktionen viewDidLoad() för att svara på den här händelsen i livscykeln för en vykontroll, så att du kan ställa in din vy efter att den har laddats. I vårt fall använder vi funktionen för att registrera tabellvisningscellen.

när du registrerar en tabellvisningscell måste du också ange en identifierare. Detta är helt enkelt att associera klassen av cellen med ett namn som du kan använda senare, när dequeuing cellen i tableView(_:cellForRowAt:).

är du fortfarande med mig? Låt oss gå vidare!

implementera ”numberOfSections(in:)”

den första delegatfunktionen vi ska implementera är numberOfSections(in:).

en tabellvy kan ha flera sektioner eller grupper. Varje grupp har en rubrik som flyter ovanpå den vertikala raden av celler. I en Kontakter-app kan du gruppera kontakter i alfabetisk ordning. Detta görs faktiskt i appen Kontakter på iPhone, där kontakter är grupperade A-Z.

appen vi bygger har bara ett avsnitt. Lägg till följande funktion i klassen:

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

enkelt, eller hur? Funktionen returnerar 1 när den anropas.

implementera ”tableView(_:numberOfRowsInSection:)”

en liknande funktion är tableView(_:numberOfRowsInSection:). Istället för att ange antalet sektioner ger det antalet rader i ett avsnitt. Eftersom en tabellvy visar celler i en vertikal lista motsvarar varje cell en rad i tabellvyn.

appen vi bygger har bara ett avsnitt, och det ena avsnittet har ett antal objekt som är lika med antalet objekt i matrisen contacts. Så det är contacts.count!

Lägg till följande funktion i klassen:

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

se hur det fungerar? Vi återvänder helt enkelt contacts.count. Om du skulle lägga till ett annat namn och telefonnummer till contacts, skulle det dyka upp snyggt i tabellvyn också.

förstå rader och sektioner

vår Kontaktapp är endimensionell, den visar bara en lista med namn och telefonnummer, och den använder inte grupper. Men vad händer om du har en grupperad tabellvy?

i de flesta fall skulle din datakälla, som contacts-arrayen, också vara flerdimensionell. Du skulle organisera grupper på första nivån och enskilda objekt på andra nivån, ”under” grupperna.

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

antalet grupper är lika med countries.count, och antalet länder i en enda grupp är lika med countries.count, där x är sektionsindex. Det sektionsindexet tillhandahålls som en parameter i tableView(_:numberOfRowsInSection:).

tillhandahålla celler till Tabellvykontrollen

vi kommer dit! Låt oss gå vidare till den viktigaste funktionen för en tabellvykontroll: tableView(_:cellForRowAt:).

vi implementerar funktionen innan du dyker in i detaljerna, men det finns ett par saker du behöver förstå om det:

• när det heter
• vad en indexväg är
• hur det återanvänder celler

lägg först till följande funktion i klassen ContactsTableViewController :

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

så här fungerar det:

• funktionen åsidosätter dess superklassimplementering från UITableViewController. Nu vet du hur det fungerar, eller hur? Vi åsidosätter standardimplementeringen och ersätter vår egen. Det beror på att UITableViewController redan har implementerat tabellvyn delegat och datakälla för oss.
• som tidigare har funktionen en parameter tableView som vi kan använda för att identifiera tabellvyn som denna funktion anropas.
• en annan parameter är indexPath, med argument etikett cellForRowAt. Indexvägen identifierar cellens index row och section. Mer om det senare.
• funktionens returtyp är UITableViewCell. Det är intressant. Denna funktion kallas av tabellvykontrollen, varje gång vi behöver tillhandahålla en tabellvycell!

när du bläddrar igenom kontakterna i den här appen, varje gång en cell måste visas på skärmen, kallas funktionen tableView(_:cellForRowAt:). Varje gång! Jag ska bevisa det för dig om ett ögonblick.

nästa Upp, låt oss skriva funktionskroppen. Lägg till följande kod i funktionen:

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

här är vad som händer:

• först dequeue vi en cell med en identifierare. Det är exakt samma identifierare som vi använde tidigare när vi registrerade cellen. På så sätt vet tabellvyn vilken typ av cell vi vill ha. Den dequeued cellen tilldelas cell konstant. Nu har vi en tabellvycell att arbeta med. Mer om dequeuing senare.
• sedan skriver vi ut lite information till konsolen. Detta är så att vi kan se när den här funktionen kallas, när appen körs.
• sedan tilldelar vi kontaktens namn till textetiketten i denna tabellvycell. contactsinnehåller värdet på kontaktens namn, som vi kommer till genom att använda indexPath.row. Varje instans av UITableViewCell har en egenskap textLabel av UILabel, och varje etikett av den typen har en egenskap text. Du använder den för att ställa in texten på etiketten.

oroa dig inte, vi kommer att gå igenom var och en av dessa saker mer detaljerat. Se först om du kan köra din app. Ser du kontaktnamn? Ser du felsökningsutgången i konsolen? Prova att rulla appen!

när heter” tableView(_:cellForRowAt:)”?

om du körde appen Kontakter och spelade runt med att rulla upp och ner, kan du inte låta bli att märka att varje gång du bläddrar visas felsökningsutmatningen i konsolen.

varje gång en cell som inte fanns på skärmen tidigare visas kallas funktionen tableView(_:cellForRowAt:) och en ny rad visas i konsolen.

så när heter tableView(_:cellForRowAt:)? Varje gång en tabellvy cell måste visas på skärmen!

table view controller har bestämt att en cell behövs, så den kallar tableView(_:cellForRowAt:). Vår implementering av den funktionen dequeues en cell, ändrar den och ger den tillbaka till table view controller. Tabellvykontrollen och UIKit-ramverket gör det sedan grafiskt på skärmen.

Vad är en Indexväg?

varje gång tabellvykontrollen behöver en cell från tableView(_:cellForRowAt:), ger den en indexväg som ett argument för funktionen. Inom funktionskroppen kan du använda parametern indexPath för att veta exakt vilken cell tabellvykontrollen behöver.

en indexväg är som en adress eller en koordinat i ett rutnät. En typisk graf har en X-axel och en Y-axel, så du kan uttrycka en koordinat i den grafen som x, y som 0, 1 och 42, 3. På samma sätt har ett kalkylblad rader och kolumner med index.

en tabellvy använder sektioner och rader. Som diskuterats tidigare kan du använda sektioner för att gruppera celler tillsammans. Vår app har bara en sektion, och den har contacts.count rader. Raderna i tabellvyn löper från topp till botten.

nämnda annorlunda: sektionerna och raderna i en tabellvy är vad kolumner och rader är att ett kalkylblad. En indexväg definierar en plats i tabellvyn genom att använda en rad och ett avsnitt.

raderna och sektionerna representeras av siffror, kallade index. Dessa index börjar på noll, så den första raden och sektionen kommer att ha indexnummer 0.

när du tittar tillbaka på föregående skärmdump är det mycket mer meningsfullt. Den första cellen har indexväg 0, 0, den andra cellen 0, 1, fortsätter upp till den sista synliga cellen med indexväg 0, 11.

Återanvändningsmekanismen för Tabellvy

det som är mest anmärkningsvärt med tabellvyn är dess mekanism för återanvändning av celler. Det är ganska enkelt, faktiskt.

• varje gång en tabellvykontroll behöver visa en cell på skärmen kallas funktionen tableView(_:cellForRowAt:), som vi har diskuterat tidigare.
• istället för att skapa en ny tabellvycell varje gång den funktionen anropas väljer den en tidigare skapad cell från en kö.
• cellen återställs till ett tomt tillstånd, rensar sitt utseende och cellen anpassas igen i tableView(_:cellForRowAt:).
• när en cell rullas utanför skärmen förstörs den inte. Det läggs till i kön och väntar på att återanvändas.

det är ganska smart, eller hur? Istället för att skapa och ta bort celler återanvänder du dem helt enkelt. Men … varför?

det är mycket mindre minnesintensivt att återanvända celler. Tabellvynskontrollen skulle ständigt skriva till minnet när du skapar och tar bort celler. Att hantera minnet skulle också vara mer intensivt. När celler återanvänds används minnet mer effektivt och mindre minnesoperationer behövs.

dessutom är itt något mindre CPU-intensiv för att återanvända celler istället för att skapa och ta bort dem, eftersom det helt enkelt är mindre operationer involverade i återanvändning jämfört med att skapa och ta bort celler.

när du snabbt bläddrar genom en tabellvy ser du inte nya celler – du ser samma celler om och om igen, med ny information.

koden som är involverad i cellåteranvändning är detta:

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

funktionen dequeueReusableCell(withIdentifier:) försöker dequeue en cell. När inga celler finns i kön kommer det att skapa en cell för oss. Identifieraren används för att hålla alla typer av celler i sin egen kö och för att se till att rätt klass används för att skapa nya celler.

att svara på användarinteraktion

en sak saknas i vår tabellvykontroll: möjligheten att ringa personer i vår kontaktlista! Men innan vi gör det, låt oss se till att du också kan se en kontakts telefonnummer i tabellvynskontrollen.

standardklassen UITableViewCell har 4 olika typer, som uttrycks i uppräkningen UITableViewCellStyle. Du kan välja mellan:

• .default – en enkel vy med en rad svart text
• .value1 – en enkel vy med en rad svart text till vänster och en liten blå etikett till höger (används i appen Inställningar)
• .value2 – en enkel vy med en rad svart text till höger och en liten blå etikett till vänster (används i appen Kontakter)
• .subtitle – en enkel vy med en rad svart text och en mindre rad grå text under den

de flesta utvecklare använder anpassade tabellvisningsceller idag, så att du inte ser dessa celltyper så ofta. Men de är där!

vi måste justera koden något i tableView(_:cellForRowAt:). Ersätt den första raden i funktionen med följande kod:

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

om du tittar noga ser du att vi har tagit bort for: indexPath – delen av dequeueReusableCell(...) – samtalet. Istället returnerar den funktionen nu en valfri. När det inte går att dequeue en cell, returnerar funktionen nil.

vi hoppar sedan in oss själva för att skapa cellen, om den är nil. Du ser det i den andra delen av koden. Du använder en villkorlig if – sats för att kontrollera om cell är lika med nil, och om det är sant skapar du cellen med UITableViewCell(style:reuseIdentifier:) – initialiseraren.

den initialiseraren får två argument, cellstilen .subtitle och identifieraren vi använde tidigare.

vid denna tidpunkt har vi ett problem, eftersom cell är ett valfritt nu! Dess typ är UITableViewCell?, men funktionen returtyp kräver att vi returnerar en instans med icke-valfri typ UITableViewCell.

lyckligtvis är detta ett av de fall där vi säkert kan använda force unwrapping för att packa upp det valfria värdet. På grund av hur vår kod skrivs är det omöjligt för cell att vara nil utöver det villkorliga. Du kan garantera att cell inte är nil efter if – satsen.

se till att uppdatera funktionen för att använda force unwrapping för cell. Lägg också till följande kodrad under cell!.textLabel ... för att ställa in undertexten på cellen visa kontaktens telefonnummer.

cell!.detailTextLabel?.text = contacts

hela funktionen ser nu ut så här:

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!}

slutligen, se till att ta bort följande rad från viewDidLoad(). Det förhindrar att tabellvyn initierar celler med fel typ.

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

mäktig fin! Kör din app med Command + R eller Play-knappen och kontrollera om den fungerar. Ser du namn och telefonnummer? Bra!

låt oss sedan lägga till den användarinteraktionsfunktionen för Pi exporce-de-R. Nu när du har lärt dig invecklingen av table view controller tror jag att du redan vet hur den här nästa funktionen fungerar.

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

återigen åsidosätter vi standardimplementeringen av funktionen tableView(_:didSelectRowAt:). Den här funktionen anropas när en användare trycker på cellen i en tabellvy och den tillhör protokollet UITableViewDelegate. Liksom de andra funktionerna tillhandahålls indexvägen för cellen som tappas.

i funktionskroppen skapar vi helt enkelt en tel:// URL från telefonnumret. Vi ber sedan appen att öppna den webbadressen, som effektivt ber iOS att initiera ett samtal till det här numret. Den koden finns endast för illustrativa ändamål. Observera att detta inte fungerar på iPhone Simulator, och att siffrorna i vår app är falska. (Ändå skulle du använda den här koden om du gör en riktig Kontaktapp!)

du kan lägga till följande kod i funktionen om du vill kontrollera om den fungerar OK.

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

detta kommer att skriva ut ett felsökningsmeddelande när du trycker på cellen i tabellvyn.

Vidare läsning

och det är allt som finns till det! Det har varit ganska en resa, men nu vet du hur en tabell View controller fungerar.