Le Table View in iOS. Creare, riempire e gestire una tabella

Giuseppe Sapienza

Le Table View in iOS. Creare, riempire e gestire una tabella

Le Table View in iOS. Creare, riempire e gestire una tabella
Per favore acquista corso prima di iniziare la lezione.

Compatibile con Xcode 8

Hai un problema con la lezione? scrivi un commento in fondo alla pagina - non mordo!

Cominciamo scoprendo cos’è una tabella, come funziona e come implementarla in un’applicazione. Un’app senza una tabella non è un’app, vedrai come le TableView diventeranno il tuo miglior amico d’avventura!

Lista Lezioni

Corso creare applicazioni per iOS con il linguaggio Swift

Torna a: Corso creare applicazioni per iOS con il linguaggio Swift > TableView, TabBar e CollectionView
  • Angelo

    Salve, volevo sapere se capita solo a me che viewcontroller, does not conform to protocol uitableviewdatasource?

    • Ciao Angelo,
      In che senso? Casomai carica uno screen del problema

      • Ops, non l’ho cancellato in tempo ;) tutto ok, è sufficiente una parentesi in meno per dare gli errori più disparati…grazie per la disponibilità.

  • Francesco

    Ciao Peppe,

    scusa ma mi ero bloccato perché non mi visualizzava il colore rosso, ho letto la lezione più volte ma forse nella prima parte hai dimenticato di far presente o davi per scontato l’inserimento del richiamo al caricamento della pagine

    self.myTable.dataSource = self
    self.myTable.delegate = self

    Ricarda (almeno io) che siamo dei principianti -anti :-)

    Scherzo

    • No ma che! grazie per avermelo fatto notare, sarà che pensavo di averlo scritto quando in realtà non l’avevo fatto :P
      Provvedo subito!

    • Aggiunto :P

      • Francesco

        Perfetto! :-)

  • Francesco

    Ciao Peep,

    vorrei fari 2 domande:

    qui non ne hai parlato non so se ne parlerai in seguito ma non abbiamo visto come gestire il click su una cella per andare magari in una pagina di dettagli

    Perché non trattiamo argomento edit di una calle ma solo il delete, e una cosa complicata?

    Sò che non centra ma pensi in futuro di fare un corso avanzato su argomenti come db, notifiche remote ecc ecc

    Grazie

    • Ciao Francesco,

      Il prossimo tutorial che rilascio tra poco è sulle Section della tabella. Il successivo tutorial è sulla selezione di una cella ed il movimento in un altro VC con il relativo passaggio di dati.
      Non voglio usare l’edit di default perché è molto limitativo e sta andando in disuso. La maggior parte delle applicazioni, una volta selezionata una cella, ti portano in un altro VC in cui effettuare le modifiche o vedere i dettagli.
      Se consideriamo che ora esiste il peak e pop il processo è maggior mente ottimizzato.

      Per la domanda del DB e Notifiche remote, la risposta è si. O ne parlerò in un corso separato o in articoli sul blog (già sul database Parse ne ho scritti un paio).

      • Francesco

        Ciao,

        sono contento se fai un corso, anche per le tabelle ne hai parlo in un articolo così come il parse ecc ma ovviamente inserite in un corso logico come hai fatto con questo fatto a step e più approfondito e tutta un altra cosa sarebbe bello inserire anche la gestione delle gesture :-)

        • Eh si questo senza dubbio!
          Vedrò non appena completo questo il da farsi ;)

          P.S. ho pubblicato l’altra lezione!

  • nickbonny

    Ciao Beppe, a me non è chiarissimo cosa succede con il queue..in particolare non mi è chiaro cosa succede in tutta questa funzione:

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCellWithIdentifier(“myCell”, forIndexPath: indexPath)

    //cell.backgroundColor = UIColor.redColor()

    cell.textLabel?.text = self.lista[indexPath.row]

    return cell

    }

    Cioè cosa fa il dequeue? e non capisco perché funzioni passandogli “myCell” che è solo una cella tra tutte quelle che si verranno a creare..

    E il cell.textLabel?.text = self.lista[indexPath.row], come fa a riempirsi? Io avrei pensato a un ciclo for che scorre le celle della tabella e una ad una passa i valori contenuti nell’array lista..

    Grazie e scusa per tutte queste domande.

    • Ciao Nick,

      Partiamo dal principio. nello storyboard tu crei una prototype cell. Questo prototipo serve alla tabella per capire come dovrà creare tutte le altre. Infatti gli si imposta un Identifier in modo che il processo di creazione avvenga da codice e non da storyboard (tu non ti metti a creare 1000 celle ma lasci fare al codice questo compito).
      Qui veniamo al codice. Hai il prototipo con Identifer e adesso ti serve utilizzarlo per creare le altre celle della tabella.

      Il metodo che usa la table view per creare le cell è il cellForRowAtIndexPath. Dopo che è stato invocato il numberOfRowInSection che provvede a creare N righe quanti sono gli elementi di un array, la cellForRowAtIndexPath viene invocata ad ogni riga.

      Per ogni riga la funzione restituisce una UITableViewCell ovvero una cella da inserire nella riga. Per evitare di creare 1000 righe, per esempio, dato che ogni volta visualizzi solo un tot di numero di celle (in base alle dimensioni dello schermo) la tabella ti mette a disposizione il metodo dequeReusableCellWithIdentifier.

      Il dequeuReusableCellWithIdentifier crea una Cella o ne prende una dalla lista delle riutilizzabili (cioè le celle che non si vedono più durante lo scroll della tabella). Queste celle come vengono create?

      Torniamo al discorso del prototipo e dell’Identifier. Tu vuoi che le tue celle vengano create tutte seguendo lo stile della Prototype Cell che hai nserito nello storyboard. Grazie all’Identifier dici alla dequeReusableCell: “Senti, prova a creare una cella con lo stile della prototype cell ha identifier X” e la deque o ne crea una nuova o ne prende una dalla lista delle riutilizzabili. A questo punto che la deque ha ritornato una cella, la funzione cellForRowAtIndexPath la restituisce alla tabella che provvede a metterla nella riga in questione.

      E questo è il processo di creazione.

      Ora tu hai parlato di ciclo. Giustissimo, il ciclo c’è ma non si vede. Infatti il metodo cellForRowAtIndexPath funziona esattamente come un ciclo. Infatti viene invocato ad ogni riga della tabella. Quindi è come se la tabella stesse facendo un ciclo sulle sue righe e per ogni riga invoca questo metodo che gli mette sopra una cella.

      Spero di essere stato chiaro ;)

      • nickbonny

        Grazie mille!! Io fossi in te metterei questa tua risposta in fondo alla lezione per fare un riassunto perché è ECCEZIONALE!

        • Eee! Mi sa che farò così xP

          Giuseppe Sapienza
          xCoding.it | Sviluppa, Crea e codifica i tuoi sogni!

  • Michele

    Ciao,
    ho provato a fare una variazione al tema e mi sono imbattuto in un comportamento che non riesco a comprendere.
    Ho provato nella tabella a settare da StoryBoard: Table View -> Content: Static Cells ed ho modificato da Storyboard l’aspetto.

    Adesso però ho collegato una classe UITableViewController inserendola come Custom Class… e tutto il lavoro fatto via GUI sparisce…

    La mia prima conclusione è che… o lavoro da StoryBoard con Static Cells o lavoro via codice con Dynamics Prototype
    Come faccio a fare un ibrido??

    Grazie in anticipo,
    Michele

    • Ciao Michele,
      Tu hai, in questo momento, un View Controller con dentro una TableView? corretto?
      In questo caso non puoi utilizzare le static cell perché deve essere embeddato in un TableViewController. Quindi, cancella il ViewController ed utilizza un TableViewController se vuoi utilizzare le static cell.

      In questo modo non devi aggiungere una nuova tableview perché è già contenuta dentro il TableViewController. Quindi ti basta editare questa.

      Ti allego un progetto d’esempio: http://cl.ly/3s263w1U2D42

      Dato che sono static cell non devi utilizzare il metodo cellForRowAtIndexPath. Devi semplicemente definire quante celle vuoi visualizzare (numberOfRow) e quante section (numberOfSection).

      Gli altri metodi, tipo la didSelectRowAtIndex ecc, funzionano tranquillamente.

      Fammi sapere se ci sono dei problemi,
      Giuseppe

  • Ciao Beppe,
    quando provo a popolare le celle con il dizionario mi va a eliminare l’ultimo valore.

    var diz = [1 : “aa”,2 : “bb”,3 : “cc”,4 : “dd”,5 : “ee”]

    cell.textLabel?.text = self.diz[indexPath.row]

    come faccio a far vedere nella cella anche il valore “ee”? in più nella prima cella mi compare una cella vuota.
    come faccio a correggere il tutto?
    grazie!

Start typing and press Enter to search