Compatibile con Xcode 8

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

ENTRA NEL NOSTRO GRUPPO FACEBOOK

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 375×667 Points mentre un iPhone 6+/7+ ecc ha una dimensione di 414×736 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.

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.

Start typing and press Enter to search

come-creare-la-tua-prima-applicazione-ios-con-il-linguaggio-swiftCome creare una applicazione di Foto Editing per iOS con Swift.