Compatibile con Xcode 8

Creare una Collection View in Swift

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Ciao, per caso sai cos’è una Collection View? No?Fine prima parte

Sicuramente, senza averla mai riconosciuta, ne avrai già vista almeno una nel tuo iPhone! È il metodo che usa l’app “Foto” per raccogliere le
immagini presenti nel rullino. Una Collection View, è un sistema per rappresentare degli elementi (che possono essere delle immagini, delle label, ecc) sotto forma di una “griglia”, composta da righe e colonne.

Possiamo dire che le Collection View sono cugine delle famose Table View. Infatti, vedrai che i metodi usati per implementarle sono molto simili tra di loro. Aspetta! non sai cosa sia una Table View? Dai un’occhiata al tutorial di Peppe.

La differenza con le Table View sta tutta nel sistema utilizzato per la rappresentazione dei dati. Se le Table View utilizza delle Celle che vengono impilate tutte una sotto l’altra, le Collection View utilizzano sempre una Cella ma che viene collocata in riga e colonna in base allo spazio messo a disposizione dal display.

Nell’immagine di lato, cioè l’app che creerai a fine tutorial, la collection view è formata da una cella di dimensione uguale alla metà del display dell’iPhone 6S. Tale dimensione permette alla Collection View di mettere due Celle in un’unica riga.

Come ci riesce? non spetta a questo tutorial definirlo. Infatti, una delle potenze della Collection View è che riesce a modificare il numero di colonne in base alla dimensione dello schermo.

Ma vediamo tutto dal punto di vista pratico. Il tutorial è diviso in due sezioni:

  1. La creazione della Collection View con il linguaggio Swift ed il relativo collegamento al codice.
  2. Il segue che permette, grazie ad un click su una determinata cella, di passare ad un nuovo View Controller.

Sei pronto? vediamo come creare una Collection View in Swift!

Aggiungere e modificare una Collection View

Apri Xcode e crea un nuovo progetto. Seleziona “Single View Application”, assegna un titolo, imposta il linguaggio di programmazione su Swift e scegli su quali Device rendere compatibile l’App. Infine, scegli dove salvare il progetto e clicca su “Create”.

New Project

Dal Project navigator, seleziona il file “Main.storyboard”, clicca sul View Controller principale e tramite la la barra del menu di Xcode seleziona Editor > Embed in > Navigation Controller. Assegna un titolo a piacere al Controller appena creato. Questo Navigation Controller, come spiegato in questo tutorial, servirà a gestire la navigazione tra i View Controller.

Embed in navigation controller

Puoi procedere aggiungendo la Collection View tramite l’Object library, poi allargala su tutto lo schermo ed aggiungi le constraints necessarie. Come puoi notare dalla storyboard, Xcode si è accorto che è presente un Navigation Controller e, per questo motivo, crea uno spessore prima della cella.

Aggiunta della Collection View

Fatto ciò, seleziona la Collection View appena creata e tramite il Size inspector modifica a piacere l’altezza e la larghezza della cella (in questo tutorial ho scelto come dimensione 150 e 150). Puoi modificare la larghezza dei margini a 10 (Section Insets), in modo che le celle non siano totalmente attaccate ai bordi dello schermo.

Dimensione margini e cella

Successivamente, seleziona la cella contenuta nella Collection View, e tramite l’Attribute inspector imposta come Identifier “cella”.

Cambiare l'i identifier

Se Identifier ti suona strano, forse è il caso che passi dal tutorial delle table view (ampiamente consigliato prima di passare ad una collection view). In alternativa, se già cominciano ad esserci dei problemi, ascolta il consiglio di Peppe e parti da qualcosa di più semplice.

Dato che utilizzerai una Cella con elementi aggiunti da te, devi creare una nuova classe per la gestione di tale Collection View Cell. Quindi, seleziona File > New File > Cocoa Touch Class e nel campo “Subclass of” seleziona UICollectionViewCell. Per farla riconoscere alla storyboard, seleziona la cella e dall’Identity Inspector, alla voce Class, imposta la classe appena creata.

Aggiungere la classe alla cella

É arrivato il momento di sfogare la tua creatività! Dallo Storyboard personalizza la cella come preferisci, trascinandoci dentro una label, un’immagine, uno slider, o tutto ciò che vuoi!

In questo tutorial, per rendere più semplice possibile la creazione di una Collection Cell, aggiungerai solo un’immagine ed una label. Mi raccomando, non dimenticare di aggiungere le constraints per adattare i vari elementi all’interno della cella! Se vuoi, aggiungi uno sfondo bianco alla label, in modo da rendere il testo più leggibile.

Layout cella

Modifiche fatte?

Il passo successivo è quello di spostarsi nell’Assistant editor e di creare un IBOutlet per ogni elemento aggiunto alla tua cella personalizzata. Quindi, seleziona un elemento per volta e trascinalo verso la classe della tua cella con il tasto destro (oppure presento ctrl + click) per creare l’IBOutlet.

IBOutlet

Hai quasi finito la prima parte! Per completare il lavoro, vai nello Storyboard, apri il Document Outline e selezionando la Collection View trascina col tasto destro, la freccia, verso il View Controller principale, in modo da creare l’outlet per il Delegate e per il Data Source.

Delegate e DataSource

In questo modo dici al View Controller di controllare e gestire il comportamento della tua Collection View.

Dato che Xcode imposta di default lo sfondo delle Collection View sul nero, cambia il colore in bianco, tramite l’Attributes inspector.

Sfondo Collection View

Infine, crea un IBOutlet anche per la Collection View da inserire nel ViewController (chiamalo “collectionView”). Perché te l’ho fatto creare? Lo scoprirai nella seconda parte!

Il codice per il riempimento della Collection View

Modifica il codice della classe (che trovi all’inizio del file “ViewController.swift”) aggiungendo il metodo “Datasource” e “Delegate” appena dichiarati. Il codice che adesso è:

Dovrà diventare:

Non preoccuparti per gli errori che ti segnala Xcode, li sistemeremo subito.

Decidi che tipo di dati vuoi rappresentare nella Collection View. Io prenderò come esempio i prodotti della Apple. Dato che la mia cella include una label ed una immagine, creerò due vettori con le informazioni dei dati da inserire.

Se vuoi, puoi scaricare le immagini che ho utilizzato nel mio progetto qui sotto. Per aggiungerle al progetto, trascinale nel file “Assets.xcassets” presente su Xcode.

[wpdm_package id=’42050′]

Inserisci questo codice prima del metodo viewDidLoad, sia per renderlo accessibile da tutto il View Controller, sia per avere un codice più ordinato. Per riempire le tue celle prenderai i valori da questi array:

Ci rimane soltanto una cosa da fare, ovvero aggiungere i due metodi necessari per il corretto funzionamento delle Collection View, che sono i seguenti:

Bene, è arrivato il momento di compilare ed avviare la tua App. Premi il pulsante col simbolo “Play” in alto a sinistra, oppure premi CMD + R ed ammira il risultato!

Fine prima parte

Se hai avviato l’app nel simulatore dell’iPhone 5, avrai notato che il layout non è uguale al mio. Questo accade perché l’iPhone 5 ha una risoluzione inferiore rispetto a quella dei suoi fratelli maggiori, e di conseguenza può rappresentare meno elementi in una schermata.

Et voilà, qui finisce la prima parte del tutorial! Mi raccomando, se ti senti stanco o confuso prenditi una pausa di 10 minuti, e prosegui con la lettura del tutorial.

Prenditi una pausa!

Nel frattempo che sei in pausa, saremmo davvero felici se contribuissi semplicemente con un mi piace o un follow alle pagine di xCoding.it, oppure registrandoti alla newsletter:

[addtoany]

Grazie davvero :-)

Segue al nuovo View Controller

Eccoci alla seconda parte del tutorial, in cui creeremo un segue che ci permetterà di passare ad un nuovo View Controller contenente maggiori informazioni sull’elemento selezionato. Come? Non hai idea di cosa sia un segue? Dà un’occhiata al seguente tutorial.

Per prima cosa aggiungi un nuovo file, sempre seguendo il procedimento di prima, ma questa volta modifica il campo “Subclass of” in UIViewController, e imposta un nome a piacere.

Dopodiché, apri la StoryBoard ed aggiungi un nuovo View Controller, e personalizzalo come preferisci. In questo tutorial ho scelto di inserire semplicemente una Image View grande quanto tutto lo schermo, ma tu sei libero di aggiungere tutti gli elementi che vuoi! E non dimenticarti di sistemare le constraints :P

Adesso crea un segue dalla Collection View al nuovo View Controller, sempre tenendo premuto il tasto destro, e imposta come metodo “Show”. Fatto ciò, seleziona il segue appena creato, e tramite l’Attributes inspector cambia l’identifier in “mostraImmagine”. Infine, dall’Identity inspector modifica la voce Class nel View Controller che hai creato poco fa.

Creazione segue

Successivamente, crea un IBOutlet per l’immagine a tutto schermo nel nuovo View Controller, chiamandola “sfondo”. Subito dopo, incolla questa riga di codice prima del viewDidLoad per creare una UIImage vuota, che riempiremo tra poco.

Infine, modifica il metodo viewDidLoad per impostare l’immagine di sfondo quando la View viene caricata.

Hai quasi finito! Apri la classe della Collection View ed incolla questo codice, leggendo le spiegazioni per capire cosa faccia ogni singola riga..

Analizziamo il codice appena scritto:

  1. Questo metodo viene chiamato quando viene selezionato un elemento dalla Collection View;
  2. Indichiamo alla View di eseguire il segue denominato “mostraImmagine”;
  3. Questo metodo viene chiamato quando un segue sta per essere eseguito;
  4. Controlliamo che l’identifier del segue in corso corrisponda a “mostraImmagine”;
  5. Recuperiamo l’indexPath, ovvero l’indice che ci permette di rappresentare l’elemento che è stato appena selezionato;
  6. Inizializziamo la variabile contenente le informazioni relative al View Controller che andremo ad aprire;
  7. Impostiamo l’immagine ed il titolo di sfondo del prossimo View Controller;

Sei pronto per il secondo avvio della tua App!
Progetto completo

Conclusioni

Bene, hai ufficialmente finito questo tutorial! Se qualcosa non ti è chiaro fammelo sapere nei commenti, oppure apri un topic nel forum :) Di seguito trovi il link per scaricare il mio progetto completo, nel caso in cui ti sia perso qualche passaggio.

[sociallocker][wpdm_package id=’42070′][/sociallocker]

Buona programmazione!

Start typing and press Enter to search

MessageUI, inviare Email e Messaggi con il linguaggio SwiftCome installare e usare Cocoapods. Velocizza lo sviluppo delle tue applicazioni iOS!