Compatibile con Xcode 8

Creare un’applicazione Promemoria con il linguaggio Swift. Impariamo a collegare due tabelle

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Dato che un utente mi ha chiesto di aiutarlo nella creazione di un progetto ne approfitto per condividere con voi quello che ho realizzato. Già negli scorsi preview Creare un Promemoria in Swift per iOS 8tutorial hai affrontato il problema della creazione e modifica di una lista in una Table View. Oggi complicheremo leggermente le cose provando a creare un promemoria che ha la struttura di una lista di liste.

Nel dettaglio quello che farai sarà creare due Table View. La prima conterrà la lista principale e la seconda Table View mostrerà gli elementi di una lista associata ad una riga della tabella precedente.  Creare un’Applicazione Promemoria con il linguaggio Swift con queste caratteristiche necessita di un pizzico di ingegno in più. Infatti quello su cui verterà l’intero tutorial sarà il passaggio di un’intera lista alla Table View di destinazione.

Il seguente tutorial è stato scritto per supportare la versione di Xcode 7.0 e il linguaggio di programmazione Swift 2.0. In fondo alla pagina trovi il download del progetto finale.

Sei pronto? Cominciamo!

Creazione del progetto

Apri Xcode, crea un nuovo progetto (File\New\File…). Seleziona iOS e Sigle View Application, premi Next. Setta un nome alla tua applicazione e assicuratevi che sia impostato Swift come linguaggio di programmazione. Next ed infine Create (per creare una cartella con i file del progetto).

Spostati nel Main.storyboard ed eliminate l’unico View Controller presente. Poi seleziona il file a cui è collegato, ovvero il ViewController, ed eliminate anche quello. Adesso aggiungi, trascinando dall’Object Library allo storyboard, un Navigation Controller che insieme si porta un Navigation Controller ed una Table View.
Poi seleziona il Navigation Controller, vai nell’Attributes Inspector e selezionate Is Initial View Controller:

interfaccia Creare un Promemoria in Swift per iOS 9

Cos’è l’Attributes Inspector? il Navigation Controller? o il linguaggio Swift? se vuoi approfondire di più l’argomento e diventare un’artista della programmazione puoi seguire il mio corso sullo sviluppo di applicazioni iOS, ti guiderà in tutti i passaggi dalla A alla Z.

Continuiamo!

Xcode prontamente mostra dei warning, o avvertimenti (il simbolo triangolare giallo), perché mancano alcuni dettagli che spetta a noi inserire.

Ora devi collegare la Table View principale alla Table View secondaria. Un collegamento in Xcode si chiama Segue e serve a indicare che da quel View Controller esiste una via che porta ad un altro Controller (Se non ti ricordi cos’è, vai a questo articolo).

Crea un Segue tra le Table View. Premi CTRL+CLICK SINISTRO sulla prima Table View e trascinate la freccia verso l’altra Table View. A questo punto seleziona la freccia e imposta un Identifier al segue, chiamatelo listaSegue, questo permettere in seguito di poterlo invocare dal codice:

segue Creare un Promemoria in Swift per iOS 9

Adesso non ci resta che creare un identifier per le Celle delle due Table View. Anche in questo caso serve creare l’Identifier per poi poterci riferire a quelle celle dal codice. La motivazione l’ho spiegato nel primo articolo dedicato alle table view.

Spostati sulla prima Table View e seleziona il Prototype Cells, sempre dall’Attributes Inspector impostategli Cell come Identifier. Fate la stessa operazione anche per l’altra Table View:

cell identifier Creare un Promemoria in Swift per iOS 9

Il setting del progetto è quasi concluso. Manca solamente associare una nostra classe personale per il controllo delle due Table View.

Crea un New File, di tipo Cocoa Touch Class, chiamalo MainTableViewController, assicurati che sia una sub class di UITableViewController e che come linguaggio sia impostato Swift. In questo modo avrai una personale classe che ptrai personalizzare grazie al fatto che ha ereditato tutti i metodi e attributi della classe madre:

new file Creare un Promemoria in Swift per iOS

Crea un New File con le stesse caratteristiche del precedente e chiamalo SonTableViewController.

Adesso devi associare queste due classi alle rispettive Table View. Torna nello storyboard, seleziona la Table View principale, vai nell’Identity Inspector e imposta come Class il nome della classe MainTableViewController. Fai la stessa operazione per l’altra Table View:

impostare classe Creare un Promemoria in Swift per iOS 9

Infine cambia il titolo del View Controller. Per farlo basta cliccare sull’Attribute Inspector del titolo e modificarlo.

cambiare-nome-al-view-controller
Ci siamo! Se avvii l’applicazione non dovrebbero esserci problemi. Ti ricordo comunque che in fondo alla pagina trovi il download del progetto completo.

Il codice

Facciamo un attimo un recap di ciò che abbiamo e ci serve.

  1. L’applicazione è un promemoria di più cose. Per farla semplice, potremmo avere un promemoria che riguarda la spesa per il nostro amato partner e un’altra lista per gli appuntamenti lavorativi.
  2. Per questo motivo hai creato due Table View Controller. La prima tabella mostrerà le liste che hai creato (quindi Spesa ed Appuntamenti). La seconda tabella, invece, mostrerà il contenuto di una lista seleziona nella prima tabella.
  3. Le due TableViewController sono collegate tramite segue. In più c’è un Navigation Controller che ci permetterà di tornare indietro una volta raggiunta la TableView B.

Adesso serve creare la struttura dell’applicazione con il linguaggio Swift. Quindi per creare la base della tua applicazione promemoria con il linguaggio Swift è necessario utilizzare un semplice dizionario a cui assegnare alla chiave, il nome della lista, ed il valore un’altra lista di elementi.

Il dizionario verrà conservato nel MainTableViewController perché sarà lui ad inviare l’informazione alla seconda tabella. Apri il MainTableViewController.swift. e sotto la dichiarazione della classe crea il seguente dizionario:

Per semplicità ipotizziamo che il dizionario sia già stato inizializzato e creato. Se poi volete creare un sistema per inserire manualmente i valori qui ho spiegato come fare. Do per assodato che sai già utilizzare i dizionari e che conosci un po’ di programmazione Swift. In caso contrario puoi seguire i corsi che trovi qua: Corsi Programmazione.

Adesso devi modificare il metodo numberOfSectionInTableView, per creare nella Table View una sezione, e il metodo numberOfRowInSection per mostrare tante righe quante siano le chiavi del dizionario. Modifica i metodi nel seguente modo:

Modificate il metodo cellForRowAtIndexPath in modo da avere ad ogni cella della Table View un valore della chiave del dizionario:

Se avviate l’applicazione vedrete come essa vi carichi le chiavi del dizionario ad ogni Cell della Table View:

applicazione promemoria con il linguaggio Swift

Anche se dovrei metterlo dopo, questo codice, ve lo inserisco qua in modo da non creare confusione. Sappiate che per il momento genererà un errore.

Per spostarsi da una Table View all’altra, all’inizio del tutorial, ti ho fatto creare un Segue che sbloccava la possibilità di spostarsi tra i due Controller. Ora vogliamo che, quando l’utente seleziona una delle celle, essa ci porti alla Son Table View la quale mostrerà gli elementi di quel promemoria.

Il prepareForSegue, come la stessa parola lascia immaginare, prepara il destinatario a ricevere delle informazioni. Infatti noi prepareremo la lista da inviare quando verrà invocato il segue in modo che, quando il segue sarà attivato, il destinatario abbia già tutte le informazioni richieste.

Aggiungi i seguenti metodi:

Quando verrà selezionata una linea e quindi una Cell della Main Table View automaticamente verrà invocato il segue listaSegue. Prima che si passi al Son Table View, il prepareForSegue, recupera l’indice della casella selezionata, tramite indexPathForSelectedRow, e grazie a questo indice estrae la lista della chiave a quella posizione e la invia al sonTableViewController, che la salverà nella variabile listaRicevuta.

Passiamo adesso a modificare il SonTableViewController.swift.

Aggiungi una lista che conterrà l’array inviato dalla Table View madre:

Come fatto per il padre, modifichiamo il numero di sezioni e il numero di righe della Table View:

Adesso è fatta! Questa Table View viene gestita come una Table View a se stante. Infatti il metodo per il riempimento della Cell si tramuta nella visualizzazione degli elementi della listaRicevuta:

Boom! Avvia l’applicazione. Ecco che magicamente (si fa per dire) avete creato un promemoria con una doppia Table View:

Creare un Promemoria in Swift per iOS 9

Conclusione e Download del progetto

Adesso prova ad immaginare un’applicazione con molte Table View. Il gioco è sempre lo stesso, dividerle a gruppi e lavorare piano piano su ogni gruppo finché non si arriva alla fine.

Questo è solo un tutorial per far capire meglio il passaggio di informazioni tra le View, infatti è sprovvisto sia di funzioni interattive che del salvataggio dei dati in memoria tramite il Core Data.

Se avete avuto problemi con il vostro progetto, scaricate quello fatto da me:

[sociallocker]
App Promemoria – Swift 2.0 & Xcode 7.0 – Completa [wpdm_package id=’1173′]
[/sociallocker]

Creare un’applicazione promemoria con il linguaggio Swift non è mai stato così semplice.
Buona Programmazione!

Start typing and press Enter to search

Creare la prima applicazione per OS X con SwiftTutorial CLGeocoder in Swift, cercare informazioni nella MapView