Prosegue il corso per creare app iOS con Swift. Nella prima parte del Progetto 1, in cui svilupperemo insieme un’applicazione che mostra una lista di immagini, hai imparato a configurare il tuo primo progetto con Xcode ed hai preso confidenza con l’ambiente di sviluppo. Non sono mancati anche alcuni concetti base che ritroverai spesso nella programmazione in Swift.

Se alcuni concetti ancora non sono molto chiari, non preoccuparti. Le prime volte è così. Ogni volta che si impara qualcosa di nuovo non sempre riusciamo a memorizzare tutti i passaggi da effettuare. Con il tempo, l’esperienza e mettendo in pratica quanto appreso, tutto diventerà più familiare. Sei pronto a completare la nostra applicazione?

In questa seconda parte del Progetto 1 realizzeremo insieme l’interfaccia grafica e mostreremo una tabella con la lista de le immagini che abbiamo caricato nel progetto. Se sei pronto allora iniziamo! Ti ricordo che puoi trovare l’elenco completo di tutte le lezioni nella pagina di introduzione del corso.

Se non hai seguito la prima parte del primo progetto ti invito caldamente di recuperarla.

Progetto 1: Image Viewer

Realizzazione dell’interfaccia grafica – utilizzo della Storyboard

Apri il Progetto 1 con Xcode. Fino ad ora, la nostra app riesce a caricare tutte le immagini correttamente, ma non facciamo nulla di interessante con esse. L’unica cosa che la nostra app fa è stampare il nome dei file sulla console di Xcode. Non molto utile come app, vero? Per questo motivo, il nostro prossimo passaggio sarà quello di creare una interfaccia grafica che mostrerà un elenco di foto selezionabili dall’utente per mostrarle a schermo intero.

Ricordi UIKit? È la libreria di Apple che mette a disposizione una serie di oggetti di sistema (bottoni, tabelle e quant’altro) per costruire interfacce grafiche di qualità con il minimo sforzo. Per lo scopo di questa applicazione, noi abbiamo bisogno di un componente chiamato UITableViewController. Esso è un UIViewController (che hai già visto nella prima parte del progetto) che aggiunge la possibilità di mostrare righe di dati che è possibile scorrere e selezionare. In parole semplici, ti dà la possibilità di costruire una tabella composte da righe verticali. Un esempio di questo componente lo puoi vedere nell’app Impostazioni, Mail o Note del tuo iPhone. È un componente molto flessibile. Semplice da utilizzare ma estremamente potente.

Apri il file ViewController del tuo progetto. Alla riga 10 puoi leggere:

class ViewController: UIViewController {

La schermata dell’applicazione si basa sul componente UIViewController, che è una schermata bianca all’interno della quale inserire i componenti. Ma noi abbiamo detto che vogliamo inserire una tabella. Il modo più semplice per fare questa operazione è sostituire il UIViewController con il componente UITableViewController. Per effettuare questo cambiamento dobbiamo fare due cose: modificare il file ViewController e successivamente mettere mano ad una nuova parte di Xcode che prende il nome di Interface Builder (costruttore di interfacce).

Ti mostrerò l’Interface Builder in un attimo. Prima vorrei che tu cambiassi una piccola cosa nel file ViewController.swift.

Alla riga 10 che ti ho mostrato in precedenza, modifica UIViewController sostituendolo con UITableViewController. Otterrai una cosa simile a questa:

Creare App iOS con Swift - Progetto 1 parte 2 1

Ti potrà sembrare una piccola differenza ma le librerie di Apple fanno un grande lavoro al posto nostro con una sola e semplice modifica. Effettuando questo cambiamento, ora il ViewController eredita le sue funzionalità non più da UIViewController ma da UITableViewController, che ci mette a disposizione una tabella e molte funzionalità aggiuntive per gestirla senza che noi dobbiamo scrivere righe di codice in più.

Dietro le scene, Apple ha costruito il UITableViewController ereditando a sua volta le sue funzionalità da UIViewController. Questo comportamento è chiamato ereditarietà gerarchie di classi. È un modo comune di programmare che permette di costruire componenti con determinate funzionalità e poi estenderli con altri componenti che ereditano le funzionalità del componente padre. In questo modo si può riutilizzare il codice senza la necessità di duplicare il codice. Ad esempio, nel nostro caso specifico, Apple ha creato per noi un componente chiamato UITableViewController che implementa molte funzioni per gestire una tabella sullo schermo. Il nostro ViewController eredita da UITableViewController. Questo significa che possiamo riutilizzare tutte le funzioni che Apple ha scritto per noi. In più possiamo aggiungere del codice per interagire con la tabella: saremo noi a decidere quali righe mostrare, come mostrarle, cosa fare quando si seleziona una riga e molto altro.

Cambiare il codice scrivendo UITableViewController al posto di UIViewController non basta. Dobbiamo fare dei cambiamenti anche all’interfaccia grafica. Essi possono essere scritti tutti via codice se vuoi (molti sviluppatori lo fanno) ma è molto più comune e comodo utilizzare uno strumento chiamato Interface Builder, che permette di realizzare interfacce grafiche tramite un editor grafico. Quello che dobbiamo fare è dire all’Interface Builder (o IB), che il nostro ViewController ora contiene una tabella, così che tutti i cambiamenti vengano presi in considerazione anche dalla nostra interfaccia grafica.

Dalla barra laterale sinistra clicca sul file chiamato Main.storyboard per aprirlo. Quando selezioni questo file, vedrai per la prima volta una nuova schermata.

Creare App iOS con Swift - Progetto 1 parte 2 2

Il rettangolo presente al centro dello schermo è il componente che permette di mostrare la schermata bianca quando hai avviato per la prima volta l’app all’inizio di questo progetto. Sulla destra puoi notare la presenza di alcuni componenti che ti saranno certamente familiari se usi un iPhone da molti anni. Trascinando questi componenti all’interno del rettangolo bianco (che rappresenta lo schermo di un iPhone) sarai in grado di costruire la tua interfaccia grafica.

In questo momento il nostro obiettivo è quello di inserire una tabella all’interno dell’app. Per questo motivo dobbiamo eliminare la schermata bianca attualmente presente e sostituirla con una nuova schermata che ha una tabella integrata.

La strada migliore per vedere, selezionare, modificare ed eliminare elementi tramite Interface Builder è usare il document outline, una seziona che permette di avere una visione di tutti i componenti presenti all’interno della vista. Si trova sulla sinistra della schermata centrale, ma potrebbero esserci delle possibilità che tale schermata sia nascosta. Per renderla visibile, dal menù seleziona la voce Editor -> Show Document Outline. Se al posto di Show Document Outline leggi la scritta Hide Document Outline significa che è già visibile. Una volta reso visibile, dovresti vedere una schermata simile alla seguente.

Creare App iOS con Swift - Progetto 1 parte 2 3

Come ti ho detto in precedenza, il Document Outline mostra tutti i componenti presenti nella schermata della storyboard. Nel nostro caso, tu dovresti essere in grado di vedere il componente View Controller Scene. Questo componente è la schermata bianca che vedi quando avvii l’app. Selezionalo ed eliminalo premendo il tasto Backspace della tastiera (è il tasto che utilizzi per eliminare le lettere).

Invece di utilizzare un UIViewController, il nostro obiettivo è quello di sfruttare le potenzialità di UITableViewController. Come ben ricorderai, abbiamo fatto questa modifica nel nostro codice. Ora dobbiamo replicare questo cambiamento nella storyboard. Fare questa operazione è molto semplice. Basterà infatti trascinare il componente desiderato all’interno della storyboard. Sulla destra è presente una libreria che contiene tutti gli oggetti che puoi utilizzare per comporre la tua vista. Se non vedi la libreria, puoi renderla visibile selezionando dal menù la voce View -> Utilities -> Show Object Library. La libreria di oggetti la puoi trovare nell’angolo in basso a destra della schermata.

Creare App iOS con Swift - Progetto 1 parte 2 3

Come puoi notare, sono presenti molti componenti che Apple mette a disposizione per tutti gli sviluppatori. In questo momento a noi serve il componente chiamato Table View Controller. Se digiti la parola “table” nel campo di ricerca vedrai tre componenti: Table View Controller, Table View, e Table View Cell. Sono tre componenti diversi. In questo momento a noi serve Table View Controller, che è l’unico con una icona con sfondo giallo.

Seleziona questo componente e trascinalo al centro della schermata. Dopo aver finito di trascinare il componente, vedrai una schermata molto simile a quella che ti mostro di seguito.

Creare App iOS con Swift - Progetto 1 parte 2 4

Complimenti! Hai appena inserito una tabella nella tua app. Ora dobbiamo solo dare qualche ultimo ritocco all’interfaccia grafica della tabella e poi collegare questo componente con il codice che hai scritto.

So bene che fino ad ora hai visto molti concetti diversi e potresti sentirti un po’ spaesato. Continuo a ripetere che le prime volte è normale. Ma non scoraggiarti, con un po’ di pratica tutte queste nozioni faranno parte del tuo bagaglio personale e questo senso di spaesamento svanirà. Tieni duro!

Diamo gli ultimi ritocchi all’interfaccia grafica

Prima di poter chiudere la storyboard abbiamo bisogno di fare alcuni cambiamenti. Come prima cosa, dobbiamo dire ad Xcode che la UITableViewController che abbiamo inserito nella storyboard è la stessa che abbiamo inserito via codice nel file ViewController.swift.

Per fare questo dobbiamo utilizzare il componente Identity Inspector (View -> Utilities -> Show Identity Inspector per renderlo visibile) che puoi trovare nella barra laterale destra.  Nel campo Class digita il nome ViewController e poi dai conferma.

Creare App iOS con Swift - Progetto 1 parte 2 5

Quello che abbiamo fatto in questo semplice passaggio è stato quello di collegare il codice scritto nel file ViewController con la UITableViewController che abbiamo inserito nella storyboard.

Il secondo passaggio è quello di rendere noto a Xcode che la UITableViewController è la prima schermata che deve essere visualizzata quando si avvia l’app. Per fare questo dobbiamo interagire con l’Attribute Inspector (View -> Utilities -> Show Identity Attribute Inspector per renderlo visibile). Cerca la voce Is Initial ViewController e metti un segno di spunta per attivarlo.

Creare App iOS con Swift - Progetto 1 parte 2 6

Ora vorrei che ponessi la tua attenzione sul Document Outline (te la ricordi? È la schermata che si trova alla sinistra della schermata centrale e si occupa di mostrare tutti i componenti della schermata).

Creare App iOS con Swift - Progetto 1 parte 2 7

Partendo dall’alto, troviamo un View Controller che contiene al suo interno un Table View, che è il componente che rappresenta la nostra tabella. All’interno della tabella troviamo il componente Table View Cell. Esso è responsabile di mostrare una riga di dati all’interno della tabella. Nel nostro caso, questo componente mostrerà il nome dell’immagine.

Seleziona il componente Table View Cell e poni la tua attenzione sulla barra laterale destra. Dovresti vedere un campo chiamato Identifier. All’interno del campo di testo digita Picture. Dal menù a tendina di Style seleziona la voce Basic.

Creare App iOS con Swift - Progetto 1 parte 2 8

Infine aggiungiamo un componente che hai visto spesso in altre applicazioni per iPhone. Non preoccuparti, non è nulla di difficile da inserire o configurare. Il componente in questione si chiama Navigation Controller e certamente avrai avuto modo di vederlo in app come Mail Impostazioni. Esso si occupa di mostrare una barra nella parte superiore della schermata ed è responsabile di gestire il tasto Indietro che si trova nell’angolo in alto a sinistra.

Per inserire il navigation controller all’interno della tua app devi selezionare il componente UITableViewController e poi selezionare dal menù in alto la voce Editor – Embed In -> Navigation Controller. Un nuovo componente verrà inserito nella storyboard, collegato alla nostra tabella tramite una freccia.

Creare App iOS con Swift - Progetto 1 parte 2 9

Bene! Penso che sia arrivato il momento di vedere il risultato di quanto fatto fino ad ora. Premi il bottone Play di Xcode e lancia l’applicazione. Dovresti essere in grado di vedere una schermata diversa dalla precedente. Ora sono presenti delle linee che demarcano le diverse celle della tabella. Inoltre puoi tirare verso l’alto o il basso la schermata e vedere l’effetto rimbalzo quando arrivi al limite superiore o inferiore.

Il prossimo passaggio è quello di mostrare il nome delle immagini all’interno delle celle. Se sei pronto allora prosegui nella lettura.

Indicare il numero di righe della tabella

Il vantaggio di UITableViewController è quello di avere a disposizione una serie di funzioni per interagire con la tabella. Tutte queste funzioni sono state scritte da Apple per noi. Quello che dobbiamo fare è modificare il comportamento di queste funzioni per adattarle a quello che vogliamo ottenere. Ti ho già spiegato in precedenza che modificare delle funzioni scritte da altri prende il nome di override. Per permettere alla tabella di mostrare le nostre celle, dobbiamo fare l’override di due funzioni: una che indica il numero di celle che devono essere mostrate, l’altra che indica alle celle cosa deve essere mostrato.

Per ottenere questo risultato, dobbiamo riscrivere due funzioni specifiche. Essendo nuovo alla programmazione iOS con Swift, questo passaggio potrebbe sembrarti un po’ strano all’inizio. Per essere sicuro che tutti possano seguire i prossimi passaggi, cercherò di spiegare tutto nel dettaglio. Dopotutto questo è il tuo primo progetto!

Iniziamo con il primo metodo, quello che imposta il numero di righe presenti nella tabella. Apri il file ViewController.swift e dopo il metodo viewDidLoad() inizia a digitare la parola numberof. Xcode inizierà a suggerirti una serie di funzioni che potrebbero fare al caso tuo. Seleziona la funzione

 tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

Premi invio per confermare di voler riscrivere questa funzione.

In automatico Xcode scriverà tutto il nome della funzione, anteponendo la parola chiave override. Questo sta ad indicare che stai riscrivendo la funzione che Apple ha definito con l’interfaccia tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int.

Creare App iOS con Swift - Progetto 1 parte 2 9

Lasciami spiegare nel dettaglio il significato di quanto appena scritto:

  • La parola chiave override significa che la funzione è stata già definita da qualcun altro e noi vogliamo modificarne il suo comportamento. Se non riscrivi il comportamento della funzione, viene utilizzato il comportamento originario di essa. In questo caso il comportamento base è quello di dire che ci sono 0 righe nella tabella.
  • La parola chiave func indica l’inizio di un nuovo metodo. “metodo” è il nome che viene dato ad una funzione che si trova all’interno di una classe.
  • Come puoi notare, al metodo vengono passati due parametri. Il primo si chiama tableView e rappresenta la tabella della nostra applicazione. Il secondo parametro invece è chiamato numberOfRowsInSection section: Int. Per spiegare cosa contiene questa variabile, dobbiamo capire cosa fa questo metodo. Il metodo viene chiamato dalla schermata quando vuole sapere quante righe devono essere mostrate nella tabella. Una tabella può essere divisa in diverse sezioni (un esempio lo puoi trovare nell’app Contatti, dove ogni sezione è delimitata da una lettera). Il parametro section ci indica la sezione per la quale avere il numero di righe. Nel nostro caso abbiamo una solo sezione, pertanto ignoreremo questo parametro.
  • Infine, -> Int significa che il metodo deve ritornare una variabile di tipo intero. Questa variabile è il numero che rappresenta la quantità di celle che devono essere visualizzate.

All’interno del metodo dobbiamo scrivere una sola linea di codice: return immagini.count. Questo pezzo di codice serve per fare ritornare dalla funzione il numero di elementi che sono presenti nel nostro array che contiene il nome delle immagini. ùIn poche parole, in questa funzione stiamo ricavando il numero di elementi che sono presenti nell’array “immagini” e lo stiamo facendo ritornare dal metodo. In questo modo, quando la schermata chiederà quante righe mostrare, otterrà come indicazione il numero di elementi dell’array immagini.

Creare App iOS con Swift - Progetto 1 parte 2 10

Indicare cosa deve essere mostrato nelle celle

In precedenza abbiamo riscritto il metodo che indica il numero di righe che devono essere mostrate nella tabella. Ora dobbiamo indicare alla nostra app il contenuto di ogni cella. Per fare ciò dobbiamo riscrivere un secondo metodo. Come prima, inizia a digitare la parola cellforrowat e poi seleziona la voce

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

Creare App iOS con Swift - Progetto 1 parte 2 11

All’interno di questo metodo scrivi queste righe di codice.

Non preoccuparti, ora ti spiegherò tutto quello che ho scritto!

cellForRowAt indexPath: IndexPath è la parte più importante dell’interfaccia del metodo. Il metodo che stiamo riscrivendo viene chiamato dalla schermata quando è necessario mostrare una cella. La cella che deve essere mostrata è indicata dal parametro indexPath, che è di tipo IndexPath. Questo è un tipo di dato che contiene due informazioni: il numero della sezione ed il numero della riga della cella. Nella nostra tabella abbiamo una sola sezione pertanto possiamo ignorare questo campo.

-> UITableViewCell significa che il metodo deve ritornare una cella. Se ricordi bene, ne abbiamo creata una all’interno della tabella tramite Interface Builder ed abbiamo assegnato ad essa l’identificativo Picture.

È qui che entra in gioco un po’ di magia. Se apri l’app Impostazioni del tuo iPhone, puoi notare che all’interno della schermata vengono visualizzate solo 12 righe (questo numero varia a seconda delle dimensioni dell’iPhone).

Per evitare che venga utilizzata CPU e RAM inutilmente, iOS crea solo il numero di righe che vengono visualizzate nella schermata. Quindi, se ad esempio nelle impostazioni sono presenti 40 righe, il sistema operativo costruisce solo le 12 righe che sono visualizzate sullo schermo. Quando scorriamo la pagina ed una riga viene nascosta, questa cella viene riciclata e viene preparata per essere utilizzata da una nuova cella che deve essere mostrata sullo schermo. questo significa che se hai centinaia di celle da mostrare, il sistema operativo non crea tutte le celle contemporaneamente. Quando ti muovi all’interno della tabella il sistema operativo ricicla le celle che non sono più visibili evitando di occupare inutilmente processore e RAM.

Ritornando al nostro codice, ora puoi capire meglio cosa fa la prima riga di codice all’interno del metodo:

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

Stiamo creando una nuova costante chiamata cell chiedendo alla tabella di fornirci una cella riciclata che possiamo riutilizzare. Dobbiamo però indicare l’identificativo della cella che vogliamo utilizzare, perciò dobbiamo inserire il nome Picture che abbiamo indicato in precedenza. Dobbiamo passare anche la variabile indexPath, che verrà utilizzato internamente dalla tabella.

A questo punto abbiamo una cella con la quale possiamo lavorare per mostrare le informazioni richieste. Di default, ogni cella contiene una etichetta di testo. Possiamo utilizzarla per mostrare il nome della nostra immagine.

cell.textLabel?.text = immagini[indexPath.row]

La cella ha una proprietà chiamata textLabel, ma è opzionale. Potrebbe esserci (oppure no) una etichetta di testo. Se utilizzi la cella di sistema, l’etichetta è certamente presente. Puoi anche creare delle celle personalizzate, ma affronteremo questo argomento in un’altra lezione. Invece di controllare se la textLabel è presente, Swift permette di usare il punto di domanda. Questo significa “esegui questa operazione solo se la textLabel è presente, altrimenti passa al prossimo comando”.

Quello che vogliamo fare è impostare il nome di una immagine come testo della label. Ma quale nome inserire? Nella prima cella vogliamo mostrare il primo nome presente nell’array, nella seconda cella il secondo nome e così via. Questo è quello che facciamo in questa riga di codice. indexPath.row contiene la riga che dobbiamo caricare nella tabella. Perciò stiamo andando a caricare il nome dell’immagine che si trova nella posizione indexPath.row all’interno dell’array. Preso questo nome, lo stiamo assegnando come testo alla label.

L’ultima riga serve per ritornare la cella appena formattata. Con queste poche righe di codice abbiamo inserito il nome delle immagini nella nostra tabella. Puoi vedere il risultato di quanto fatto avviando l’applicazione. Se provi a selezionare una cella, noterai che essa si colorerà di grigio e non farà altro. Il nostro obiettivo è quello di visualizzare l’immagine corrispondente.

Creare App iOS con Swift - Progetto 1 parte 2 12

Fino ad ora sei riuscito a visualizzare all’interno della tabella il nome delle immagini che abbiamo caricato in Xcode. Perfetto! Ora il prossimo passaggio è quello di visualizzare l’immagine corrispondente quando si seleziona una cella. Ma penso che anche per questa seconda parte della guida possa andare bene così. Ti ho spiegato molte nozioni e non vorrei sovraccaricarti. Continueremo con questo progetto nella terza ed ultima parte della guida. Per ora rifletti su quanto hai fatto e cerca di mettere in pratica quanto hai imparato. Quando avrai preso coscienza di quanto appreso allora potrai procedere con il corso.

Puoi trovare la cartella di questo secondo progetto e di tutti i futuri progetti a questo link. In questo modo puoi confrontarlo con quanto hai fatto tu. Qualora dovessi avere domande o dubbi su questa prima lezione per creare App iOS con Swift, non esitare a contattarmi tramite la sezione commenti di questo articolo. Trovi l’elenco di tutto il corso al seguente link.

Condividi.

Informazioni autore

Ingegnere Informatico laureato presso il Politecnico di Milano. Appassionato di tecnologia e programmazione. Esperto e utilizzatore dei prodotti Apple ma anche di Android e Linux.

Lascia un commento