Compatibile con Xcode 8

Le Stack View in Xcode. Un nuovo modo di concepire le interfacce

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Vedi vincoli di Auto Layout uscire dalle pareti? Chiami Size Class il tuo partner?

Se da un lato la creazione delle interfacce per le applicazioni iOS è diventata più semplice con l’avvento dello storyboard, dei vincoli di auto layout e delle proprietà delle Size Class, dall’altra parte abbiamo assistito ad una crescita esponenziale del numero di vincoli e quindi della difficoltà di risolverli in maniera semplice ed intuitiva.

Fortunatamente Apple si è accorta di questo problema o pseudo problema e, da Xcode 7, ha introdotto un nuovo strumento per la creazione e realizzazione di interfacce multipiattaforma. Il suo nome? Stack View. Le Stack View in Xcode rappresentano l’evoluzione della composizione di un layout iOS.

Ma, rispondiamo subito alla domanda, che sicuramente ti frullerà in testa, cos’è una Stack View in Xcode?

Una Stack View è un contenitore di view, quindi di oggetti grafici. Puoi immaginarlo come ad un bicchiere vuoto. Gli elementi che vengono inseriti dentro pensali come all’acqua. Cosa succede all’acqua se la versi dentro un bicchiere?

L’acqua si adatta e riempie il bicchiere per intero.

Stack View in Xcode

Una Stack View in Xcode è una particolare View che riesce a distribuire le sue dimensioni agli elementi che vi si inseriscono. Definite le dimensioni di una Stack View, tramite in vincoli di Auto Layout, gli elementi che gli traverserai dentro verranno spalmati in maniera equa con delle regole che tu stesso stabilirai.

Ti faccio un esempio. Immagina di voler inserire due immagini alla tua interfaccia. Le due immagini devono avere le stesse dimensioni. Se con l’auto layout e le size class dovevi definire dei vincoli ad entrambe le UIImageView, adesso ti basterà definire dei vincoli per il contenitore, cioè la Stack View, e poi sarà lei a dire alle immagini di distribuirsi in maniera uniforme.

Quindi se vuoi posizionare due immagini, che ricoprono ognuna una metà del dispositivo, creerai una Stack View che vincolerai in modo da fargli prendere tutte le dimensioni dell’interfaccia, quindi 100% delle dimensioni, ed infine gli piazzerai dentro le immagini. Queste ultime, senza utilizzare nessun vincolo, si adatteranno per ricoprire ognuno il suo spazio in maniera equa, quindi 50% una e 50% l’altra.

E se dovessi mettere tre immagini? la Stack View come reagirebbe?

La Stack View è in grado di gestire N elementi. Quindi le 3 immagini verranno ridotte in modo che tutte abbiano la stessa dimensione. Quindi 33.3% della dimensioni per tutte le immagini dentro la Stack View.

Una Stack View in Xcode ha l’unico vincolo di posizionare gli elementi o tutti in verticale o tutti in orizzontale. Quindi avrai solamente due tipologie di Stack View:

  • Horizontal: Una Stack View che distribuisce i suoi elementi lungo l’asse orizzontale.
  • Vertical: Una Stack View che distribuisce i suoi elementi lungo l’asse verticale (come quella di cui ti ho parlato). 

Ma così una Stack View è quasi inutile se non posso disporre gli elementi come preferisco!

Ed è proprio qui che ti sbagli. La particolarità delle Stack View in Xcode è che possono contenere, come oggetti interni, altre Stack View. Queste Stack View potranno essere o di tipo orizzontale o verticale. Se sei passato per lo sviluppo di applicazioni per WatchOS avrai sicuramente potuto apprezzare la bellezza del sistema utilizzato per la creazione delle interfacce (tramite i group). Le Stack View introducono un sistema analogo anche per le interfacce iOS e OSX.

Premessa fatta! sei pronto a rivoluzionare il tuo modo di creare le interfacce? Allora vediamo insieme come utilizzare le Stack View in Xcode ed il linguaggio Swift.

Aggiungere una Stack View

Comincia creando un nuovo progetto iOS Single View con il linguaggio swift. Spostati nello storyboard. Se noti, vicino ai tre bottoni di Auto Layout è presente un nuovo bottone. Il bottone si chiama Stack e serve a creare le Stack View (lo vedrai tra poco). Invece, se navighi nell’Object Library, vedrai che sono presenti due nuovi oggetti: Horizontal Stack View e Vertical Stack View.

Stack View in Xcode e Storyboard

  • Bottone di Stack: Permette di inserire in una Stack gli oggetti selezionati dall’interfaccia.
  • Gli oggetti Stack View in Object Library: Trascinandoli nell’interfaccia inserirai un oggetto Stack View.

Apple ha pensato di aggiungere un bottone che permettesse, una volta selezionati gli oggetti dell’interfaccia, di racchiuderli in una Stack View. Vedrai che quel bottone ti tornerà utilissimo quando avrai a che fare con layout più complessi composti da Stack View inserite in altre Stack View.

Per adesso, però, vediamo il sistema classico d’inserimento che prevede l’aggiunta di una Stack View dall’Object Library.

I vincoli di Auto Layout della Stack View

Se trascini una Vertical Stack View nel tuo ViewController vedrai che ha le sembianze di una normalissima UIView.

Come ti dicevo, la Stack View per funzionare correttamente deve essere vincolata con l’interfaccia tramite i vincoli di auto layout. Proviamo a realizzare il layout d’esempio che ti ho fatto vedere ad inizio tutorial. Dai alla Stack View il vincolo Equal Widths e Equal Heights con la View dell’applicazione. Poi centrala rispetto all’asse X e Y.

Infine modifica il suo vincolo di larghezza, cambiando il Multipler, da 1 a 0.9 (così occuperà il 90% della larghezza). Esegui la stessa identica cosa per il vincolo d’altezza.

Stack View e vincoli esterni

Questi saranno gli unici vincoli che utilizzerai. Infatti gli elementi che adesso andrai ad inserire nella Stack View non hanno più bisogno di essere vincolati. Sarà la Stack View a dettare come devono distribuirsi gli elementi al suo interno. 

Ad ogni modo è necessario che tu conosca come utilizzare i vincoli di Auto Layout e le Size Class. Se non l’hai ancora fatto ti invito a seguire questi due tutorial:

Se invece ti interessa approfondire maggiormente lo sviluppo delle applicazioni iOS, ti invito a seguire il mio corso: Corso sviluppo applicazioni iOS con Swift.

Premessa fatta, procediamo!

Adesso prova ad aggiungere due UIImageView, trascinandole, all’interno della Stack View.

Aggiungere in una Stack View

Quando Xcode dovesse avvisarti con degli errori in giallo, ti consiglio di utilizzare il bottone di Update Frame contenuto nel quarto bottone in basso (Resolve Auto Layout Issue).

Le proprietà della Stack View

Non mi avevi detto che la Stack View distribuisce, gli elementi, i maniera uniforme?

Si. Ti avevo detto che era possibile farlo ma non ti ho detto che di default si comporta in questa maniera. Per poter correttamente visualizzare gli elementi è necessario modificare alcune proprietà della Stack View. Per farlo devi selezionarla ed andare nell’Attributes Inspector.

Proprietà Stack View

  • Axis: Vuoi che la Stack View abbia orientamento Vertical o Horizontal?
  • Alignment: Definisce l’allineamento degli oggetti che vengono inseriti all’interno della Stack. Fill significa: riempi per intero lungo. Quindi occuperanno tutta l’area. Puoi anche scegliere se allinearli centrali, o verso il lato destro o sinistro (Center, Leading, Trailing).
  • Distribution: Definisce la distribuzione degli elementi. Fill li spalma senza regole purché riempiano tutta l’area (in fondo al tutorial scoprirai meglio come). Nel nostro esempio le due UIImageView riempiono tutta l’area ma in maniera disordinata. Esistono diverse politiche di Distribution.
    • Fill Equally: Distribuisci equamente gli elementi.
    • Fill Proportionally: Distribuisce gli elementi in maniera proporzionale. L’elemento più grande potrebbe occupare più spazio rispetto ad uno più piccolo.
    • Equal Spacing: Distribuisce gli elementi mantenendo solo la stessa distanza tra gli oggetti.
    • Equal Centering: Distribuisce gli oggetti in modo che siano alla stessa distanza dal centro della stack.
  • Spacing: Assegna un valore di distanza agli oggetti della Stack View. Di default è zero e rende gli oggetti attaccati l’uno all’altro.
  • Baseline Relative: Devo assegnare lo Spacing a partire dalla baseline di ogni oggetto (Il lato inferiore di un oggetto).

Seleziona Fill Equally e assegna 15 come Spacing

Stack View in Xcode Distribution Fill Equally

Ed ecco che la magia si è avverata. Con solo quattro vincoli ed una Stack View sei riuscito a posizionare correttamente due oggetti (normalmente avresti utilizzato almeno 8 vincoli).

Innestare le Stack View

Vediamo qualcosa di leggermente più complesso. Proviamo a creare un layout che prevede un’immagine a sinistra e delle informazioni scritte, cioè delle UILabel, a destra. Elimina tutto dal tuo storyboard oppure crea un nuovo progetto, aggiungi una UIImageView, due UILabel ed un UIButton. Posizionali in modo da creare il seguente layout (non mettere vincoli né stack view):

Schermata 2015-11-25 alle 00.36.56

Questo è il caso classico. In genere non comincerai mai inserendo delle Stack View, bensì dislocherai i tuoi elementi nell’interfaccia e vedrai successivamente come poterli vincolare o, in questo caso, stackare. 

Se noti, i due label ed il bottone sono tutti disposti sullo stesso asse verticale. Quindi, sono il boccone ideale per una Stack View di tipo verticale. Seleziona tutti e tre gli elementi, tenendo premuto ALT, e clicca il bottone di Stack che ti ho fatto vedere ad inizio del tutorial. Il bottone di Stack capirà come sono dislocati gli elementi, che hai selezionato, e sceglierà la corretta Stack View da utilizzare.

Stack View tramite bottone di Stack

Come previsto, gli elementi sono stati disposti dentro una Stack View Vertical. Per il momento non ti curare degli aspetti di dimensione o di spazio tra gli oggetti interni. Se ci fai caso, la Stack View appena creata si trova sullo stesso asse orizzontale dell’Image View. Potenzialmente, i due elementi, potrebbero essere inglobati da una Stack View di tipo Horizontal.

Dato che nessuno ti vieta di poter mettere Stack View dentro altre Stack View, seleziona gli oggetti e premi nuovamente il bottone di Stack:

Stack View dentro una Stack View

Siamo molto vicini al risultato che volevamo. Ancora non hai inserito alcun vincolo, ora è arrivato il momento di farlo. Infatti la Stack View più esterna ha bisogno di essere ancorata alla view tramite il classico sistema dell’Auto Layout. Quindi dagli larghezza 0.9, altezza 0.4 e centrala rispetto l’asse Y, alla posizione 0.4, e rispetto all’asse X.

Una volta fatto, si tratta solamente di distribuire correttamente gli elementi. Per fare questo, ti consiglio di lavorare con l’Assistant Preview in modo da vedere, istante per istante, le modifiche che stai facendo.

La struttura che in questo momento dovresti avere è la seguente:

Stack View dentro una Stack View

Hai appena creato una Stack View che, al suo interno, contiene una UIImageView ed un’altra Stack View. La Stack View esterna è di tipo orizzontale e per questo motivo riesci ad avere l’image view accanto alla stack verticale. Per semplicità e per fare delle prove puoi mettere un’immagine alla image view o assegnargli un colore di background in modo da poter visualizzarla in fase di run.

L’Image View sembra scomparsa nell’assistant preview. Di fatto, l’allineamento che gli impone la Stack View, in questo momento è Alignment Top, la porta fuori dall’area della Stack. Cambia l’allineamento in Fill per dare la possibilità agli elementi interni di adattarsi in base alla dimensione della Stack.

In fase di distribuzione, la Stack View, da più importanza all’Image View che agli elementi della Stack verticale. Di conseguenza la Stack verticale viene schiacciata verso destra e viene conferito più spazio all’image view. Cambia la distribuzione, quindi la Distribution, in Fill Equally. Così, sia la Image View che la Stack View verticale avranno lo stesso spazio in larghezza.

Infine dai un po’ di spazio tra la Image View e la Stack View verticale. Cambia l’attributo Spacing in 10. Eccoti l’illustrazione di tutti i passaggi spiegati:

Stack View in Stack View. Corretta distribuzione

A questo punto ci siamo quasi. Dobbiamo risolvere solo il problema della distribuzione degli elementi della Stack View verticale interna. Cambia il tipo di Alignment in Fill, così che gli elementi prendano tutta la larghezza della Stack. Per la Distribution c’è poco da fare. Se vogliamo tutti gli elementi in top dobbiamo ricorrere ad uno stratagemma.

La distribuzione di tipo Fill tiene in considerazione i parametri di Content Hugging Priority e Content Compression Resistance (li trovi nel Size Inspector). Questi attributi dicono all’elemento, come deve comportarsi in presenza di altri oggetti nella stack view o di vincoli quando non si utilizzano le stack. Più è alto il livello di compressione o riduzione e più l’oggetto prevarrà sull’altro. 

Nel nostro caso, modificando i parametri di Hugging e Compression non otterremmo mai l’effetto desiderato. Il motivo? Ci sono tre oggetti. Quindi, obbligatoriamente, uno dei tre dovrà essere più grande degli altri.

Inserendo una UIView all’interno della Stack View verticale avremo quattro oggetti e potremo lavorare con le priorità. Ma la cosa stupefacente, della distribuzione di tipo Fill, è che quando non riesce a risolvere il problema delle priorità, assegna priorità maggiore all’ultimo elemento in Stack (cioè quello più in basso nel caso della Stack View Vertical). Quindi la UIView avrà dimensione maggiore e gli altri elementi saranno correttamente distribuiti.

Stack View in Stack View. Utilizzo delle View come supporto

Well done. Se ti fai due calcoli sul numero di vincoli che avresti dovuto mettere per ottenere lo stesso risultato ti stupirai da solo.

Le Stack View in Xcode sono semplici, veloci e richiedono poche operazioni per poter creare layout complessi come quello precedente. In più, se ci metti che possono essere innestate uno dentro l’altra, capisci la vera forza di questo nuovo strumento.

Infatti, come ultimo esempio, proviamo ad aggiungere un bottone accanto a quello già presente. Prendi un nuovo UIButton dall’Object Library e trascinalo e posizionalo sotto quello esistente. Poi selezionali entrambi e premi su Stack. Cambia il tipo di Axis, della Stack View, in Horizontal e modifica la distribuzione in Fill Equally.

3 livelli di Stack View

Devo aggiungere altro?

Ebbene sì. Non è assolutamente finita qua.

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 :-)

Nascondere una Stack View ed effetti di transizione

Immagina che questo esempio che ti ho fatto vedere sia l’interfaccia di un’applicazione di fotografie e precisamente un ViewController che mostra i dettagli di una foto (magari precedentemente selezionata da una tabella). Ipotizziamo anche che vuoi aprire e chiudere la finestra dei dettagli per visualizzarli o meno. Sapresti come fare?

Se lo sai, il tuo sistema prevederà sicuramente di passare a hidden le proprietà degli elementi e poi di ridimensionare la image view per fargli occupare lo spazio prima occupato dalla finestra dei dettagli.

Con le Stack View tutto questo processo è automatizzato.

Seleziona la Stack View interna, quella verticale contenente i bottoni e le Label. Spostati nell’Attributes Inspector e, abilitando e disabilitando la proprietà hidden, vedrai che scomparirà la Stack View con tutti i suoi elementi e la Image View si ridimensionerà automaticamente:

Hidden di una Stack View

Le Stack View, oltre a rimpicciolire gli elementi quando vi se ne inseriscono di nuovi, hanno la capacità di riallargare gli elementi nel caso in cui qualcuno di essi dovesse essere eliminato o nascosto (hidden true).

Questa sua particolarità, unita alla proprietà hidden, ci permette di creare delle animazioni in tempi brevi ed in maniera intuitiva.

Una StackView può essere collegata al codice tramite IBOutlet. Una Stack View ha come classe di riferimento la UIStackView. Cominciamo facendo questo semplice passaggio, apri l’Assistant Editor e crea una IBOutlet per la stack interna:

Schermata 2015-11-25 alle 23.31.44

A questo punto, utilizzando le Stack View, aggiungi due bottoni chiamati Apri e Chiudi sotto l’interfaccia che hai creato. Infine crea anche le rispettive IBAction. Ricordati di assegnare la Distribution Equally per la visualizzazione corretta:

Schermata 2015-11-25 alle 23.35.27

Se dovessi aver avuto un problema, per favore lascia un commento oppure scaricare il progetto finale che trovi in fondo alla pagina.

Animare una Stack View

Per animare la Stack View in Xcode ed utilizzando il linguaggio Swift, adopererai un metodo della classe UIView. Si chiama animate.

N.B. il metodo animateWithDuration siwft 3 è stato sostituito con il metodo animate(withDuration: TimeInterval, animations: () -> Void)

UIView.animateWithDuration(duration: NSTimeInterval, animations: () -> Void)

Il metodo animate, o almeno quello che utilizzerai, vuole solamente due parametri per eseguire un’animazione:

  • durationIl tempo espresso in NSTimerInterval, cioè un tipo particolare di Double.
  • animationsCosa devo fare durante questo tempo? il parametro è una closure Swift che ti permette di definire il comportamento dell’animazione. Cioè cosa realmente andrai ad animare in questo intervallo di tempo.

Per eseguire questa semplice animazione di chiusura ed apertura della stack. Una volta definito il tempo, ad esempio un secondo, non serve altro che far eseguire, in questo intervallo, il passaggio del parametro hidden a false/true. Di conseguenza, i due metodi avranno il seguente codice:

É importante, che tu capisca, che il codice dentro la closure viene eseguito in quel lasso di tempo. Cioè il passaggio da true a false avviene in quel tot di tempo. Senza l’animazione avresti un effetto veloce che non da lo stesso risultato e morbidezza che avresti utilizzando questa semplice animazione.  Se vuoi investigare di più sulle animazioni o vuoi creare effetti particolari, leggi di più sulle animazioni ed il framework UIKit.

Per fare il test ho importato dentro il mio progetto un’immagine che avevo sul mac. Puoi fare lo stesso tu oppure puoi assegnare un colore di sfondo alla UIImageView:

Animazione Stack View

Conclusione

Adesso immagina quante porte ti si possono aprire con le Stack View in Xcode. Con otto vincoli sei riuscito a creare un semplice layout con animazione quando, con il sistema classico, avresti impiegato il quadruplo dei vincoli ed il quadruplo di imprecazioni di vario genere.

Apple ha fatto un bel lavoro con le Stack View. Io, per non appesantire troppo il tutorial, ti ho mostrato solo una piccola parte del potenziale che c’è dietro ad una Stack View. Molte funzionalità, tipo l’aggiunta di subview da codice o l’arrangiamento di una Stack View da una Size Class ad un’altra, rendono le Stack View in Xcode il punto d’incontro tra gli sviluppatori che amano sviluppatore layout per applicazioni iOS in Swift tramite Storyboard e quelli che ancora lo fanno solo tramite codice.

Se vuoi approfondire, durante il corso di sviluppo applicazioni iOS con il linguaggio Swift, riprendo le Stack View in modo più approfondito.

Download del progetto

[sociallocker]Download DropBox[/sociallocker]

Buona Programmazione!

Changelog

  • 27/10/2016 – Aggiunto il changelog. Modifica del tutorial e verifica compatibilità con Xcode 8.

Start typing and press Enter to search

google-social-sign-in-con-il-linguaggio-swiftNotifiche Push Online per iOS con Parse e Swift