Compatibile con Xcode 8

Size Class in Xcode. Dai piena potenza all’Auto Layout!

ENTRA NEL NOSTRO GRUPPO FACEBOOK

L’Auto Layout, come hai visto nella precedente lezione, non risolvere tutti i problemi legati ai cambiamenti di dimensione dei dispositivi. Ma le Size Class in Xcode si!

Il problema dell’Auto Layout è che genera un’interfaccia che si adatta ai soli cambiamenti di dimensione e che non tiene conto delle proporzioni, dell’orientamento e di tanti altri fattori che vedrai tra poco.

Oppure, in un iPad potresti inserire una quantità di elementi nettamente maggiore rispetto a quelle che potrebbero andare in un iPhone 7. Ma come puoi farlo se l’Auto Layout vincola gli elementi su tutti i dispositivi?

Se l’Auto Layout ha risolto il problema del posizionamento degli elementi, qual è lo strumento che permette di modificare radicalmente il layout al variare delle dimensioni disponibili o dell’orientamento?

La risposta a tutte queste domande è una sola: le Size Class. Le Size Class in Xcode sono uno strumento che permettono di modificare i Constraint o l’interfaccia al variare dell’area disponibile per la visualizzazione del ViewController.

Questo tutorial è un estratto del mio corso di sviluppo applicazioni iOS con il linguaggio Swift. Se ti va dagli un’occhiata ;)

a-cosa-servono-le-size-class-in-xcode

Nelle immagini che vedi sopra ho creato un solo layout (quello in verticale) e l’ho riadattato, utilizzando le Size Class in Xcode, nella modalità Landscape (iPhone in orizzontale).

Le Size Class sono uno strumento potentissimo. Insieme all’Auto Layout e alle Stack View completeranno la tua conoscenza in materia di interfacce dinamiche.

Quindi, sei pronto ad utilizzare le Size Class in Xcode?

Allora cominciamo!

Cos’è una Size Class? Compact, Regular e Any

Una Size Class è il nome che viene assegnato alla quantità di spazio (inteso come Height e Width) che ha a disposizione la tua applicazione.

Peppe, che hai detto?

Ti faccio subito un esempio.

Partiamo da un presupposto: tutti gli iPhone hanno pressoché le stesse dimensioni. Anche se cambia di poco la Width o la Height, lo spazio verticale/orizzontale (Portrait/Landscape) inteso come area, varia di poco.

In base a questa piccolissima considerazione, voglio aggiungere una nozione di vitale importanza.

Dirai che tutti gli iPhone hanno:

  • Altezza (Height) di tipo Regular (è solo una sigla) quando si trovano in posizione di Portrait (orientamento verticale).
  • Larghezza (Width) di tipo Compact quando sono in posizione di Portrait (orizzontale).

Cosa succede quando si ruota il display?

in Landscape (posizione orizzontale) gli assi vengono traslati e, di conseguenza, la Height diventa di tipo Compact e la Width di tipo Regular (solo per gli l’iPhone Plus).

L’iPhone Plus, fa un testo a parte, infatti si differenzia in Landscape in quanto avrà Size Class di tipo: Height Compact e Width Regular.

Dall’altro lato, gli iPad hanno sia la Height che la Width di tipo Regular in Landscape che in Portrait. L’immagine dovrebbe aiutarti meglio a capire cos’è una Size Class e le differenze con i vari display.

tipi-di-size-class-tra-i-vari-dispositivi-ios

Per gli iPad, in realtà, sono presenti ulteriori Size Class in quanto il dispositivo permette lo Split View dello schermo (due app contemporaneamente aperte).

La Universal Size Class

Oltre le Size Class di tipo W:Regular/H:Compact (o viceversa) o W:Regular/W:Regular ne esiste una terza.

La terza Size Class è quella che racchiude tutti i dispositivi (iPad e iPhone) e che prende il nome di Size Class Universal

Di default, Xcode, sceglie automaticamente questa Size Class. Questo significa che i vincoli di Auto Layout che inserirai nello Storyboard verranno distribuiti a tutte le altre Size Class (e di conseguenza anche a tutti i dispositivi).

La Size Class universale ha come valori in Landscape e Portrait:

  • Height: Any 
  • Width: Any

Domanda!

Peppe, ma di base, nello Storyboard, i ViewController non hanno la dimensione di un dispositivo reale?

Vero. Ma, come ti dicevo poc’anzi, lavori visualizzando un dispositivo reale quando, in realtà, stai creando la grafica ed i vincoli per tutti i dispositivi (cioè sei nella Size Class di tipo w: Any h: Any). Motivo per cui tutti gli elementi grafici ed i vincoli che inserisci li vedi sia su iPad che su iPhone (anche se in maniera distorta).

In conclusione, grazie alle Size Class, sarai in grado di creare un layout universale utilizzando la Size Class Any e di modificarne l’aspetto quando questo risulterà distorto in una delle altre Size Class. In pratica, creerai vincoli o aggiungerai elementi nella Size Class universale e li modificherai nelle altre Size Class solo quando effettivamente necessario.

Dove vengono gestite le Size Class in Xcode

Solo a scopo didattico, poi lo riprenderemo nel dettaglio tra poco, voglio farti vedere come Xcode gestisce le Size Class.

Già nel tutorial precedente hai visto che esiste una sorta di menu, all’interno dello Storyboard, che ti mostra tutti i dispositivi iOS. Ecco, questo è lo strumento di gestione delle Size Class.

Accanto al nome di ogni dispositivo è descritta anche la Size Class che lo governa:

size-class-xcode-8

Cambiando dispositivo o cambiando Orientation vedrai cambiare anche la Size Class di riferimento.

Lo ripeto perché Rocky disse che non faceva male. Il dispositivo selezionato in questo pannello non influisce sui vincoli che stai creando. Infatti l’Auto Layout, a meno che non esplicitato (vedrai dopo come), inserirà i vincoli sulla Size Class w: Any e h: Any.

Quindi questo strumento, così per come lo stai utilizzando ora, è solo un supporto per vedere velocemente come appare il layout nelle varie Size Class.

Il progetto di partenza

Partiremo esattamente da dove c’eravamo lasciati nella lezione sull’Auto Layout. Cioè dal progetto finale dove hai sfruttato i Multiplier per creare interfacce dinamiche (cioè che si adattano automaticamente e proporzionalmente alle dimensioni del display in uso).

Quello che faremo sarà modificare il layout nella versione landscape degli iPhone che hanno Size Class w: Compact e h: Compact. Ti ricordi quali sono? (se no, vai a vedere l’immagine ad inizio tutorial)

size-class-xcode-8

Se non hai seguito il tutorial precedente, puoi scaricarlo da qui (o ricrearlo da te):

[sociallocker]Download DropBox[/sociallocker]

Installare e Disinstallare vincoli in una Size Class

Spostati nella Size Class w: Compact, h: Compact. Cioè seleziona, dal pannello delle Size Class, un iPhone diverso dal Plus e cambia l’Orientation in Landscape.

cambiare-la-size-class-in-xcode

Adesso seleziona un vincolo qualsiasi presente nell’interfaccia. Mi serve solamente per farti capire una cosa. Una volta selezionato spostati nel suo Size Inspector.

Qui trovi tutte le proprietà del vincolo come già spiegato nella lezione precedente. Tra questi, quello che adesso investigheremo è quella checkbox con scritto Installed.

Questa checkbox ti comunica la Size Class in cui è installato il vincolo selezionato. Non c’è scritto nessun riferimento alla Size Class, quindi, per esclusione e per quello detto precedentemente, ti sta comunicando che il vincolo è installato nella Size Class universale (Any).

controllare-i-vincoli-installati-nelle-size-class

Così com’è, però, il Layout non ci sta bene. Devi togliere questi vincoli per poter ricrearne di nuovi in questa specifica Size Class.

Come si tolgono, dunque, i vincoli in una determinata Size Class?

Disinstallare vincoli

Disinstallare è diverso da cancellare. Quello che vogliamo è mantenere i vincoli in tutte le altre Size Class e toglierli solamente nella wC hC.

L’errore che fa lo sviluppatore alle prime armi è: “Bene, ho visto che c’è questo checkbox. Adesso lo deseleziono ed il gioco è fatto”. Sbagliato!

Togliere la spunta al checkbox universale (cioè a quello che vedi sopra) significa disinstallare il vincolo dalla Size Class Any, ovvero da tutti i dispositivi. Non è così che devi procedere.

Dunque, come si fa?

Accanto alla checkbox è presente un bottoncino a forma di +. Premilo. Una volta fatto comparirà una finestra, simile a quella delle Outlet e Action, che ti chiederà di inserire un nuovo checkbox per la Size Class in cui ti trovi in questo momento.

Da qui è possibile modificare i valori della Size Class in cui vuoi installare/disinstallare il vincolo selezionato. Il Gamut è una scala dei colori praticamente una sorta di Size Class per i dispositivi che hanno tonalità differenti, lasciala sempre con il default.

disinstallare-un-vincolo-di-auto-layout-in-una-size-class

Una volta fatto, subito dopo il primo checkbox ne comparirà un altro che riporterà i valori della Size Class per cui è stato creato.

Basterà togliere la spunta dal ckeckbox della Size Class corrente che, il vincolo a cui è riferito, verrà disinstallato. Per velocizzare tutto il procedimento puoi selezionare tutti i vincoli e disinstallarli in una sola volta.

Quando i vincoli vengono disinstallati, non scompaiono dal Document Outline, bensì diventano più chiari rispetto al blu intenso. 

disinstallare-vincoli-in-una-size-class-con-xcode

Fai la prova del nove. Ritorna in Portrait e vedrai che lì i vincoli ci sono.

Se dovessi avere dei problemi, scrivi un commento in fondo alla pagina!

condividi xcoding

Se cominci a vedere Size Class da tutte le parti, prenditi una pausa amico mio. Nel frattempo, se ti va, dammi una mano a diffondere xCoding.it!

[addtoany]

Grazie ;)

Installare vincoli

Adesso che non hai più vincoli nella Size Class w Compact e h Compact è arrivato il momento di ricrearli a tuo piacimento. Disloca gli elementi più o meno in questo modo:

esempio-layout-landscape

Adesso mi basta creare dei nuovi vincoli, giusto?

Assolutamente no.

Creare dei vincoli adesso significherebbe ricrearli nuovamente nella Size Class Any Any. Potresti crearli per poi disinstallarli dalla Any ed installarli solo qui, nella compact, ma non è il modo corretto di procedere.

Nel pannello delle Size Class c’è un bottone chiamato Vary for TraitsCliccando si aprirà un pannello in cui ti verrà richiesto di selezionare due checkbox: Width ed Height.

vary-for-traits-size-class-xcode

Questo pannello serve per due motivi:

  1. Ad installare vincoli sulla Size Class corrente. Solo se selezionati entrambi i checkbox Width ed Height.
    • Per esempio: Se li selezioni entrambi, i vincoli che installerai verranno messi solo nei dispositivi con Size Class w:Compact  h:Compact.
  2. Ad installare i vincoli sulle variazioni della Size Class corrente in base al checkbox selezionato.
    • Per esempio: Se selezioni solo il checkbox Width, i vincoli, verranno installati sulla Size Class w:Any e h:Compact.

Una volta che avrei selezionato le combinazioni del Vary for Traits, la barra delle Size Class, diventerà di colore blu. Al posto delle normali Size Class vedrai i dispositivi che saranno affetti da questa variazione.

Dato che vuoi modificare il layout della w:Compact h:Compact, seleziona entrambi i checkbox del Vary for Traits ed aggiungi i nuovi vincoli:

Più semplice a farsi che a dirsi? fammi sapere un po’ che ne pensi!

Non solo vincoli. Font, Background, Oggetti grafici

La regola è semplice. Dove vedi un bottone + accanto a qualcosa è perché quella proprietà può essere influenzata dalle Size Class.

Un primo esempio potrebbe essere il Font che, negli iPad, risulta davvero minuscolo rispetto a come appare su iPhone. Proviamo a modificarlo.

Vai sulla Size Class di un iPad qualsiasi (tanto hanno tutti w:Regular h:Regular). Seleziona la TextView, vai nell’Attributes Inspector e accanto a Font, seleziona il simbolo +. Aggiungi la nuova Size Class e modifica il Font per questa:

font-e-size-class-xcode

Nell’animazione che vedi sopra ho aggiunto anche la variazione del Color del testo nella Size Class w:Regular h:Regular solo per far capire meglio la potenzialità dello strumento.

Puoi disinstallare anche interi oggetti grafici. Non ti serve un Button nella Size Class dell’iPad? scendi in basso all’Attributes Inspector e, come per un vincolo, aggiungi la Size Class e togli la spunta alla sua checkbox.

Oppure, ti serve una ImageView nell’iPad dato che c’è molto più spazio? Stesso identico procedimento. Aggiungi l’oggetto al ViewController e lo installi nella Size Class in questione.

Cosa vuoi di più dalla vita?

Considerazioni

Una volta capito il meccanismo che regola le Size Class ed il principio dell’installare e disinstallare i vincoli, creare interfacce dinamiche sarà un vero e proprio gioco da ragazzi.

Xcode 8 ha semplificato moltissimo l’interazione e l’utilizzo delle Size Class, tant’è che ho dovuto riscrivere completamente il tutorial dato che molti passaggi risultavano obsoleti e superflui (il tutorial è passato da 6000 parole a 2000).

Nel caso in cui qualcosa non ti fosse chiara, dato che questa lezione ha un livello di complessità leggermente più alto, ti prego di farmelo sapere con un commento.

Buona Programmazione!

Changelog

  1. 25/09/2016 – Aggiunto il changelog. Riscritto il tutorial in un’ottica semplificata grazie alle novità di Xcode 8.

Start typing and press Enter to search

Come aggiungere ed eliminare da una TableView in Swifttutorial-webview-linguaggio-swift