Creare una Table View con ricerca in Swift

Creare una Table View con ricerca in Swift

Mignolo: Yuk, Prof! Che cosa vuoi fare con questa applicazione?
Prof: Quello che provo a fare con tutte le applicazioni, tentare di conquistare il mondo!

Proprio così recita un vecchio proverbio di un famosissimo duo di programmatori (mignolo e Prof). Il loro sogno è sempre stato quello di rilasciare un’applicazione che riuscisse letteralmente a conquistare il cuore di tutti gli Apple’s users.

Tutti i sogni possono essere realizzati e come disse il profeta, perseverare è la chiave del successo.

Qualsiasi applicazione che vorrai realizzare, e dico qualsiasi, per ottenere un minimo di notorietà o comunque permetterti di sbarcare il lunario, deve essere realizzata seguendo alcuni standard e metodologie che ti permetteranno di trasformare il tuo sogno in realtà.

Lo dico spesso a chi legge e a chi segue i miei corsi di programmazione, non ti fare illudere da chi ti dice che per realizzare un’applicazione ti basta solamente leggere un tutorial (come questo) oppure seguire alcuni video su youtube.

Realizzare un’applicazione è un’arte e come arte necessita della giusta preparazione. Per questo la prima cosa che consiglio a chi mi segue è di iniziare con le basi della programmazione e solo dopo iniziare a realizzare la prima applicazione per iOS con Swift.

Funzionamento UITableView

Fatta questa breve, ma dovuta, introduzione (mi piace lasciare un mio personale punto di vista ad ogni tutorial) è arrivato il momento di passare all’atto pratico. Dopo averti introdotto i concetti basilari per la creazione di un progetto per la tua prima applicazione per iPhone è necessario iniziare ad analizzare uno degli strumenti più visti ed utilizzati in un’applicazione, la Table View.

In questo tutorial, ti illustrerò come creare una Table View con ricerca in swift.

Aspetta, cos’è che imparerò?

Traduco in termini più semplici. Quello che farai sarà creare una tabella (come quella dell’applicazione Rubrica o delle Impostazioni di iOS). Nel dettaglio ti guiderò nella realizzazione di un’applicazione per iOS con il linguaggio Swift che utilizzerai per il controllo e la memorizzazione di una lista della spesa.

Una tabella è un oggetto della classe UITableView che puoi immaginare come un foglio a righe. Il foglio si chiama tabella o UITableView. Le righe vengono chiamate, in inglese, Row ed in ognuna di queste righe viene aggiunta una UITableViewCell, cioè una cella, dove la tabella inserirà il contenuto da visualizzare. 

Nella pratica, definito un array di elementi, la tabella:

  • Conterà quanti sono gli elementi presenti nella lista (array.count).
  • Creerà N righe quanti sono gli elementi del sorgente delle informazioni (l’array da cui pescherai i dati).
  • Riempirà ogni riga con una UITableViewCell (cioè il luogo dove effettivamente vedrai il testo).

In più, imparerai ad aggiungere un nuovo elemento nella tabella, a ricercare gli elementi, a mostrare delle liste filtrate in base al testo cercato e a spostarti in una seconda View per la visualizzazione dei dettagli dell’elemento selezionato in tabella.

Sei pronto a creare una Table View con ricerca in Swift? Iniziamo!

Aggiungere una TableView con il TableViewController

Apri Xcode e crea un nuovo progetto (puoi farlo andando su File\New\Project nella barra in alto):

  1. Seleziona, come template, il Single View Application e clicca su Next.
  2. Rinomina il progetto in  “ListaSpesa” e fai attenzione che il Language di programmazione sia Swift e il Devices iPhone.
  3. Clicca su Finish, seleziona la cartella dove salvare il progetto e poi clicca su Create.

Torna al progetto! adesso devi pulirlo da file e elementi che per ora non ti interessano.

Dal Project navigator (il menu a destra dove vengono visualizzati i file) elimina il ViewController.swift (tasto destro, delete e poi move to trash per spostare il file nel cestino). Eliminato il file, entra nel Main.storyBoard ed elimina il View Controller (per eliminarlo, premi i tasti cmd+x). Dovresti avere uno Storyboard senza niente al suo interno, per sicurezza guarda l’immagine animata qui sotto se non ci sei riuscito da solo:

Eliminare il ViewController

Dall’Object Browser (la finestra in basso a destra da dove si selezionano gli oggetti per le View) prendi un oggetto Navigation Controller e trascinalo dentro lo storyBoard.

aggiungere un navigation controller e table view controller

Il Navigation Controller insieme a se stesso trascinerà anche una Table View Controller che sarà la prima View vista all’apertura della tua app.

Cos’è il Navigation Controller?

Il Navigation Controller è un oggetto che sblocca le funzionalità di navigazione tra le varie View della tua applicazione ed è invisibile all’utilizzatore. Se trascinato dall’Object Browser (si può implementare anche in diversi modi), porta con se un Table View Controller il quale sarà lui ad essere visualizzato quando aprirai l’applicazione. Un esempio del suo utilizzo? quando inserisci un Navigation Controller vengono inseriti in maniera automatica i bottoni per tornare indietro tra le View.

IsInitialViewController, il punto di partenza della tua applicazione

Dato che hai eliminato il ViewController, inserito in automatico dal template selezionato per la creazione del progetto, l’applicazione non sa più da quale ViewController deve partire quando avvierai il progetto.

Infatti Xcode, in questo momento, dovrebbe avvisarti di due errori in giallo (non gravi ma da sistemare). Uno di questi è “Scene is unreachable” cioè l’applicazione non sa da dove deve partire.

isInitialViewController per NavigationController

Torna nello storyboard.

Seleziona il Navigation Controller (anche se graficamente è il primo Controller che abbiamo creato, potrebbe non essere l’Initial), vai nell’Attributes Inspector e seleziona la casella Is Initial View Controller:

is initial view controller

A questo punto puoi benissimo avviare la tua applicazione. Vedrai che, come ti dicevo, il NavigationController non verrà visualizzato perché è solamente uno strumento che regola i passaggi tra i ViewController dell’applicazione. Infatti, ciò che vedrai sarà il tuo TableViewController.

L’altro errore in giallo lo sistemerai tra pochissimo.

La classe UITableViewController

Manca il file per la relativa gestione della UITableViewController che hai appena inserito (conterrà anche la gestione della UISearchBar). Crea un nuovo file cliccando con il destro sulla cartella ListaSpesa e selezionate New File… Scegli come file una Cocoa Touch Class e clicca su Next.

Rinomina la classe in ListaTableViewController, impostala come sottoclasse della classe madre UITableViewController e assicuratevi di aver selezionato Swift come linguaggio di programmazione:

Aggiungere una cocoa touch class in swift e Xcode 6

Se non hai le conoscenze basilari di programmazione ad oggetti il file che verrà generato ti sembrerà peggio del famosissimo aramaico antico.

Per questo motivo è necessario avere un pizzico delle suddette conoscenze e pertanto ti invito a leggere questa lezione e le successive: Programmazione ad oggetti in SwiftIn più, queste lezioni, ti mostreranno cosa realmente è la programmazione ad oggetti (almeno spero di riuscirci) e come utilizzarla appieno per progettare un’ottima applicazione.

Non lo faccio per farti perdere tempo o chissà per quale altro motivo, lo faccio semplicemente perché so cosa si prova dall’altro lato quando si cerca di imparare a realizzare qualcosa, magari un sogno.

Collegare la User Interface al codice

Adesso devi associare la classe contenuta nel file ListaTableViewController.swift al TableViewController dello Storyboard. In questo modo non sarà più la classe generica UITableViewController a controllare la tua TableView bensì sarà la tua classe ListaTableViewController ad occuparsene.

Apri il Main.storyboard e seleziona il RootViewController.

Nel menu in alto a destra apri l’Identity Inspector (il terzo bottone partendo da sinistra), metti come Class la ListaTableViewController (dovrebbe spuntarti in automatico appena cominci a scrivere) e premi Invio.

collegare un interfacecontroller ad una classe di riferimento
L’immagine è del vecchio tutorial. I passaggi sono comunque gli stessi.

Da storyboard, clicca due volte sul titolo del Root View Controller e rinominalo in Lista Spesa.

Il Cell Identifier. Come identificare una cella da codice

La tableView che vedi nel tuo storyboard ha anche una UITableViewCell associata. Questa cella viene chiamata Prototype Cell perché, la tabella, prenderà questa cella e la clonerà tante volte quanti saranno gli elementi da mostrare. A queste prototype cell puoi aggiungere degli elementi grafici, come label e bottoni, per personalizzarne il loro aspetto.

Dato che, in una tabella, possono esserci diverse Prototype Cell e dato che dovrai gestirle da codice, è necessario definire un codice identificativo. Così la tabella, grazie a questo codice, saprà quale UITableViewCell utilizzare per la visualizzazione corretta del contenuto.

Il codice Identificativo prende il nome di Identifier. L’Identifier è importantissimo, infatti, l’ultimo errore che ti mostra Xcode è proprio legato alla mancanza di questo identifier.

Seleziona l’unica UITableViewCell presente nel TableViewControllerDall’Attributes Inspector imposta l’Identifier uguale a Cella. Questa stringa la ritroverai più avanti quando vedrai come gestire la tabella da codice:

L'Identifier di una UITableViewCell

La struttura per gli Alimenti

Adesso devi creare una struttura che rappresenterà gli alimenti che l’utente inserirà nella lista. Sarà definita da due attributi, un nome e una categoria.

Clicca con il destro sulla cartella ListaSpesa nel menu del Project Navigator (alla tua sinistra) e seleziona New File… poi premi su Swift File, clicca su Next e salva il file con il nome: Alimento.

Aggiungere un nuovo Swift file

Adesso aggiungi il seguente codice al file:

struct Alimento {
    let categoria : [String]
    let nome : String
}

La struttura che hai creato permetterà all’utente di poter inserire gli alimenti in una determinata categoria. Nota come la costante “categoria” è un array, ho preferito questa scelta perché alcuni alimenti potrebbero rientrare in più categorie diverse.

Così, quando vorrai cercare un elemento, avrai la possibilità di utilizzare, oltre alla classica ricerca per nome, la ricerca degli elementi solo all’interno di una determinata categoria.

Quando gli elementi di un’applicazione si fanno davvero tanti, avere un sistema che filtri i contenuti può farti evitare che gli utenti diano fuoco al proprio dispositivo.

La lista della Spesa e La creazione dell’array

Creata la struttura che rappresenterà l’alimento, serve qualcosa che contenga una serie di alimenti, ad esempio una lista.

La lista sarà rappresentata da un Array di tipo Alimento. Per implementare l’array, apri il file ListaTableViewController.swift e sotto la definizione della classe aggiungi il seguente codice:

var listaSpesa = [Alimento]()

creazione di una lista in swift e Xcode 6

La listaSpesa si occuperà di conservare tutti gli oggetti Alimento che la tua Table View conterrà. Dato che la fame è fame! Devi per forza aggiungere qualche Alimento alla tua lista.

All’interno del metodo ViewDidLoad() aggiungi il seguente codice:

override func viewDidLoad() {
        super.viewDidLoad()
        //inizializzazione di una lista con l'aggiunta di elementi alla lista
        self.listaSpesa = [
            Alimento(categoria: ["Dolci"], nome: "cioccolato"),
            Alimento(categoria: ["Dolci"], nome: "barrette energetiche"),
            Alimento(categoria: ["Dolci", "Altro"], nome: "caramelle"),
            Alimento(categoria: ["Carne","Dolci"], nome: "cotolette"),
            Alimento(categoria: ["Carne"], nome: "polpette"),
            Alimento(categoria: ["Altro"], nome: "dentifricio"),
            Alimento(categoria: ["Altro"], nome: "carta alluminio")
        ]
        
        //aggiorna la tabella ricaricando le funzioni
        self.tableView.reloadData()
    }

Il metodo viewDidLoad(), come suggerisce il nome, viene invocato dopo l’allocazione in memoria del View Controller in questione. In questo modo tutto ciò che viene inserito al suo interno viene caricato insieme alla creazione, e quindi qualche istante prima dell’apparizione della View sullo schermo della tua applicazione.

Il codice all’interno del viewDidLoad inizializza la lista, crea ed instanzia degli alimenti al suo interno. Precisamente aggiunge 3 alimenti di categoria Dolci, 2 di categoria Carne e 2 di categoria Altro. Te lo ripeto, qualora ti stessi chiedendo: ma a che servono? ti rispondo che le categorie saranno importantissime quando ti mostrerò come filtrare gli elementi della lista.

Il metodo reloadData() per la tableView ricarica i dati in tabella invocando i metodi che adesso ti andrò ad elencare e spiegare. Il self serve a specificare che ti stai riferendo all’attributo tableView associata alla classe TableViewController,

self, metodo, oggetto? ti avevo avvertito che molte cose riguardano la programmazione ad oggetti, quindi se ancora non lo hai fatto sei in tempo per imparare le prime nozioni basilari di OOPApprofondisci gli argomenti e non commettere l’errore che fanno tutti.

I metodi per la gestione del TableViewController

Partiamo da cos’è una TableView e da cos’è composta. Per rendere meglio l’idea utilizzerò un’immagine dell’app a tutorial ultimato:

gli elementi che compongono una TableView in Swift

  • Il componente più interno è la UITableViewCell ed è il contenitore che mostra le informazioni all’utente. Dentro una Cell puoi inserire, oltre ad un normale testo, immagini, ulteriori campi di testo, altre sotto view e tutto ciò che più ti aggrada.
  • Una Cell è contenuta all’interno di una Row (riga). Una Table View può avere una o più di una Row. Ogni riga possiede un index (indice) numerico intero e la numerazione delle righe parte dall’alto verso il basso (la riga in alto ha valore 0).
  • Le righe a loro volta sono contenute all’interno di una Section. Una Table View può avere più section e ogni section ha una sua personale collezione di righe, ognuna indipendente dalle altre section. Anche le Section vengono numerate seguendo un indice numero intero.

Fatta questa premessa, passiamo ad analizzare come vengono riempite le section, row e cell.

numberOfRowsInSection: Definire il numero di righe della TableView

Esistono due metodi creati a tale scopo che si chiamano numberOfSectionInTableView e numberOfRowsInSection. Sotto il metodo viewDidLoad aggiungi il seguente codice:

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

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

La numberOfSectionsInTableView viene invocata prima della creazione delle righe della tabella. Ogni tabella può contenere più sezioni e questo metodo definisce il numero di sezioni di una tabella. Il return 1 imposta una Section alla Table View.

La numberofRowsinSection viene invocata dalla Table View prima del riempimento delle righe e ritorna il numero di righe che deve contenere la sezione. Dato che la tabella mostrerà un alimento della lista, per ogni riga, allora le righe della Table View devono essere uguali al numero di elementi dell’array listaSpesa.

cellForRowAtIndexPath: Riempire le righe di una Table View con una cell

Adesso hai sia 1 sezione che al suo interno ha un numero di righe uguali a quello del numero d’elementi dell’array.

L’ultimo metodo che manca all’appello è il cellForRowAtIndextPath ed è colui che inserisce una Cell all’interno di ogni riga della TableView:

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        //cerca una cella con identifier uguale a "Cella" e ne recupera un'istanza
        // L'IDENTIFIER VIENE IMPOSTATO DALLO STORYBOARD
        let cella = self.tableView.dequeueReusableCellWithIdentifier("Cella", forIndexPath: indexPath)
        
        //ricavo un oggetto Alimento dalla lista in posizione row (il num di riga) e lo conservo
        let alimento = self.listaSpesa[indexPath.row]
        
        //riempio la cella assegnando ad una label testuale il nome dell'alimento
        cella.textLabel?.text = alimento.nome
        cella.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator // questo accessorio aggiunge il bottone a forma di freccia che punta verso destra (utile per indicare che cliccando la vista si sposta in un altro VC)
        
        return cella
    }

come funziona la cellForRowAtIndexPath?

La cellForRowAtIndexPath viene invocata ciclicamente. Parte dalla Row 0 (riga 0) e esegue lo stesso codice, scorrendo il numero di Row, per un numero di volte pari a IndexPath.count (il numero di righe della tabella). Quindi se IndexPath = 0 è la prima riga in alto, mentre se IndexPath = n è l’ultima riga.

Ad ogni ciclo viene ritornata una UITableViewCell, dal metodo dequeuReusableCellWithIdentifier, che verrà “incollata” alla riga di posizione IndexPath.

Il metodo cellForRowAtIndexPath viene ripetuto tante volte quante sono le righe della Table View. Nel frattempo, utilizziamo una textLabel, cioè una UILabel dove mettere del testo (il nome dell’alimento).

Il primo Build & Run. Era anche ora!

Salva e prova l’applicazione premendo Build & Run (Il bottone triangolare in alto a sinistra). Olè! La Table View mostra tutti gli elementi della lista:

primo run applicazione tableview iOS e swift

Se vuoi investigare maggiormente l’utilizzo delle tabelle e avere una visione più dettagliata di questi metodi e del loro utilizzo, puoi farlo acquistando il mio corso di sviluppo applicazioni iOS con il linguaggio Swift.

prenditi una pausa

Sei a metà di un tutorial composto da quasi 5000 parole. In questi casi ti consiglio di prende una pausa di almeno 10 minuti, nel frattempo puoi fare una partita a League of Legends, cazzeggiare o uscire. Fai un po’ quello che ti pare ma se inizi ad essere confuso non continuare con il tutorial.

condividi xCoding

Nel frattempo che sei in pausa sarei davvero felice se contribuissi al mio progetto semplicemente mettendo un mi piace, follow alle mie pagine oppure registrandoti alla newsletter:

[mailmunch-form id=”101287″]

[addtoany]

Grazie davvero :-)

SearchBar e ricerca in tabella

Pausa fatta? ora sei nella seconda parte, quella dedicata alla ricerca di un elemento in lista.

Per creare una barra di ricerca o Search Bar è necessario utilizzare un oggetto chiamato UISearchController che gestisce l’interfaccia di ricerca e il modo in cui gli oggetti vengono ricercati all’interno di una collezione qualsiasi come un array o dizionario.

Fai attenzione perché quest’oggetto non è specifico della Table View ma è utilizzabile in qualsiasi contesto e situazione. In questo tutorial mi limito ad applicarlo ad una Table View ma ricordati che puoi utilizzarlo anche per progetti futuri. Se, per esempio, prendi l’applicazione di iOS Impostazioni il SearchBarController è quella barra in alto che ti permette di cercare velocemente tra le impostazioni dell’iPhone/iPad.

Apri il file ListaTableViewController.swift e sotto la definizione della classe aggiungi (sotto la var listaSpesa):

var resultSearchController: UISearchController?

Dato che la search bar non la inserirai da storyboard ma da codice, all’interno del metodo viewDidLoad, aggiungi:

        self.resultSearchController = ({
            // creo un oggetto di tipo UISearchController
            let controller = UISearchController(searchResultsController: nil)
            // rimuove la tableView di sottofondo in modo da poter successivamente visualizzare gli elementi cercati
            controller.dimsBackgroundDuringPresentation = false

            // il searchResultsUpdater, ovvero colui che gestirà gli eventi di ricerca, sarà la ListaTableViewController (o self)
            controller.searchResultsUpdater = self

            // impongo alla searchBar, contenuta all'interno del controller, di adattarsi alle dimensioni dell'applicazioni
            controller.searchBar.sizeToFit()
            
            // atacco alla parte superiore della TableView la searchBar
            self.tableView.tableHeaderView = controller.searchBar
            
            // restituisco il controller creato
            return controller
        })()

Dato che il metodo viewDidLoad, come già visto per la listaSpesa, serve ad inizializzare qualcosa prima che l’app venga visualizzata, in questo caso, inizializzerà il searchController prima dell’apertura dell’app.

Il SearchController è una sorta di ViewController simile per le caratteristiche a quella della UITableViewController di cui ti ho parlato poc’anzi. L’inizializzazione di questo oggetto avviene tramite il costruttore principale che vuole come unico parametro (searchResultsController) il Controller che gestirà la visualizzazione degli elementi cercati. Dato che gli elementi cercati saranno visualizzati nella TableViewController, e la SearchController si trova dentro la classe ListaTableViewController, non c’è bisogno di passargli il suo riferimento.

Non confondere il SearchController con la Search Bar. Quest’ultima è contenuta all’interno del Controller. Un po’ come se fosse un elemento interno. Quindi il Controller è il contenitore o colui che gestisce gli eventi di ricerca e la visualizzazione in sé, mentre la Search Bar vera e propria, per intenderci la barra dove inserirai i dati, è un elemento contenuto all’interno del Search Controller.

Con il sizeToFit fai in modo che la Search Bar si estenda per intero per tutta la larghezza del dispositivo.

Mentre la riga:

self.tableView.tableHeaderView = controller.searchBar

Aggiunge la SearchBar alla barra superiore della TableView ed è proprio quest’ultimo passaggio a far in modo che la barra venga visualizzata.

Se ti compare un errore, non preoccuparti! verrà corretto nel prossimo paragrafo.

Il codice che ti ho appena mostrato si trova all’interno di un blocco di istruzioni che viene definito Closure, ti faccio notare come la conoscenza di un linguaggio è fondamentale per la buona riuscita di un progetto.

UISearchResultsUpdating e updateSearchResultsForSearchController

Per permettere, alla classe ListaTableViewController, di rispondere ai metodi di ricerca e trattare la Search Bar devi implementare il protocol UISearchResultsUpdating alla classe ListaTableViewController. In questo modo la classe ListaTableViewController sarà delegata alla gestione degli eventi della Search Bar.

Apri il file ListaTableViewController.swift e cambia la definizione di classe con la seguente:

class ListaTableViewController: UITableViewController, UISearchResultsUpdating {

UISearchResultsUpdating permette di aggiornare il Search Controller in base agli eventi che l’utente genera scrivendo o interagendo con la Search Bar.

Infine, aggiungi il metodo updatesearchResultsForSearchController che verrà attivato ogni qual volta l’utente cliccherà sulla barra di ricerca:

    func updateSearchResultsForSearchController(searchController: UISearchController) {
        print("Sto per iniziare una ricerca")
    }

 

Se adesso avvii l’applicazione, vedrai comparire la barra di ricerca e, se ci cliccherai, vedrai che verrà invocato il metodo updateSearchResultsForSearchController che stamperà sulla console il messaggio del print:

secondo run applicazione tableview iOS e swift

Filtrare gli elementi della TableView

Adesso è arrivato il momento di stravolgere un po’ le cose!

Sotto la definizione della variabile che gestisce la lista, aggiungi la variabile listaFiltrata che conterrà gli elementi della ricerca:

var listaFiltrata = [Alimento]()

Subito dopo implementa il metodo per la ricerca degli elementi:

    func filtraContenuti(testoCercato: String, scope: String = "Tutti") {
        print("sto filtrando i contenuti")
        listaFiltrata.removeAll(keepCapacity: true)
        for x in listaSpesa {
            var justOne = false
            for (_, categoria) in x.categoria.enumerate() {
                if (scope == "Tutti" || categoria == scope) {
                    if((x.nome.rangeOfString(testoCercato.localizedLowercaseString) != nil) && justOne == false) {
                        print("aggiungo \(x.nome) alla listaFiltrata")
                        listaFiltrata.append(x)
                        justOne = true
                    }
                }
            }
            self.tableView.reloadData()
        }
    }

Il metodo, che ho creato, filtra gli elementi della ListaSpesa in base al testoCercato e allo Scope.

  1. Il testoCercato è il testo che inserirai nella TextField della SearchBar.
  2. Lo Scope (che ti mostrerò successivamente) sono dei bottoni che appaiono sotto la SearchBar che ti permettono di scegliere quale filtro applicare alla ricerca (ad esempio: ricerca solo sulla categoria Dolci ecc).
    Di default il valore della funzione associato allo Scope è impostato su “Tutti”, infatti quando non verrà selezionato uno Scope allora la funzione cercherà all’interno di tutte le categorie.

La funzione, prima rimuove, qualora vi fossero, tutti gli elementi precedentemente inseriti nell’array listaFiltrata e ne mantiene la capacità (la dimensione). Poi passa ad iterare tutti gli oggetti Alimento presenti nel vettore listaSpesa. Il ciclo all’interno, enumera le categorie dell’Alimento iterato, verifica se lo scope è impostato su Tutti oppure su uno dei bottoni e, se lo è, allora controlla che il testoCercato è uguale a quello dell’Alimento. Se il testoCercato corrisponde al nome dell’Alimento allora viene inserito nella listaFiltrata se no va avanti al ciclo successivo.

Infine, inserisci una chiamata di questa funzione all’interno del metodo updateSearchResultsForSearchController:

 

    func updateSearchResultsForSearchController(searchController: UISearchController) {
        self.filtraContenuti(searchController.searchBar.text!, scope: "Tutti")
    }

 

Mostrare gli elementi filtrati nella TableView

Se hai provato ad avviare nuovamente la tua app ti sarai accorto di come essa non mostra l’elemento cercato! Questo perché non hai aggiornato la visualizzazione degli elementi nella Table View.

La Table View non sa quando mostrare gli elementi filtrati e quando no. Per risolvere questo problema devi modificare sia il metodo che gestisce il numero di righe (numberOfRowsInSection) che quelle del contenuto delle righe (cellForRowAtIndexPath):

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // se la search bar viene visualizzata allora ritorno il numero di elementi della lista filtrata se no quelli della lista spesa
        guard let controller = self.resultSearchController else {
            return 0
        }
        
        if controller.active {
            return self.listaFiltrata.count
        } else {
            return self.listaSpesa.count
        }
    }
    
    
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        //cerca una cella con identifier uguale a "Cella" e ne recupera un'istanza
        let cella = self.tableView.dequeueReusableCellWithIdentifier("Cella", forIndexPath: indexPath)
        
        
        var alimento : Alimento
        
        // se viene la Search Bar è attiva allora utilizza l'elemento con indice visualizzato a partire dalla listra Filtrata
        if self.resultSearchController!.active {
            alimento = listaFiltrata[indexPath.row]
        } else {
            //ricavo un elemento della lista in posizione row (il num di riga) e lo conservo
            alimento = self.listaSpesa[indexPath.row]
        }
        
        //riempio la cella assegnando ad una label testuale il nome dell'alimento
        cella.textLabel?.text = alimento.nome
        cella.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator
        
        return cella
    }

Adesso se provi a cercare un alimento, scrivendo sulla search Bar, dovresti vedere i risultati nella Table View:

terzo run applicazione tableview iOS e swift

La Scope Bar e filtri per categoria

Poter cercare gli elementi solo in una determinata categoria, in alcuni contesti, può diventare di vitale importanza. Pensa ad esempio quando vuoi cercare una persona in una provincia. Un conto è cercarlo in tutte le province un conto è cercarlo solo in una determinata provincia.

Per inserire una Scope Bar ti basta aggiungere il seguente codice alla closure con cui hai creato il resultSearchController:

            // aggiungo gli scope button alla Search Bar
            controller.searchBar.scopeButtonTitles = ["Tutti", "Dolci", "Carne", "Altro"]

Gli Scope Button Titles, dato che voglio cercare all’interno di una specifica categoria, sono uguali a quelli delle tue categorie: Tutti, Dolci, Carne e Altro (“Tutti” anche se non fa parte delle categorie, dal codice, ti permetterà di cercare in tutte le categorie).

Modifica il metodo updateSearchResultsForSearchController sostituendogli il codice con il seguente:

    func updateSearchResultsForSearchController(searchController: UISearchController) {
        print("Sto per iniziare una ricerca")
        let scopes = resultSearchController!.searchBar.scopeButtonTitles
        let currentScope = scopes![resultSearchController!.searchBar.selectedScopeButtonIndex] as String
        self.filtraContenuti(searchController.searchBar.text!, scope: currentScope) // chiamo la funzione di ricerca del testo
    }

Adesso quando starterai l’app avrai la possibilità di ricercare gli elementi solo in una particolare categoria. Ricordati però che prima devi selezionare la categoria e poi cercare:

App lista in Swift e Xcode con Table View e Search Bar

Il prepareForSegue: Mandare una informazione ad un altro ViewController

Andrò un po’ più veloce perché questi concetti che ti andrò ad illustrare li ho spiegati nel dettaglio in questo tutorial: Passare le informazioni tra più ViewController.

Potremmo terminare il progetto anche qua, però… a mio modesto parere non è ancora del tutto completo.

Una cosa che molte applicazioni di questo genere hanno è la possibilità di vedere i dettagli di un oggetto della Table View. In pratica, una volta che selezioni un oggetto nella tabella hai la possibilità di spostarti in un’altra finestra dove visualizzarne i dettagli.

Per questo motivo ti serve un View Controller in più che mostri i dettagli dei prodotti della lista quando l’utente seleziona un elemento dalla Table View. Trascina un oggetto View Controller nello Storyboard (Allo stesso modo di quanto hai fatto con il NavigationController).

segue mandare informazioni ad altra view

Se ci fai caso, il Navigation Controller è collegato con il TableViewController da una freccia mentre il ViewController appena inserito non lo è con il TableView. Il collegamento tra due Controller si chiama Segue ed è quello che permette di spostarsi da una View all’altra.

Per creare un Segue, seleziona il Table View Controller e premendo Ctrl+click sinistro, trascina la freccia verso il nuovo View Controller. Si aprirà un menu dove dovrai selezionare show come tipo di Segue (lo show non è altro che l’animazione che intercorre tra il passaggio da una View all’altra):

Creare un nuovo VC e Segue per TableView

Inoltre l’operazione di collegamento tra View fa in modo che il ricevente del collegamento acquisisca anche le proprietà del Navigation Controller, in questo modo, ad esempio, non dovrai inserire il bottone “torna indietro” perché lo aggiungerà automaticamente grazie al collegamento implicito con il Navigation Controller.

Crea un nuovo File di Tipo Cocoa Touch. Chiamalo DetailViewController ed impostalo come subclass della UIViewController. Allo stesso modo di quanto hai fatto per la tabella, seleziona il VC appena inserito e cambiagli la custom class:

nuovo file e custom class per VC

Il Segue Identifier

Apri, per l’ultima volta, lo storyBoard. Seleziona la freccia che va dalla TableViewController al View Controller che conterrà i dettagli e, sempre dall’Attributes Inspector, rinomina l’Identifier del segue in dettaglioAlimentoSegue:

identifier segue

Torna alla ListaTableViewController.swift e aggiungi i seguenti metodi:

    //se viene selezionato una riga della tabella attiva il segue per spostarti nella View dei Dettagli
    override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        self.performSegueWithIdentifier("dettaglioAlimentoSegue", sender: tableView)
    }
    
    //quando viene attivato il segue setta il titolo della View di Dettaglio in base al nome 
    //dell'elemento o cercato o selezionato
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {
        if segue.identifier == "dettaglioAlimentoSegue" {
            let alimentoDetailViewController = segue.destinationViewController as! DetailViewController
            let indexPath = self.tableView.indexPathForSelectedRow()!
            if self.resultSearchController.active {
                let TitoloDestinazione = self.listaFiltrata[indexPath.row].nome
                alimentoDetailViewController.title = TitoloDestinazione
            } else {
                let TitoloDestinazione = self.listaSpesa[indexPath.row].nome
                alimentoDetailViewController.title = TitoloDestinazione
            }
        }
    }

Considerazioni e Download del progetto

Creare una Table View con ricerca in Swift non è stato per niente difficoltoso (certe volte so essere simpatico anche io :D). A parte gli scherzi, conoscere il linguaggio Swift e come si sviluppano le applicazioni per iOS con Swift può aiutarti sensibilmente a comprendere tutti i passaggi del progetto.

Ricordati che il modulo di ricerca può far si che la tua applicazione abbia successo oppure no. Fidati, tantissime applicazioni sono fallite perché non permettevano di cercare all’interno dell’applicazione. Infatti applicazioni che permettono di gestire liste o promemoria ce n’è a bizzeffe ma quelle che hanno successo sono veramente poche, il motivo io lo attribuisco alla velocità con cui si può accedere alle informazioni (oltre alla grafica è all’usabilità).

Un utilizzatore medio non vuole vedere 400 bottoni o aspettare mezz’ora per cercare una cosa, vuole semplicemente utilizzare l’app senza troppi sforzi!

Dove andare da qui

I tutorial che adesso ti consiglio di fare, seguendo l’ordine, sono:

  1. Creare un’App lista in Swift – Aggiungere ed eliminare elementi da una Table View
  2. Creare un Promemoria in Swift per iOS
  3. Passare informazioni da View a View in Swift 
  4. Tutorial Core Data in Swift, salvare oggetti nel dispositivo

Scaricare il progetto finale

Se hai avuto problemi con il tuo progetto, qui sotto puoi scaricare quello fatto da me (devi sbloccare il modulo):

[sociallocker]

DropBox Download

[/sociallocker]

Buona Programmazione!

Come creare una applicazione di Foto Editing per iOS con Swift

Come creare una applicazione di Foto Editing per iOS con Swift.

Ammettiamolo, molti mostri si tramutano in principi e principesse grazie all’applicazione di un filtro fotografico o grazie ad un tocco di foto editing. Spesso i filtri riescono a dare quel tocco in più di dinamismo e vitalità ad una foto che altrimenti, nell’era del “bello visivo” passerebbe inosservata.

Tantissime sono le applicazioni che hanno fatto del Foto Editing il loro cavallo di battaglia. Pensa, per esempio, ad Enlight o allo stesso Istagram. Tant’è che anche la stessa Apple, già da diverse versioni di iOS, permette la modifica delle foto e l’aggiunta di filtri fotografici ad un’immagine.

Le immagini sono lo strumento comunicativo del nostre tempo. Più in là saranno sicuramente i video a far da padrone alla comunicazione, ma sino ad allora, se vuoi salire in groppa al cavallo del vincitore e stai provando a creare una applicazione di Foto Editing per iOS con il linguaggio Swift, non puoi non aggiungere i Filtri fotografici alla tua App.

Se lo stai pensando, no, non è assolutamente vero che il Foto Editing è complicato. Anzi, per certi aspetti è davvero semplice per via di semplificazioni fornite da pacchetti, meglio conosciuti come Framework, che svolgeranno gran parte del lavoro complicato.

Cominciamo da qualcosa di semplice. Rispondiamo alla prima domanda fondamentale. Cos’è un filtro fotografico?

Un filtro è l’applicazione di uno strato di colore sopra ad una foto. Il colore desiderato verrà fuso insieme agli altri presenti nell’immagine alterandone la percezione naturale.

Dato che esistono tantissimi modi di fare foto editing, in questo tutorial voglio affrontare solo l’applicazione di tre filtri fondamentali: Bianco e Nero, Seppia ed uno Casuale. Quindi, l’obiettivo di questo tutorial sarà insegnarti a creare una semplice applicazione in cui, data una fotografia, potrai applicare uno di questi tre filtri.

Creare una applicazione di foto editing per iOS

Il tutorial prevede una conoscenza discreta del linguaggio Swift, se sei un nuovo sviluppatore, puoi seguire il mio corso gratuito sul linguaggio Swift prima di cominciare questo progetto.

Sei pronto a creare la tua prima app di foto editing? Allora cominciamo!

Il Setting del progetto

Apri Xcode e crea un nuovo progetto Single View per iPhone. Dai un nome al tuo progetto, assicuratevi di aver selezionato il linguaggio Swift come linguaggio e premi Next. Seleziona una cartella in cui posizionare il progetto e, infine, premi su Create.

Per prima cosa, scarica quest’immagine e trascinala all’interno del tuo progetto. Ti si aprirà un menu il quale ti chiederà alcune impostazioni per l’importazione dell’immagine. Tra queste, l’unica che devi selezionare è Copy Item if needed:

Importare immagine dentro progetto xCode

Entra nel main.storyBoard, aggiungi una UIImageView al centro della View principale e ridimensionala in modo da riempire tutto lo schermo. Adesso selezionala e crea quattro vincoli di Auto Layout:

  1. Equal Width ed Equal Height con la view principale.
  2. Center Horizontally e Center Vertically sempre con la view principale.

Aggiungere una UIImageView e vincoli Auto Layout

Cos’è l’Auto Layout? è il sistema che si utilizza per creare applicazioni con un’interfaccia universale ed adattabile alle dimensioni dei diversi dispositivi (iPhone e iPad).

Nella gif sopra ho impostato l’immagine alla UIImageView. Infatti, una volta portata dentro il progetto, l’immagine può essere selezionata dall’Attributes Inspector (il menu di destra) dall’attributo Image.

Dato che l’immagine può avere dimensioni differenti rispetto all’area occupata dalla UIImageView puoi cambiare la modalità di visualizzazione e di ridimensionamento dell’immagine. Io ho scelto la Aspect Fit che mostrerà l’immagine nelle sue dimensioni naturali. Essendo più grande dell’area della UIImageView verrà visualizzata leggermente tagliata. Se utilizzi altri immagini, cambia la proprietà Mode.

Se invece ti stessi domandando come importare un’immagine dal rullino o direttamente dalla fotocamera, ho scritto un tutorial che fa al caso tuo.

Adesso mancano i bottoni per la scelta del filtro da applicare. Aggiungi una Stack View di tipo orizzontale nella parte inferiore dell’applicazione e aggiungi tre bottoni che rinominerai in Seppia, Bianco e Nero e Casuale. Anche per la stack, imposta dei vincoli di Auto Layout e la dislocazione corretta degli elementi all’interno della stack:

Stack View orizzontale e bottoni

Se hai dei problemi con la realizzazione di quest’interfaccia o del progetto, in fondo alla pagina trovi il download dell’app completa.

Le IBOutlet e IBAction

Adesso non ti resta altro che collegare l’interfaccia con il tuo ViewController per iniziare a scrivere il codice per l’aggiunta dei filtri.

Crea una IBOutlet per l’ImageView rinominata in “myImageView”. (Se non sai di cosa sto parlando guarda questa mia guida). Per i tre bottoni, dato che svolgeranno delle operazioni, crea tre rispettive IBAction chiamate “addFiltroSeppia_clicked”, “addFiltroBiancoNero_clicked” e “addFiltroCasuale_clicked”:

aggiungere IBOutlet e Action per app Filtri foto

Il codice finale dovrebbe risultare uguale a quello che vedi qui sotto (ricordati che devi comunque collegare il codice all’interfacci anche se copi ed incolli il seguente codice):

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var myImageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func addFiltroSeppia_clicked(sender: UIButton) {
        
    }
    
    @IBAction func addFiltroBiancoNero_clicked(sender: UIButton) {
        
    }
    
    @IBAction func addFiltroCasuale_clicked(sender: UIButton) {
        
    }

}

Aggiungere un filtro fotografico con la classe CIFilter

Ad inizio tutorial ti ho detto che creare una applicazione di Foto Editing per iOS è relativamente semplice. Lo è perché esiste un framework, cioè un insieme di classe predefinite, chiama CoreImage che ti mette a disposizione delle funzioni per l’alterazione delle immagini.

La classe da cui partirai si chiama CIContext, ovvero CoreImageContext. Devi sapere che qualsiasi alterazione ad un’immagine non viene mai fatta direttamente sull’immagine vera e propria bensì su una copia invisibile. Tale copia viene conservata e gestita dal CIContext che fa manager di tutte le modifiche effettuate ad una foto.

Il costruttore dell’oggetto CIContext ha diversi parametri, quello che utilizzeremo noi ha per parametro un dizionario di AnyObject per chiave e valore. Tale dizionario serve a definire delle opzioni per il CIContext. Dato che è opzionale, noi passeremo nil come valore.

Dato che un oggetto CIContext verrà utilizzato per la creazione di tutti i filtri, sotto la definizione della classe ViewController, aggiungi un nuovo attributo con un’istanza di tale oggetto:

let context = CIContext(options: nil)

Quando utilizzi i filtri, o le altre funzionalità del CoreImage framework, non puoi lavorare con le semplice UIImage (cioè il tipo di dato che contiene l’immagine che adesso hai nella UIImageView), bensì devi utilizzare un tipo apposito chiamato CIImage.

Una volta trasformata una UIImage in CIImage è possibile applicargli un filtro o qualsivoglia modifica.

I filtri fotografici sono gestiti dalla classe CIFilter. Il costruttore di tale oggetto vuole come parametro il codice identificativo del filtro. Una volta creato un filtro, può essere applicato all’immagine (non l’originale ma la CIImage) utilizzando il metodo setValue(value: AnyObject?, forKey: String) che come primo parametro accetta l’immagine a cui applicare il filtro e, come secondo, una stringa che identifica come questo filtro deve trattare l’immagine passata.

Una volta applicato il filtro, questo cambiamento deve essere tramutato in immagine e, pertanto, bisogna creare una nuova immagine partendo da quella che ha generato. Per farlo si utilizza un metodo della classe CIContext chiamato createCGImage che come parametri in ingresso richiede l’output dell’immagine con il filtro applicato e le dimensioni della nuova immagine da creare.

Infine, l’immagine CIImage restituita dal context, può essere finalmente passata alla UIImageView (semper dopo un’opportuna trasformazione da CIImage in UIImage).

Capita la teoria, la pratica è un gioco da ragazzi! Comunque, se dovessi avere dei problemi nella comprensione del codice o di alcuni passaggi, non esitare a lasciare un commento in fondo alla pagina.

Filtro Bianco e Nero

Aggiungi il seguente codice all’interno del metodo addFiltroBiancoNero_clicked:

    @IBAction func addFiltroBiancoNero_clicked(sender: UIButton) {
        let immagineInput = CIImage(image: self.myImageView.image!)
        
        let filtro = CIFilter(name: "CIPhotoEffectNoir")
        filtro!.setValue(immagineInput, forKey: kCIInputImageKey)
        
        let immagineModificata = context.createCGImage(filtro!.outputImage!, fromRect: filtro!.outputImage!.extent)
        
        let nuovaImmagine = UIImage(CGImage: immagineModificata)
        self.myImageView.image = nuovaImmagine
    }

Filtro Bianco e Nero con CoreImage Filter swift

Filtro Seppia

Il filtro seppia ti permette di definire anche la forza dell’effetto. Puoi cambiarla a tuo piacimento utilizzando il setValue alla chiave kcIInputIntensityKey:

    @IBAction func addFiltroSeppia_clicked(sender: UIButton) {
        let immagineInput = CIImage(image: self.myImageView.image!)
        
        let filtro = CIFilter(name: "CISepiaTone")
        filtro!.setValue(immagineInput, forKey: kCIInputImageKey)
        filtro!.setValue(0.5, forKey: kCIInputIntensityKey)
        
        let immagineModificata = context.createCGImage(filtro!.outputImage!, fromRect: filtro!.outputImage!.extent)
        
        let nuovaImmagine = UIImage(CGImage: immagineModificata)
        self.myImageView.image = nuovaImmagine
    }

Filtro seppia Core Image e Swift

Filtro Casuale

Per la generazione del filtro casuale ti farò vedere un sistema alternativo. Utilizzerai il metodo imageByApplyngFilter della CIImage al quale applicherai il filtro HueAdjust (immaginalo come un “modificatore di colori”) a cui passerai un numero random che, per semplicità, creerà un colore casuale da applicare.

    @IBAction func addFiltroCasuale_clicked(sender: UIButton) {
        let immagineInput = CIImage(image: self.myImageView.image!)
        
        let coloreRandom = [kCIInputAngleKey: (Double(arc4random_uniform(314)) / 100)]
        
        let immagineFiltrata = immagineInput!.imageByApplyingFilter("CIHueAdjust", withInputParameters: coloreRandom)
        
        let immagineFinale = context.createCGImage(immagineFiltrata, fromRect: immagineFiltrata.extent)
        
        self.myImageView.image = UIImage(CGImage: immagineFinale)
    }

Filtro casuale Core Image swift

 Conclusione e Download del progetto

In questa prima parte sei riuscito a creare una applicazione di foto editing per iOS mediante l’utilizzo di semplici classi fornite dal framework Core Image.

L’app però è ancora prematura e richiede delle migliorie. Puoi provare a farlo come esercizio. Prova ad aggiungere la possibilità di ritornare indietro nelle modifiche effettuate e ad aggiungere dei preview degli effetti vicino ai bottoni per la selezione del filtro.

Infine, se vuoi scaricare il mio progetto, sblocca il seguente modulo:

[sociallocker]

Download[wpdm_package id=’1127′]

[/sociallocker]

Buona Programmazione!

Introduzione all’Auto Layout in Xcode 8. La Guida Definitiva!

auto-layout-in-xcode-la-guida-definitiva

Cos’è l’Auto Layout in Xcode?

L’Auto Layout è come quella ragazza o ragazzo che hai sempre desiderato e voluto conquistare. Se trovi la chiave giusta per sedurla/o, il gioco è fatto. Tu ti innamorerai di lei e lei si innamorerà di te. Se invece, ti approccerai nel modo sbagliato, ti ritroverai nei panni di Paolo e Francesca raccontati dalla quinta cantica dell’Inferno.

Ma torniamo a noi.

L’Auto Layout è uno strumento che permette di creare interfacce grafiche che si adattano, in maniera automatica, alle dimensioni dei display Apple.

Quindi mi stai dicendo che la grafica che inserisco nello Storyboard non va bene per tutti i dispositivi?

Purtroppo no. Gli iPhone, come gli iPad, hanno dimensioni di schermo (Area in Point) differenti. Quando utilizzi lo Storyboard ti fa lavorare con le dimensioni di un tipo di iPhone e, dato che inserirai gli elementi in quel suo sistema di riferimento geometrico, cambiando il dispositivo cambierà il sistema di riferimento.

Detta semplice semplice, l’interfaccia risulterà distorta in tutti i dispositivi. L’Auto Layout risolverà questo problema.

Con l’Auto Layout potrai realizzare una sola interfaccia che si adatti sia alle dimensioni dell’iPhone 6C che a quelle dell’iPhone 7 Plus. O addirittura un’interfaccia che vada bene sia per tutti i tipi di iPad che per tutti i tipi di iPhone.

Sogni che diventano realtà.

Cos'è l'Auto Layout in Xcode

Ciò che vedi nell’immagine è il layout del progetto che creerai a fine lezione.

Premessa fatta, sei pronto ad entrare nel fantastico mondo dell’Auto Layout?
Allora cominciamo!

Questo tutorial è un estratto di un intero modulo del mio corso di sviluppo applicazioni iOS con il linguaggio Swift.

Tutto parte dal progetto

Per prima cosa crea un nuovo progetto iOS\Single ViewChiamalo Principi di Auto Layout e questa volta, prima di andare oltre, dai uno sguardo all’opzione Devices.

Ricordati che, Devices ti permette di scegliere il dispositivo su cui girerà l’applicazione (lo puoi comunque cambiare dal pannello General dell’Info Project). Nel particolare se scegli:

  • iPhone: Crei un progetto di un’applicazione che funzionerà solo per iPhone.
  • iPad: Crei un progetto di un’applicazione che funzionerà solo per iPad.
  • Universal: Un progetto che ti permette di creare un’applicazione che funziona sia per iPhone che per iPad.

In tutti e 3 i casi potrai utilizzare l’Auto Layout. Per il momento non poniamoci il problema del target di riferimento ed ipotizziamo che l’applicazione dei nostri sogni sia da sviluppare per iPhone e iPad.

Quindi, seleziona Universal come Devices e crea il progetto.

Accenni alle dimensioni dei dispositivi

Riprendiamo un po’ il discorso delle dimensioni del display fatte nella lezione: Il Display di un dispositivo iOS.

  • Su Xcode, il sistema di riferimento degli elementi grafici è quello cartesiano con le coordinate espresse in Points. L’origine del piano, cioè le coordinate x:0 e y:0 coincidono con il lato superiore sinistro del display.
  • iPhone, o iPad, hanno dimensioni di schermo differente. Questo vuol dire che avranno un’area del piano minore o maggiore rispetto a agli altri modelli. Un iPhone 6/6S/7 ha una dimensione di 375x667 Points mentre un iPhone 6+/7+ ecc ha una dimensione di 414x736 Points.

In basso nell’Interface Builder c’è un riquadro apribile (basta premere su View as: nome dispositivo) che mostra i diversi dispositivi Apple e la tipologia d’orientamento del display. Cliccando su uno dei bottoni si modificano le dimensioni dei ViewController presenti nella scena.

pannello-auto-layout-e-size-class

Di default quindi, Xcode, ti fa lavorare con le dimensioni di un dispositivo reale (nel mio caso è l’iPhone 6S, che copre il 6 e 7 dato che hanno stesse dimensioni) con orientamento verticale (o, in inglese, Portrait).

Mettendo gli elementi grafici all’interno del ViewController e lasciando invariati Device e Orientation, quella grafica andrà bene solamente per iPhone 6, 6S e 7.

Quindi, a cosa servono quei bottoni?

Dato che si entrerebbe in aspetti leggermente più complessi, che prendono il nome di Size Class (te ne parlerò nelle prossime lezioni), lascia tutto invariato e non modificare il Device e Orientation scelti di default.

Cosa sono le ancore o vincoli di Auto Layout

Ipotizza di trovarti dentro la tua camera. La porta della camera si trova alle coordinate (x: 0, y: 0). Se io adesso ti dicessi che mi trovo alle coordinate (5, 1) tu, avendo come punto di riferimento universale la porta, sai esattamente dove sono.

Ora, se fai il ragionamento con gli iPhone o iPad, tutti hanno almeno un punto universalmente noto (ce n’è più di uno). Però, più che di singoli punti, si parla di linee.

I bordi del display e le linee che passano per il centro rappresentano i riferimenti universali del layout. Questi punti/linee vengono chiamate Anchor Point/Line.

L’Auto Layout consiste nel posizionare gli oggetti, all’interno dello Storyboard, utilizzando come riferimenti gli Anchor Point:

anchor-point-o-punti-dancoraggio-auto-layout-xcode

Gli Anchor Point, sono delle linee fittizie e non visibili realmente (a parte i bordi) che vengono calcolate a Runtime (cioè in fase d’esecuzione). Venendo calcolate a runtime, hanno delle coordinate dinamiche che dipendono dalle dimensioni del dispositivo in esecuzione.

Esistono altre linee che corrispondono esattamente con i margini del display. Hanno lo stesso nome (Leading, Trailing, Top Margin).

Per esempio, se ti dicessi che un bottone si trova a 10 Point di distanza, sull’asse delle X, rispetto alla Leading Margin, qualsiasi sia l’iPhone o iPad in cui è messo quel bottone, si troverà sempre a 10 Point di distanza dalla linea che sta leggermente staccata dal lato sinistro del display.

Come si utilizzano in vincoli di Auto Layout?

Prima voglio spiegartelo in maniera teorica.

Un oggetto, nel piano cartesiano, viene posizionato utilizzando le coordiante X ed Y. Ti ho detto, all’inizio della lezione, che utilizzando la X e la Y, incapperesti nel problema della non uniformità del layout. Quindi, non puoi direttamente modificare la coordinata X e Y dell’oggetto.

Come si fa?

Dato che hai scoperto l’esistenza degli Anchor Point, devi cominciare a pensare in funzione di questi.

Un vincolo di Auto Layout ti da la possibilità di definire un valore numerico, in pratica una distanza, da un determinato Anchor Point

Ipotizziamo di voler centrare un bottone al centro del display dell’iPhone 7. La sua larghezza o Width è di 414 Point mentre l’altezza o Height è di 736 Point.

Sfruttando gli Anchor Point potrai centrare il bottone creando un vincolo di Auto Layout con la Top Layout Guide con un valore di circa 414/2 Point di distanza ed un altro a 736/2 Point dalla Leading Margin.

Da notare che le coordinate X ed Y del bottone sono calcolate a runtime dall’applicazione grazie ai vincoli. Infatti la coordinata:

  • X: Sarà calcolata utilizzando il vincolo di distanza dalla Leading Margin.
  • Y: dalla distanza dalla Top Layout Guide.

Ti ricordo che l’asse delle X del display è il bordo superiore del display. La Y è il lato sinistro.

esempio-vincoli-di-auto-layout-e-calcolo-coordinate-xcode

C’è un problema.

In questo modo è vero che hai risolto il non dover calcolare manualmente le coordinate di un oggetto, però, creando dei vincolo con distanze fisse dagli Anchor Point il risultato è, più o meno, il medesimo.

Perché?

Se imposti una distanza fissa al vincolo, cambiando le dimensioni del display, quel vincolo manterrà sempre quel valore ed il bottone darà l’effetto di essersi spostato.

problema-utilizzo-vincoli-di-auto-layout-con-anchor-point-fissi

Come si risolvono?

Questi problemi possono essere facilmente risolti sfruttando gli Anchor Point dinamici.

Gli Anchor Point dinamici sono il Center Horizontally ed il Center Vertically. Questi, ti permetteranno di posizionare gli elementi in maniera proporzionale tra tutti i dispositivi.

Infatti, se ci pensi, se dici che un bottone si deve trovare al centro orizzontale e verticale, questo si troverà al centro per tutti i dispositivi perché il vincolo viene calcolato a runtime ed in base alle dimensioni di quel particolare display.

center-horizontally-e-vertically-auto-layout-xcode

Anche in questo caso le coordinate dell’oggetto sono state definite utilizzando solamente due vincoli. Un vincolo per la coordinata X ed uno per la coordinata Y.

L’unica differenza con il metodo precedente (cioè con le distanze dagli Anchor Point fissi), qui, ti ho fatto vedere come utilizzare gli Anchor Point dinamici.

Ad ogni modo sono cose che si capiscono meglio più praticamente che teoricamente. Mi serviva darti questo accenno teorico per poter fissare meglio questi concetti in maniera pratica già dal prossimo capitolo.

Se dovessi avere dei problemi già adesso, o c’è qualcosa di poco chiaro, fammelo sapere con un commento in fondo alla pagina.

Come creare vincoli di Auto Layout

Prendi una Label, mettila al centro della View e, tenendo premuto il tasto CTRL+Click Sinistro, trascina la freccia verso l’esterno dei suoi confini, ovvero punta la freccia sulla View (il processo è simile a quello utilizzato per le Outlet).

Una volta rilasciata la freccia, il menu che dovresti vedere dovrebbe essere simile a questo (può cambiare in base al punto di rilascio):

aggiungere-vincoli-di-auto-layout-con-xcode

Le prime quattro opzioni riguardano la creazione di vincoli con uno degli Anchor Point della View. Le altre opzioni sono proprietà che vedrai più avanti.

  • Trailing Space to Container Margin: Crea un vincolo con il margine destro della View (la linea destra del Container Margin).
  • Verical Spacing to Top Layout Guide: Crea un vincolo con il margine superiore o Top Layout Guide.
  • Certer Horizontally in Container: Crea un vincolo con il centro della View nella coordinata X.
  • Center Vertically in Container: Crea un vincolo con il centro della View nella coordinata Y.

In base al punto in cui rilasci la freccia nella View, potrebbero comparire pure:

  • Leading Space to Container Margin: Crea un vincolo con il margine sinistro della View.
  • Vertical Spacing to Bottom Layout Guide: Crea un vincolo con il margine inferiore o Bottom Layout Guide.

Due vincoli di Auto Layout per conquistare il mondo

Ora, dato che il sistema di riferimento del display è bidimensionale (X, Y) è necessario imporre almeno due vincoli per ogni elemento grafico presente nella View.

Proviamo a centrare la Label rispetto al centro della View. Per prima cosa, posiziona l’oggetto al centro, poi trascina la freccia verso l’alto ed aggiungi il vincolo Center Vertically in Container.

vincolo-auto-layout-center-vertically

La linea indica che è stato creato un vincolo.

Ti faccio una domanda, quale coordinata sta gestendo questo vincolo?

La posizione della linea non è indifferente, infatti va verso l’asse delle Y perché hai scelto il center Vertically in Container. Il centro verticale della View è dato dalla componente Y/2 e l’asse Y è proprio il lato lungo del dispositivo (ovvero il lato sinistro).

Questo significa che, il vincolo Center Vertically controlla la coordinata Y dell’elemento a cui è associato.

Perché la linea è rossa? 

Dovresti già sapere la risposta. Ogni elemento ha bisogno di almeno due vincoli per essere correttamente visualizzato. Ed infatti, Xcode, ti segnala un problema nell’Activity Viewer:

Xcode segnale problema non grave

Il problema è di tipo non grave (triangolo giallo). Ovvero se dovessi compilare/avviare l’applicazione essa funzionerà comunque.

Se clicchi il simbolo, ti porterà al pannello Issue Navigator che ti mostrerà, nel dettaglio, l’errore generato:

issue-navigator-per-problema-auto-layout-xcode

L’errore ti comunica che la posizione “Horizontal” è ambigua per la Label. Ti sta dicendo che quel vincolo, così com’è, non soddisfa i principi dell’Auto Layout.

Vediamo come risolvere il problema.

Fino ad ora, la label, ha come unico vincolo il “Center Verically in Container” che puoi leggere come “Posiziona l’elemento al centro dell’asse verticale della View (coordinata Y)”.

Per sistemare l’errore, devi aggiungere un vincolo per la coordinata X (che non deve essere obbligatoriamente il rispettivo Center). Per semplicità aggiungi anche il vincolo Center Horizontally.

[mailmunch-form id=”101287″]

Se hai dei problemi a seguire il tutorial, fammelo sapere con un commento. Altrimenti, dai uno sguardo ai miei corsi:

Assistant Editor Preview. Simulare l’interfaccia dell’applicazione su Xcode

La prova del nove non è l’avvio dell’applicazione, può esserlo, ma perderesti un mare di tempo ad avviare e riavviare continuamente il Simulator.

Lo strumento che fa al caso nostro è sempre l’Assistant Editor.

L’Assistant Editor, oltre a mostrarti il codice associato ad un Controller, ti permette anche di visualizzare il Preview dell’interfaccia che stai realizzando. In pratica ti simula come vedresti realmente il layout nei vari dispositivi iOS (iPad/iPhone compresi).

Apri l’Assistant Editor. Nel suo pannello, in alto, è presente la barra di navigazione che indica il percorso in cui è posizionato il codice visualizzato. Se clicchi su Automatic (trova automaticamente il file a cui è associato il controller) si aprirà un menu che ti permetterà di scegliere altri file o altri Editor. Tra questi c’è la voce Preview:

preview-assistant-editor-xcode-e-auto-layout

Nel Assistant Preview, inoltre, puoi simulare anche altri dispositivi contemporaneamente. Ti basta premere il bottone, a forma di più, che trovi in basso a sinistra e scegliere uno dei modelli presenti (te li elenca differenziandoli per pollici, se non ti ricordi come riconoscerli, rinfrescati la memoria leggendo questa lezione).

Con Xcode 8, l’Assistant Preview potrebbe dare alcuni problemi di errata visualizzazione dei vincoli. Non preoccuparti, è solo un problema del programma. Ad ogni modo, utilizzeremo pochissimo l’Assistant Preview dato che Xcode 8 presenta un nuovo sistema per controllare in tempo reale i vincoli. 

Eliminare i vincoli di Auto Layout

Torna nello Storyboard.

Per eliminare i vincoli di Auto Layout puoi utilizzare 2 metodi (ne esiste un terzo ma lo vedrai più avanti):

  1. Seleziona la label e clicca su una delle linee di Auto Layout. Clicca sul vincolo Center Vertically (ovvero la linea orizzontale – ti ricordo che i due assi sono invertiti rispetto ad un piano cartesiano normale). Premi il tasto DEL dalla tastiera per eliminare il vincolo.
  2. Apri il Document Outline, e allarga il menu a tendina della View. Sotto la label è presente un nuovo oggetto chiamato Constraints (vincoli) se lo apri vedrai i vincoli che sono presenti nella ViewAllo stesso modo, seleziona il vincolo che vuoi eliminare e premi DEL.

Se ancora hai aperto l’Assistant Preview, vedrai il cambiamento di posizione in tempo reale e quindi come i vincoli interagiscono con la visualizzazione degli oggetti.

eliminare-un-vincolo-di-auto-layout

Se dovessi avere dei problemi, in fondo alla pagina, puoi lasciarmi un commento. Lo apprezzerei volentieri ;)

I vincoli di Width e Height

Prima di andare avanti nell’impresa di realizzare interfacce universali, facciamo un po’ di prove con i vincoli di Auto Layout.

Elimina la Label ed aggiungi una TextField. Per il momento non ridimensionarla perché creeresti dei problemi che risolverai tra qualche secondo (si ci sono sempre problemi).

Posizionala in alto e al centro. Quindi leggermente staccata dalla Top Layout Guide, più o meno ubicala qui:

text-field-e-vincoli-di-auto-layout-height-e-width

Con i vincoli di Auto Layout devi cercare di lasciarla in questo punto per qualsiasi dispositivo.Ricordati che devi sempre fissare un oggetto con almeno 2 vincoli. Uno per l’asse X ed uno per l’asse Y.

Quali metteresti così su due piedi?

Io userei il Vertical Spacing to Top Layout Guide ed il Center Horizontally in Container.

Perché ho scelto questi? Perché sono i punti fissi più vicini all’oggetto e, per il momento, non conosci un altro sistema per fare qualcosa del genere. Una buona norma dell’Auto Layout è quella di fissare gli oggetti con i punti universali più vicini ad esso.

Hai fissato l’oggetto? Noti qualcosa di strano?

Xcode segnala un problema: Il Misplaced View e precisamente il Frame will be different at run time.

La TextField risulta di dimensioni completamente differenti rispetto a quelle riportate nello Storyboard. Infatti sembra essersi contratta in larghezza (Width):

problema-frame-will-be-different-at-run-time-xcode-e-auto-layout

Ma perché accade questo? O meglio perché solo alla TextField e non alla Label? (É probabile che ti sia successo anche con la label).

Se da un lato c’era il problema del “Dove posiziono gli elementi?”, adesso comincia a presentarsene uno nuovo.

Che dimensioni devono avere gli elementi?

Di default Xcode assegna una dimensione agli oggetti grafici che inserisci nella View. Spesso queste dimensioni non vanno bene per tutti i dispositivi o meglio potrebbero andare ma hanno bisogno di una conferma.

Per permettere alla TextField, o qualsiasi altro elemento, di avere le stesse dimensioni esplicitate nello Storyboard, è necessario creare dei vincoli anche per la Width ed Height.

Esistono altre due tipologie di vincoli:

  • Width: Crea un vincolo con la larghezza definita manualmente nello Storyboard. In questo modo se l’elemento misura 50 Points, vincolandolo, misurerà 50 in tutti i dispositivi.
  • Height: Crea un vincolo di altezza. L’elemento manterrà la stessa dimensioni in altezza, imposta dallo Storyboard, in qualsiasi dispositivo.

Se poi ci fai caso, ritorniamo sempre allo stesso problema. Se le dimensioni del display cambiano, ovvero la sua X e la sua Y aumentano o diminuiscono, allora cambieranno anche le aree dei sotto oggetti che vivono all’interno della View.

Con i vincoli di Width e Height fissi le dimensioni di un oggetto, per qualsiasi display, uguali a quelle utilizzate nello Storyboard.

Proviamo a mettere in pratica questa definizione.

Nel caso della TextField, il problema è solamente legato alla sua larghezza.

Non avevi detto che è sia per la Width che per la Height?

Vero. Devi sapere, però, che alcuni elementi vengono gestiti in maniera diversa rispetto ad altri. In questo caso, l’altezza della TextField è un valore universale ed infatti non puoi modificarla dallo Storyboard (a meno che non venga cambiato il suo attributo Border Style).

Quindi ad alcuni oggetti verrà esplicitata solo la larghezza, altri solo l’altezza e per altri ancora entrambi.

Per vincolare la TextField, alla Width imposta dallo Storyboard, selezionala, premi CTRL+Click Sinistrotrascina la freccia verso il suo interno. Nel menu dei vincoli, seleziona Width:

vincolo-di-width-auto-layout

Et voilà.

Ci potrebbero essere dei problemi con questa tipologia di vincoli?

Rassegnati, questa è la lezione dei problemi!

Mantenere la stessa dimensione non significa mantenere la stessa proporzione. 

La TextField da iPhone 6C ad iPhone 7 Plus sembra essere più piccola. Ovviamente non lo è. É cambiata solamente la dimensione della View che la contiene.

Imparerai ad adattare gli oggetti, in maniera proporzionale con le dimensioni della View, nella prossima lezione. Per il momento focalizza l’attenzione sui principi base dell’Auto Layout, ovvero il posizionamento degli oggetti.

Facciamo qualche altra prova con i vincoli di Width ed Height.

Elimina la TextField ed al suo posto aggiungi un bottone. Posizionalo leggermente sotto rispetto alla Top Layout Guide e centralo rispetto all’asse X. Adesso aumenta la sua dimensione ed aggiungi un colore di sfondo. Vincolalo con la Top Layout Guide e con il Center Horizontally:

problema-bottone-height-e-width-auto-layout

 

Il bottone, a differenza della TextField, una volta che vengono modificate le sue dimensioni di default, deve essere vincolato sia in altezza che larghezza.

Infine, puoi affermare che un elemento grafico ha bisogno di 4 contraints per essere correttamente vincolato:

  1. Rispetto all’asse delle X.
  2. Asse delle Y.
  3. In Height per definire un’altezza universale per tutti i dispositivi.
  4. In Width.

constraint-obbligatorie-per-visualizzare-correttamente-auto-layout-xcode

Lascio a te il compito di vincolare correttamente il bottone. Al solito, se hai un problema, fammelo sapere con un commento.

I vincoli a cascata, come ancorare più oggetti

Adesso è arrivato il momento di applicare queste prime regole basilari a più di un oggetto. Sotto il Button, inserisci una TextField in posizione centrale rispetto all’asse X:

esempio-vincoli-auto-layout-tra-piu-oggetti-xcode

La domanda è, come posso utilizzare i vincoli di Auto Layout quando ci sono più oggetti?

Nella nostra View abbiamo già un elemento correttamente vincolato. Così facendo, questo oggetto, potrà essere sfruttato come nuovo punto d’ancoraggio per gli altri elementi presenti nella scena.

Grazie a questa proprietà, un secondo elemento, potrà essere vincolato correttamente sfruttando l’oggetto precedentemente inserito.

Detta in termini più tecnici. Se A è correttamente vincolato con la View. B potrà creare dei vincoli con A. Per la proprietà transitiva B sarà automaticamente vincolato alla View (grazie ai vincolati creati con A). 

Ogni oggetto, quindi, presenta dei nuovi Anchor Point:

anchor-point-elementi-della-view-auto-layout-xcode

Se trascini la freccia dalla TextField al Button dovrebbe aprirsi un menu simile al seguente:

auto layout con altro oggetto

  • Horizontal Spacing: Crea un vincolo in base alla distanza orizzontale tra i due oggetti (da usare nel caso in cui gli oggetti sono disposti orizzontalmente).
  • Vertical Spacing: Crea un vincolo in base alla distanza verticale tra i due oggetti (utile nel nostro caso dato che i due oggetti sono paralleli all’asse Y).
  • Top/Bottom: Crea un vincolo d’allineamento con il lato superiore o inferiore dell’oggetto. Utile nel caso in cui un altro oggetto, quello da ancorare, si trova di fianco ed il suo lato superiore o inferiore è in linea con l’oggetto in questione.
  • Leading/Trailing: Il principio è uguale a quello già spiegato per la View. Crea dei vincoli con gli estremi verticali dell’oggetto (il lato destro e sinistro).
  • Baseline: É la linea immaginaria che si trova leggermente sopra il margine inferiore.
  • Center: Creai dei vincoli con il centro verticale o orizzontale dell’oggetto.
  • Equal Widths ed Equal HeightsL’elemento assume la stessa WidthHeight dell’elemento a cui viene collegato.
  • Aspect Ratio: Crea vincolo per cui l’elemento rispetta la stessa proporzione in larghezza ed altezza dell’elemento connesso.

Esempio

In base a quanto visto sopra, prova a vincolare correttamente la TextField.

Il principio è sempre lo stesso. Devi trovare i quattro vincoli corretti per soddisfare l’Auto Layout

  1. Il vincolo con l’asse Y è sicuramente dato da un Vertical Spacing con il bottone. In questo modo tra la TextField ed il Button verrà mantenuta sempre la stessa distanza o (spazio/spacing) verticale.
  2. In vincolo con l’asse X puoi crearlo centrando la TextField con il centro del Button.
  3. Per la Width potresti usare o un vincolo di Width classico (da TextField verso la TextField) oppure, puoi utilizzare un Equal Width per assegnare la stessa larghezza del bottone.
  4. Per l’altezza non c’è bisogno di definire un vincolo dato che la TextField utilizza sempre l’altezza di default (tranne se dovessi cambiare la Border Style).

Nel video ho utilizzato il tasto SHIFT per selezionare più di un vincolo contemporaneamente:

ancorare-piu-oggetti-tra-loro-xcode-auto-layout

Come mai c’è ancora un errore se ho inserito tutti e quattro i vincoli?

Pur avendo correttamente impostato l’Auto Layout, nello storyboard, gli elementi che si trovano in posizione o dimensione differente rispetto a quelle assegnate con il nuovo vincolo, non si aggiornano automaticamente. Per farlo, sono stati creati dei bottoni che ti permettono di aggiornare il layout ai nuovi vincoli e altre piccole funzioni interessanti.

condividi xcoding

Ho impiegato un po’ di tempo a scrivere questo tutorial, sarei davvero felice se contribuissi al mio progetto semplicemente mettendo un mi piace o follow alle mie pagine

[addtoany]

Grazie davvero :-)

I bottoni di Auto Layout veloce

Cosa succede se provi a modificare o a spostare un oggetto che ha già dei vincoli corretti?

errori-di-auto-layout-come-risolversi

Gli errori escono dalle fo*** pareti!

Il riposizionamento o la modifica delle dimensioni non comporta l’aggiornamento dei vincoli.

Don’t worry, arrivano le belle notizie.

Fortunatamente Xcode ha creato degli strumenti che ti permettono di modificare in maniera veloce i vincoli e di conseguenza risolvere questi errori.

Intanto da notare che accanto ai vincoli di colore giallo compaiono dei numeri. Quei numeri rappresentano la differenza tra la posizione precedente al cambiamento e la posizione attuale. Il simbolo + ti avvisa che è avvenuto in incremento rispetto alla posizione originale.

Nell’area di lavoro, in basso a destra, sono presenti quattro bottoni. Questi bottoni svolgono delle operazioni inerenti all’Auto Layout come creare e risolvere, in maniera veloce, i vincoli:

bottoni di Auto Layout veloce

  • Resolve Auto Layout Issue: Come lo stesso nome suggerisce, serve a risolvere i problemi di Auto Layout in maniera veloce (premendo dei bottoni).
  • Pin: Permette di creare ancore con la View principale o con un oggetto selezionato.
  • Align: Da qui puoi creare vincoli di allineamento o con la View principale o con un altro oggetto.
  • Stack View: lo vedrai nelle prossime lezioni. Per ora non voglio mettere troppa carne sul fuoco.

A parte il Resolve Auto Layout Issue e il bottone di Stack View, gli altri due svolgono le stesse operazioni che ti ho fatto fare durante tutta la lezione.

Resolve Auto Layout Issue

Partiamo dal più semplice, seleziona il button e clicca su Resolve Auto Layout Issue:

Resolve Auto Layout Issue

La finestra è divisa in due aree:

  • Selected Views: Ti permette di gestire i problemi dell’elemento selezionato, in questo caso il bottone.
  • All Views in View Controller: Gestisce tutti i problemi di tutti gli elementi presenti nella View.

Le operazioni che puoi fare sono le seguenti:

  • Update Frames: Ritorna lo Storyboard alla precedente configurazione dei vincoli funzionanti. Ergo, se lo premessi, il bottone ritornerebbe allo stato in cui si trovava prima di spostarlo.
  • Update Constraints: Aggiorna i vincoli ai nuovi valori generati dalla modifica da parte dell’utente. Premendolo, dunque, risolveresti i problemi generati dalla modifica delle dimensioni e della posizione del bottone.
  • Add Missing Constraints: Ti sei dimenticato un vincolo? Il sistema aggiunge in automatico quelli che mancano. Ad esempio quando i vincoli sono di colore rosso, cioè non soddisfano i principi dell’Auto Layout, sai che manca ancora qualche vincolo importante. Con questo bottone, non dovrai scervellarti per capire quale manca, penserà lui ad aggiungerli.
  • Reset to Suggested Constraints: Forse una delle cose più fighe di questo strumento. Il bottone ti genera in automatico dei vincoli che soddisfano la posizione e le dimensioni che hai impostato nello Storyboard.
  • Clear Constraints: Elimina tutti i vincoli dell’oggetto.

Ecco un video che illustra l’utilizzo di tutti gli strumenti del Resolve Auto Layout Issue:

Il video è di una versione precedente di Xcode. Il funzionamento dei tasti è comunque equivalente.

Pin

Rimuovi tutti i vincoli di Auto Layout utilizzando il Clear Constraints del pannello Resolve Auto Layout Issues.

Adesso seleziona il bottone e premi il tasto Pin.

Pin Auto Layout Storyboard

Calma e sangue freddo.

  • Il riquadro superiore del menu ti permette di creare dei vincoli con i quattro lati della View principale (Top Layout Guide, Trailing, Leading e Bottom Layout Guide).
  • Nei campi di testo puoi inserire la distanza tra il punto fisso e il lato dell’oggetto da vincolare.
  • Cliccando sulla barra rossa tratteggiata comunichi al sistema che vuoi inserire quel vincolo.
  • Se togli la spunta alla casella Constrain to margins fai in modo di creare i vincoli direttamente con i lati del display e non con le linee immaginarie. Quindi se lo togliessi, invece di creare un vincolo con la Top Layout Guide, lo creerebbe con il margine superiore del display.

I campi di testo per l’inserimento esatto delle distanze, diventano utili quando si vuole creare un’interfaccia con delle proporzioni ben definite. Quando ti farò vedere come utilizzare Sketch (un software per la realizzazione delle interfacce) torneremo su questo concetto.

Pin, sistema di ancoraggio veloce

Dato che gli elementi si vincolano a cascata, il sistema ti suggerisce di vincolarlo direttamente con l’elemento più vicino.

Vediamo le altre opzioni:

  • Le caselle di Width e Height: ti permettono di attivare i rispettivi vincoli ed in più ti permettono di definirle una nuova larghezza/altezza.
  • Equal Width/Height: Si attivano nel caso selezioni due o più oggetti. Nel particolare crea un vincolo che obbliga gli oggetti selezionati ad avere la stessa altezza o larghezza del primo oggetto selezionato.
  • Aspect Ratio: Mantieni la stessa proporzione in tutti i dispositivi (difficilmente la userai).
  • Align: Se hai selezionato un altro oggetto insieme a questo, ti permette di definire il tipo di allineamento tra i due.
  • Update Frames: Se vuoi aggiornare la View o l’oggetto selezionato con i valori appena inseriti, allora seleziona una delle due opzioni di questo menu. Altrimenti devi aggiornare utilizzando il Resolve Auto Layout Issue.

Esempio d’utilizzo del pannello Pin:

Align

Il pannello Align permette di definire gli allineamenti tra gli oggetti e la View.

Pannello Pin

Il pannello è abbastanza intuitivo. Le funzionalità che non sono sbloccate si attivano quando vengono selezionati due oggetti della View. Infatti, se ci fai caso, sono i punti d’ancoraggio di un oggetto e non della View.

Ti faccio subito vedere l’utilizzo con un esempio:

Modificare un Vincolo esistente

Come si modifica un vincolo di Auto Layout esistente?

Xcode ti offre tre soluzioni. Le prime due vediamole tutte in una volta.

  1. La prima consiste nel selezionare il vincolo dall’Interface Builder. Cliccarci sopra due volte (un doppio click) per poi modificare uno dei suoi attributi da un piccolo pannello di edit.
  2. Il secondo metodo prevede sempre la selezione del vincolo dall’Interface Builder e la modifica dal pannello Attributes Inspector.

modifica-di-un-vincolo-di-auto-layout-xcode

Con la prima opzione si presentano solamente 4 campi di modifica.

  1. Costant è il valore del vincolo. Nel caso dell’immagine c’è una distanza dalla Top Layout Guide di 20 Point. Modificando il campo Costant modificherai anche quella distanza.
  2. Priority è un campo un po’ strano da capire. Non ne parlerò (perché se ne può far a meno) ma puoi inserire più vincoli per lo stesso punto d’ancoraggio. Per esempio potresti avere due Vertical Spacing (per sistemare alcuni problemi tra i dispositivi – noi impareremo a farlo in modo diverso). Il campo priority definisce quale vincolo deve vincere sull’altro.
    • I valori sono generalmente 1000, 750 e 250. Ne faremo un piccolo uso con le Stack View.
  3. Multiplier è il moltiplicatore del vincolo. 1 è uguale a 100%, quindi 0.5 è la metà. Il alcuni casi (sopratutto con l’Equal Width/Height) si può sfruttare il multiplier per modificare il vincolo in maniera proporzionale alle dimensioni dell’oggetto che fa da ancora.
    • Per esempio, un Equal Height di un bottone con la View principale ed un multiplier di 0.5 farò in modo che, in tutti i dispositivi, il bottone abbia un’altezza della metà della Height della View.
  4. Il quarto campo è quel simbolo d’uguale accanto al campo Costant. Anche qui, noi non utilizzeremo questo strumento perché imparerai a vincolare gli oggetti utilizzando altri sistemi.

Dall’altro lato, nell’Attributes Inspector, sono presenti tre campi in più e due checkbox.

  1. First Item ti fa vedere chi è l’oggetto principale che ha creato il vincolo (cioè l’oggetto da cui è partito). Nell’esempio ti dirà che è la Text View e precisamente il lato superiore o Top dell’oggetto.
    • Selezionando il campo potrai modificare il punto di partenza del vincolo.
  2. Relation è l’equivalente di quel bottone uguale presente nel primo sistema che ti ho fatto vedere. Possiamo tranquillamente lasciare Equal in tutti i vincoli.
  3. Second Item è l’equivalente del First Item. Selezionando puoi modificare il punto con cui si ancora il First Item.

Cosa sono Place Holder e Installed?

Il Placeholder Remove at Build Time ti permette di rimuovere il vincolo quando l’applicazione è in fase d’avvio. In questo modo non ti comparirà un errore nell’Interface Builder per la mancanza di un vincolo necessario.

Perché? in casi più avanzati si possono utilizzare i vincoli, tramite delle IBOutlet, per eseguire delle animazioni particolari. Magari si può voler attivare il vincolo da codice solo in determinate situazioni o cose del genere. Noi durante il corso non lo utilizzeremo.

Installed, è un checkbox che imparerai ad utilizzare nella lezione delle Size Class.

Il Size Inspector

Oltre ai due sistemi che ti ho elencato sopra, ne esiste un terzo che ti permette d’accedere in maniera più semplice e veloce a tutti i vincoli presenti in un oggetto.

Se selezioni un oggetto che ha dei vincoli sia in arrivo che in uscita (cioè fa da appoggio ad un altro oggetto oppure è semplicemente vincolato con qualcun altro) puoi accedere velocemente a tutti i suoi vincoli utilizzando il pannello Size Inspector.

size-inspector-auto-layout-xcode

All’interno del Size Inspector, troverai due bellissime cose.

Una sorta di mappa dei vincoli dell’oggetto. Dove in sotto impressione ci sono delle linee grigie trasparenti che sono i vincoli non attivi e delle linee blu che mostrano i vincoli attivi e la loro posizione.

Sotto la mappa trovi la lista dei vincoli attivi. Sia dalla mappa che dalla lista, con un doppio click o premendo il tasto Edit sarai in grado di modificare i suoi valori.

La proprietà Multiplier. Innamorati dell’Auto Layout

Se hai smanettato con i vincoli di Auto Layout mentre seguivi il tutorial, avrai notato che tutti questi mantenevano dei valori costanti. La distanza dalla Top Layout Guide costante. La larghezza di una View costante e così via.

C’è un problema nel lavorare così.

Con il valore Costant non potrai mai creare layout proporzionati a tutte le dimensioni dei dispositivi.

Per farti un esempio, se io volessi mettere un’immagine ad occupare solamente il 40% in Altezza della dimensione del display, non potrei farlo perché ogni dispositivo ha un’altezza differente.

Dunque Peppe, come si fa?

Proviamo a farlo insieme creando un semplice progetto. Comincia con un nuovo progetto iOS Single View Application. All’interno del ViewController trascina una UIView, una UITextView e due UIButton. Dislocali più o meno così:

auto-layout-e-multiplier-property-solo-interfaccia

Se dovessi avere delle domande su come ho creato questo layout trovi il download del progetto completo in fondo alla pagina. Altrimenti, scrivi pure un commento.

Cominciamo a mettere i primi vincoli.

Da dove bisogna partire?

Il mio consiglio è quello di partire sempre da sopra. Vincolare l’oggetto più in alto con la View principale ed il resto, salvo casi eccezionali, con l’oggetto più vicino.

Partiamo dalla UIView (Ho usato una UIView per semplicità. Potresti benissimo pensarla come ad una UIImageView).

Dato che la UIView si trova attaccata a 3 punti fissi dell’applicazione (Margine superiore, Trailing e Leading meno i margini) possiamo sfruttarli per vincolare la X, la Y e la Width. Infatti se metti il vincolo sia a sinistra che a destra definisci anche la larghezza dell’elemento.

auto-layout-esempio-1

Manca solamente un vincolo che è quello che definisce l’altezza della view.

Mettere un vincolo di Height costante significherebbe perdere la proporzionalità su tutti i dispositivi. Devi sfruttarne un altro. Il vincolo che utilizzerai sarà l’Equal Height con la View principale.

Seleziona la UIView e crea un vincolo di Equal Height con la UIView dell’applicazione. Noterai che la UIView vorrà allargarsi tanto quanto la grandezza del ViewController.

Perché?

Perché il vincolo di Equal Height (come l’Equal Width) copiano in pieno il valore di Height dell’oggetto a cui si collega.

Si può modificare questa proporzione?

Ovviamente si. In programmazione tutto è possibile.

Poco fa ti ho parlato della proprietà Multiplier. Se selezioni il vincolo appena creato ti dirà che il suo Multiplier è 1. Ovvero il vincolo è soddisfatto al 100%. Tradotto, l’elemento A copia tutta la lunghezza di B al 100%.

Cambiando questo valore a 0.5 il vincolo sarà soddisfatto solo al 50%, ovvero A sarà la metà di B.

0.5 è comunque troppo alto. finiremmo per schiacciare gli altri elementi. Gioca un po’ con il Multiplier finché il risultato non ti soddisfa.

Prima di procedere con la TextView vincoliamo correttamente il bottone. Perché?

La TextView si trova tra due oggetti. Quindi è probabile che andrai a vincolare questa con l’UIButton che sta sotto. Se lo fai, dato che il bottone non è ancora vincolato, ti compariranno degli errori gravi che si risolveranno solamente quando avrai corretto l’Auto Layout del bottone.

Quindi sistemiamo prima il bottone.

Come per la UIView blu, prima aggiungi i tre vincoli con i tre bordi del display dato che si trova attaccato ad essi. Anche qui manca solamente l’altezza.

Per mantenere le proporzioni anche per il bottone, aggiungi un Equal Height con la View principale. Modifica il Multiplier in 0.08.

auto-layout-esempio-3-con-multiplier

Adesso procedi con i vincoli per la TextView. Il primo che metterai sarà quello di Center Horizontally con la UIView azzurra. In questo modo la coordinata sarà X correttamente vincolata.

Successivamente, aggiungi un vincolo di Vertical Space dalla View che sta sopra e dal bottone sotto. Cambia l’attributo Costant per entrambi al valore 20. Così, sia l’altezza che la coordinata Y soddisfanno l’Auto Layout.

Infine, manca solamente la larghezza. Aggiungi un Equal Width con Multiplier 0.4.

auto-layout-esempio-4

Il risultato è straordinario. Grazie a queste semplicissime regole ed alla proprietà Multiplier, il tuo layout sarà proporzionato su tutti i dispositivi.

Ti basta aprire quel piccolo pannello in basso (di cui parleremo nella prossima lezione sulle Size Class) per vedere come il layout si adatta perfettamente a tutti i dispositivi:

auto-layout-e-multiplier

Conclusione

Ho cercato di spiegarti in maniera molto semplice i concetti fondamentali che stanno dietro l’Auto Layout, infatti, il seguente tutorial è solo un introduzione all’Auto Layout in Xcode e non mostra tutte le sue potenzialità.

Se ti va di continuare questo percorso puoi scegliere di cominciare il corso di sviluppo applicazioni per iOS con il linguaggio Swift oppure di procedere con il tutorial sulle Size Class (un sistema che potenzia l’Auto Layout) o con le stack view (il nuovo sistema per creare layout complessi).

Buona Programmazione!

Download

[sociallocker]Download Dropbox[/sociallocker]

Changelog

  • 23/09/2016 – Aggiunti i paragrafi: Modificare un Vincolo di Auto Layout (+ sotto paragrafo: Size Inspector) e Proprietà Multipler. Innamorati dell’Auto Layout
  • 19/09/2016 – Aggiunto il changelog. Aggiornamento ad Xcode 8 e modifiche del testo.

La prima applicazione iOS con il linguaggio Swift

come-creare-la-tua-prima-applicazione-ios-con-il-linguaggio-swift

Come si crea un’applicazione per iPhone, iPad o Apple Watch? Quali sono gli strumenti che devo conoscere e da dove devo cominciare?

Queste sono sono alcune delle domande che a qualsiasi nuovo sviluppatore iOS frulleranno per la testa. La risposta?

Due sono gli ingredienti che tutti dovremmo possedere prima di intraprendere il cammino dello sviluppatore. Gli strumenti di base (il linguaggio di programmazione Swift) e tanta, ma dico tanta, pazienza.

Chi si butta per la prima volta nel mondo dello sviluppo applicazioni iOS vuole tutto in pochissimo tempo. La programmazione ha dei tempi ben precisi. Tempi che servono al nuovo sviluppatore per immagazzinare tutte le migliaia di nozioni e regole che girano dietro un’applicazione ed un linguaggio di programmazione.

Vuoi creare la tua prima Applicazione iOS con il linguaggio Swift? Allora segui il mio consiglio:

[bctt tweet=”Creare un’applicazione iOS è come costruire un palazzo. Devi partire dalle fondamenta!” username=”xCoding_IT”]

Per costruirlo si devono seguire dei passaggi canonici (fondamenta, pilastri, muri ecc) e, a meno che tu non possegga una squadra di operai giapponesi, non puoi tirarlo su in una sola notte.

Ok! io con le premesse ho finito. Tu sei pronto a cominciare quest’avventura?
Allora, vediamo insieme come creare la prima applicazione iOS con il linguaggio Swift.

La prima app

É ben noto ed è consuetudine che la prima applicazione, in qualsiasi linguaggio di programmazione, sia quella che scriva “Ciao Mondo” o “Hello World”.

La tua prima applicazione per iPhone, avrà al centro dello schermo un campo di testo (TextField), dove l’utente potrà inserire un messaggio o una parola. Mentre, in una Label (un campo di testo modificabile solo da codice), il messaggio verrà riportato nel seguente formato: “Ciao <Messaggio>”.

Non hai capito? Guarda un mini video dell’applicazione finale:

run-prima-applicazione-ios-e-linguaggio-swift

Che programma devo utilizzare per creare applicazioni iOS per iPhone e iPad?

Devi scaricare, dall’App Store, il programma Xcode. É gratuito e fornito da Apple. Se hai seguito il mio corso sul linguaggio Swift o sullo sviluppo di applicazioni iOS dovresti averlo già installato.

Creare il progetto iOS Single View con Xcode

Il primo step che devi eseguire è quello di aprire Xcode. Una volta aperto dovresti vedere una schermata di presentazione come quella presente nell’immagine qui sotto.

creare-unapplicazione-ios-con-linguaggio-swift-xcode

Ogni applicazione è l’insieme di più file. Tutti questi file sono racchiusi in una cartella che li identificherà e che prende il nome di progetto (Xcode project).

Data l’importanza, che ha per me, il saper progettare un’applicazione ho dedicato un intero articolo nel mio corso sullo sviluppo di applicazioni iOS.

Clicca su Create a new Xcode project o, se non ti dovesse comparire la schermata di presentazione, dal menu in alto clicca File\New\Project. Arrivato a questo punto, Xcode ti chiederà di scegliere un template.

Cos’è un Template in Xcode?

I template di Xcode

Un template è un progetto di partenza da cui poter iniziare a programmare la tua prima applicazione iOS con il linguaggio Swift.

Immaginalo così. Xcode ti fornisce il quaderno. Il tuo compito è quello di provvedere a riempirlo. Senza il template, o senza il quaderno, avresti dovuto crearlo da zero (tagliare l’albero ecc, un processo non alla portata di tutti).

Dato che la tua prima applicazione iOS sarà composta da una sola pagina o Viewseleziona il template Single View Application e clicca su Next:

selezione-template-single-view-application-xcode

Le opzioni

A questo punto, Xcode dovrebbe guidarti in un’altra finestra di impostazioni:

opzioni template xcode

Datemi un nome e vi conquisterò l’App Store.

Scherzi a parte, anche se il nome è uno dei motivi di successo di un’applicazione, in questa finestra dovrai riempire i seguenti campi:

  • Product NameIl nome che vuoi assegnare alla tua prima applicazione iOS con il linguaggio Swift.
  • Organization Name: Se lavori per un’azienda o hai un sito web, qui puoi inserirlo. Se non hai nessuno dei due, metti il tuo nome. In pratica è il nome che comparirà nell’App Store come sviluppatore dell’app.
  • Organization Identifier: É una stringa identificativa della tua applicazione. Puoi, ad esempio, mettere il nome della tua organizzazione, la combinazione tra il tuo nome e l’azienda o sempre il tuo nome. Serve ad Apple per identificare lo sviluppatore dato che potrebbero esserci più sviluppatori con lo stesso Organization Name.
    • Generalmente si utilizza la domain reverse notation. Cioè se hai un sito, dovrai scriverlo al contrario, esempio: it.xcoding

Come Language seleziona il linguaggio Swift e come Devices iPhone. Vedrai più avanti o seguendo il mio corso che puoi creare un progetto Universal. I progetti Universal ti permettono di creare applicazioni che vanno bene sia per iPhone che per iPad.

I tre checkbox che trovi, deselezionali tutti.

Premi Next. Il passaggio successivo ti porta a scegliere il luogo in cui salvare il progetto. Scegli un posto nel tuo Mac e premi su Create.

Storyboard e interfaccia

L’interfaccia di Xcode, che dovresti avere davanti ai tuoi occhi, è leggermente (ma poco, poco) incasinata. É formata da 5 sezioni le quali hanno un compito ben specifico.

interfaccia Xcode. Le aree di lavoro

Dato che finirei per annoiarti, quando hai finito di seguire questo tutorial, puoi leggerne di più sull’interfaccia di Xcode qui.

Ma torniamo a noi. É arrivato il momento di creare l’interfaccia.

Aspetta Peppe… io non sono un grafico, come farò a creare un’interfaccia per la mia prima applicazione iOS?

Non abbandonare proprio ora, costruire una User Interface (UI) sarà un gioco da ragazzi con Xcode.

Seleziona il file Main.Storyboard. Lo trovi nella colonna a sinistra chiamata Project Navigator. All’interno del Main.storyboard troverai l’Interface Builder, ovvero lo strumento che utilizzerai per la realizzazione delle interfacce (inserire bottoni, immagini, menu, altre finestre ecc).

Ciao_Mondo_xcodeproj

Qui incappano tutti gli inesperti!

Con l’Interface Builder creerai solamente la grafica della tua applicazione. Sarà tuo compito generare il codice relativo a quel determinato oggetto che hai piazzato nella View (sotto vedrai come si fa).

Al centro dell’Interface Builder hai un ViewController. Questo è un contenitore nel quale potrai inserire tutti gli elementi dell’interfaccia della tua applicazione. Se apri una applicazione tutto lo schermo con tutto il contenuto prende il nome di ViewController.

viewcontroller-e-interface-builder

Inoltre, possono esistere più ViewController in base al numero di “viste” che la tua applicazione avrà. Per esempio, se premi un bottone e vedi cambiare totalmente il contenuto degli elementi, molto probabilmente stai passando ad un altro ViewController dell’applicazione. Una volta finito con questo tutorial puoi approfondire questi concetti qui: Passare da un ViewController all’altro.

Sei confuso? Non preoccuparti, è un buon segno. Man mano imparerai a prendere dimestichezza con Xcode.

Gli elementi grafici

Per creare un Hello World hai bisogno di una Label (un contenitore non cliccabile, utilizzato solo per le scritte e numeri). Puoi selezionare un oggetto Label dall’Object Inspector che trovi in basso a destra. 

Una volta posizionata al centro della View (che è il contenitore reale degli elementi grafici), fai doppio click su di essa e rinominala in “Inserisci il tuo nome”.

Sotto la label trascina una Text Field (uno strumento che permette l’inserimento dei dati):

inserire-oggetti-grafici-nel-view-controller-storyboard

Collegare il codice all’interfaccia

Ora viene il bello!

L’interfaccia contenuta nella View (View e ViewController non sono sinonimi) non esegue operazioni se alle spalle non ha un codice collegato che la gestisce (Il ViewController è il reale gestore della View, se vuoi approfondire dai uno sguardo al mio corso di sviluppo iOS).

Per poter collegare in modo intuitivo, il codice con l’interfaccia, Xcode mette a disposizione uno strumento chiamato Assistant Editor. L’Assistant Editor ti da la possibilità di lavorare su due pagine. Per poter aprire l’Assistant, in alto a destra sono presenti sei bottoni divisi in due gruppi da tre.

opzioni di layout xCode 6

Clicca il pulsante nel mezzo del primo gruppo, in questo modo attiverai l’Assistant Editor. Nel secondo menu disattiva la 1 e la 2 opzione, così non avrai le due colonne a disturbarti. Il tuo Xcode dovrebbe mostrarti qualcosa simile a questo:

assistant-editor-xcode

Nella finestra a sinistra trovi lo storyboard mentre nella finestra di destra il file ViewController.swift.

Il ViewController è la classe che gestisce la View e potenzialmente tutti i suoi elementi all’interno. Si chiama Controller proprio per questo motivo. Il file ViewController.swift è stato creato in automatico da Xcode perché frutto della selezione del template Single View Application.

Quindi la classe ViewController, contenuta nell’omonimo file, gestisce la grafica del ViewController presente nello Storyboard. I nomi sono uguali perché, per l’appunto, fa riferimento al nome della classe.

Nei prossimi tutorial scoprirai come utilizzare gli altri tipi di ViewController e come meglio lavorarci. Per ora devi concentrarti sui concetti basilari.

Seleziona la Label e tenendo premuti CTRL + CLICK (ctrl+tasto sinistro mouse) trascina la linea dalla prima finestra verso la seconda. Precisamente deve cascare dentro il codice racchiuso tra le parentesi graffe della classe ViewController:

collegare un elemento della storyboard al codice xCode 6

Appena rilasciato il click si aprirà un menu che ti aiuterà nella creazione del collegamento.

L’unica cosa che devi settare, in questo caso, è il nome del collegamento che gestirà la label presente nell’interfaccia. Chiama la connesione nameLabel. Una volta assegnatogli il nome, premi Connect:

connettere un label al codice xCode 6

La connessione genererà questo codice

@IBOutlet var nameLabel: UILabel!

condividi xcoding

Se cominci a vedere il fumo uscire dal tuo Mac o da te, prenditi una pausa. Fermati 10 minuti, fai una partita a League of Legends, cazzeggia o fai quello che ti pare.

Quando torni e se ti va, puoi sempre iscriverti alla nostra newsletter per rimanere aggiornato.

[mailmunch-form id=”101287″]

Cos’è una IBOutlet e IBAction?

IBOutlet sta letteralmente per Interface Builder Outlet (connessione Interface Builder) serve a far capire ad Xcode che questa variabile è nata per connettere un elemento dell’interfaccia al codice.

IBAction (che vedrai più sotto) sta per Interface Builder Action crea delle funzioni che nascono per gestire il comportamento o gli eventi degli elementi grafici.

Se già variabili, classi e funzioni ti suonano come nuovi è perché ti mancano le basi della programmazione. Puoi provvedere cominciando a seguire il corso gratuito sul linguaggio swift.

Le Action vengono invocate (“chiamate”) quando viene generato un particolare evento. Ad esempio quando viene premuto invio dalla tastiera o quando viene cliccato un bottone si dice che è stato lanciato un evento, questo evento può essere intercettato per eseguire delle particolari azioni.

Nel nostro caso intercetteremo l’evento di scrittura nella TextField per poter recuperare il testo inserito dall’utente e modificare, contemporaneamente, la label. Se ti va di approfondire in modo dettagliato puoi seguire il mio corso di sviluppo applicazioni iOS con il linguaggio Swift.

Connettere la TextField al codice

Crea l’ultima connessione tra il TextField e codice. Dato che dovrai intercettare l’evento di scrittura, devi modificare alcune impostazioni della finestra di connessione.

Quindi, la TextField non si connetterà passivamente con una IBOutlet, bensì eseguirà delle azioni che verranno gestite dalla IBAction.

Il Name, questa volta, non rappresenterà il nome della TextField bensì la funzione che verrà invocata ad ogni evento. Pertanto rinominala in helloWorld_editingChangedCambia i dati della finestra di connessione nei seguenti:

ibaction-e-xcode

Una volta che avrai cambiato la Connection, da Outlet a Action, si apriranno altre impostazioni.

  • Event: è il nome dell’evento che viene intercettato dalla IBAction. Nel tuo caso sarà un evento di tipo Editing Changed. In questo modo ogni qual volta inserirai del testo nella TextField la funzione helloWorld_editingChanged verrà invocata.
  • Type: é l’oggetto che scaturisce l’evento. Dato che è una UITextField (User Interface Text Field), cambialo nell’omonimo dato.

Una volta connesso, il codice che dovresti avere è:

@IBAction func helloWorld_editingChanged(_ sender: UITextField) {
        
}

La modifica del testo

L’ultima cosa da fare a livello di programmazione è inserire il codice all’interno del funzione helloWorld_editingChanged. La funzione dovrà modificare il testo della nameLabel scrivendo “Ciao” + il testo contenuto nella textField:

    @IBAction func helloWorld_editingChanged(_ sender: UITextField) {
        //accedo al testo della Label con la notazione .text
        //il sender rappresenta l'oggetto TextField che invoca questa funzione. Anche qui posso accedere al testo scritto dall'utente con il .text
        self.nameLabel.text = "Ciao \(sender.text!)"
    }

L’evento Editing Changed, ogni volta che l’utente immetterà un carattere nel campo di testo, invocherà il metodo helloWorld_editingChanged che, a sua volta, modificherà il testo della nameLabel.

UILabel e UITextField sono entrambi delle classe. Puoi investigare meglio le loro proprietà e metodi, leggendo la documentazione ufficiale Apple:

Build & Run

Ora non ti resta altro che premere Run (il triangolo in alto a sinistra per l’avvio dell’applicazione) per vedere in azione la tua prima applicazione iOS con il linguaggio Swift:

run-prima-applicazione-ios-e-linguaggio-swift

Considerazioni e Download del progetto

Il tutorial è abbastanza superficiale e comprensibile (spero!) anche per chi non ha delle conoscenze di background. Ad ogni modo se hai avuto qualche problema o vuoi semplicemente scambiare due chiacchere (o un ringraziamento/critica) lascia pure un commento.

Se già conosci il linguaggio Swift, ti indirizzo ai prossimi tutorial:

Se invece vuoi seguire un percorso più dettagliato, puoi acquistare il corso di sviluppo applicazioni iOS con il linguaggio swift.

Download

Se il tuo progetto non dovesse funzione per qualche oscuro motivo, di seguito puoi scaricare quello fatto da me e confrontarlo con il tuo:

Download Dropbox

Changelog

  • 21/03/2018 – Aggiornamento del tutorial ad Xcode 9 e Swift 4
  • 17/09/2016 – Creazione changelog, modifica e correzione del testo. Aggiornamento ad Xcode 8 e Swift 3.

Buona Programmazione!

Imparare a programmare in Swift con il Corso Gratuito

Lo sai qual’è l’errore che commette il programmatore alle prime armi? Andare dritto alla pratica senza prima aver formato delle ottime basi.

Chi mi conosce lo sa! Punto tantissimo sullo sradicare questa stupida concezione che, almeno noi italiani, abbiamo innata fin dai tempi più remoti.

Quante volte ti sarà capitato, ad esempio a scuola, di pensare: ma questo disgraziatissimo professore quando la smette di spiegare? Io voglio vedere gli esercizi!

Ahh! ti ho beccato!

Attenzione, se stai pensando di uscire dal blog ti dico che io non sono un professore! Sono un appassionato come te, con tanta voglia di imparare e diffondere quel po’ che so riguardo la programmazione e la creazione di applicazioni.

Quindi, se più o meno hai capito come la penso e ti piace il mio modo di ragionare ora ti dico che il modo migliore per imparare a creare un’applicazione è partire dalle fondamenta.

Ho una particolare visione di come si possa creare un’ottima applicazione e di quali siano gli step per raggiungere l’obiettivo, sono 4 ed ecco come li ho suddivisi:

la piramide del buon programmatore

Se gli antichi Egizi conoscevano già questa tecnica perché non adoperarla anche tu?

Ora, se parti bene e dal basso in men che non si dica raggiungerai la vetta, è tutta questione di buona volontà.

Il primo step è fondamentale e grazie ad un corso gratuito che ho creato riuscirai a passare al livello successivo.

Corso linguaggio di programmazione Swift per nuovi programmatori e non

Se anche tu vuoi intraprendere la scalata del buon programmatore, INIZIA DA QUA -> corso di programmazione Swift. Adesso ti riassumerò brevemente cosa troverai nel corso. Per una descrizione dettagliata ti invito a visitare la pagina apposita.

Cos’è Swift

Swift è il nuovo linguaggio di programmazione introdotto da mamma Apple in sostituzione dell’ormai “datato” Objective-C. Se non sai cos’è un linguaggio non preoccuparti, ti spiegherò anche questo!

Swift è la fusione perfetta tra Objective-C e C, prende il meglio da tutti e due i linguaggi e ne fa una cosa propria. Prima dell’avvento di Swift, per la creazione di applicazioni, si utilizzava Objective-C, un linguaggio che traeva molte delle sue caratteristiche da un altro linguaggio chiamato C.

Se non provieni da Objective-C o da C non preoccuparti! Swift è ancora più semplice dei due linguaggi sopraccitati.

corso linguaggio di programmazione Swift

Cosa tratta il corso programmazione Swift

Il corso linguaggio di programmazione Swift è un corso di difficoltà crescente. Nella prima parte del corso apprenderai le nozioni generali sia della programmazione che del nuovo linguaggio Apple. Nella seconda parte ti insegnerò il pane quotidiano di ogni buon programmatore, la programmazione ad oggetti.

Il corso di programmazione Swift è diviso in 3 moduli, per un totale di più di 20 lezioni, ogni lezione tratta un solo argomento alla volta e partono dal principio quindi, in linea di massima, gli argomenti trattati sono:

  • La definizione di linguaggio di programmazione.
  • Le variabili e costanti in Swift.
  • Gli array e dizionario in Swift.
  • I control flow in Swift.
  • Le funzioni e le funzioni di funzioni.
  • Le closure in Swift.
  • Gli enum.
  • Le struct, metodi e attributi.
  • La programmazione ad oggetti in Swift.
  • Metodi e attributi di una classe.
  • Ereditarietà e struttura delle classi.
  • Ecc

Come apprenderai il linguaggio Swift. Esercizi e Attestato finale

Per darti la possibilità di apprendere in modo preciso i concetti, all’interno di ogni lezioni, sono presenti dei Test e esercizi pratici con cui dovrai confrontarti. Ogni Test verrà corretto da me e se superato potrai accedere al test della lezione successiva.

Sono fondamentali gli esercizi e la pratica! Ogni lezione non è solo teorica ma ha con se una serie di esercizi e esempi che fanno parte della quotidianità dello sviluppatore di applicazioni.

Un esempio di esercizio? Eccolo -> Crea una funzione che controlli il livello di salute di un Personaggio. Quando la vita arriva a 0 resetta il sistema, quando la vità e a metà manda un segnale ecc ecc.

Registrarsi al corso e completare gli esercizi è fondamentale per l’acquisizione di un attestato che certifica le tue conoscenze nel linguaggio di programmazione Swift:

attestato corso linguaggio di programmazione Swift xCoding_IT

Cosa avrai appreso a fine corso

Quello che voglio è trasmetterti il mio metodo. A fine del corso linguaggio di programmazione Swift spero che abbia formato il tuo background, di conoscenze e di metodologie, necessario a risolvere qualsiasi problema informatico di basso livello.

Punto moltissimo sul Divide et Impera! Ovvero darti la capacità di dividere un problema in tanti sotto problemi più semplici in modo che, ad ogni problema, riuscirai a trovare tante piccole soluzioni che messe insieme ti portino alla risoluzione dello stesso.

So che ho parlato molto di aria fritta, volevo semplicemente descriverti il mio modo di ragionare e pensare. Su questo si baseranno quasi tutti gli articoli del mio blog.

Darti un metodo per me è fondamentale, solo così riuscirai a svincolarti dalla continua visione di tutorial e video (che in questo modo ti serviranno solo per apprendere nuovi concetti).

Dove trovo il corso?

Non perdere altro tempo, se vuoi imparare a programmare in Swift, in alto nel menu c’è il pulsante “Corsi“, li troverai il corso linguaggio di programmazione Swift.

In alternativa, clicca sulla seguente link -> Corso linguaggio di programmazione Swift

Buona Programmazione!

Nasce xCoding.it – Sviluppa, Crea e Codifica i tuoi sogni

Cos’è xCoding.it

xCoding.it è un portale di e-learning gratuito rivolto alla programmazione, allo sviluppo di applicazioni per il mobile e ai giochi.

Qual’è il mio obiettivo ? 

Il mio obiettivo è quello di aiutare chi come me ha avuto difficoltà ad avvicinarsi al mondo della programmazione. Sono parecchi i siti che offrono servizi simile al mio e ne sono pienamente consapevole, quello però che manca al resto e che cerco di implementare io è un supporto e un contatto costante con chi apprende.

Ecco perché sto creando dei corsi che non sono solo da leggere, ma cercano di portare lo studente a diventare parte attiva del corso mediante degli appositi esercizi e test da svolgere. Lo so che è un approccio un po’ da scuola, ma se non ci si esercita subito su quello che si sta imparando si rischia di arrivare a fine corso più confusi di quando si è iniziati a seguirlo.

Ogni lezione, quando possibile, sarà corredata da un relativo test che una volta completato verrà corretto da me.

Chi sono io ?

Io sono Giuseppe, uno studente di Ingegneria Informatica con la passione, guarda caso, per la programmazione. Non sono un esperto! Lo voglio ben chiarire perché so che c’è gente molto più brava o che spiega meglio di come lo faccio io.
Il mio amore nel diffondere l’arte della programmazione nasce principalmente come hobby ma spero che, acquistando esperienza, possa diventare un lavoro.

Prima di xCoding mi facevo chiamare legolas93 e mi dilettavo insieme ad un mio amico, Joshua, a creare hack e cheat per giochi online. Forse qualcuno che giocava a metin2 o 4story si ricorderà di noi o di elitecheaters, in caso contrario non vi siete persi niente! :D

Cosa troverete sul sito ?

Per ora ben poco, solo un paio di corsi che spero di ampliare e aggiornare. Nello specifico sto creando delle lezioni sulla :