Autoresizing e autolayout. Posizionare gli elementi All’interno dello storyboard, gli elementi possono essere posizionati trascinandoli nella posizione.

Presentazione sul tema: "Autoresizing e autolayout. Posizionare gli elementi All’interno dello storyboard, gli elementi possono essere posizionati trascinandoli nella posizione."— Transcript della presentazione:

1 Autoresizing e autolayout

2 Posizionare gli elementi All’interno dello storyboard, gli elementi possono essere posizionati trascinandoli nella posizione desiderata. Il sistema determina quindi, per ognuno, le relative coordinate e dimensioni.

3 Posizionare gli elementi Le varie View sono strutturate in maniera gerarchica. Le coordinate x e y fanno riferimento allo spiazzamento relativo all’angolo in alto a sinistra del contenitore Se due View sono allo stesso livello (sibling), verrà visualizzata davanti quella che nell’albero si trova più “in basso”

4 Supportare schermi differenti Nello storyboard disponiamo le nostre view con riferimento al tipo di device attualmente selezionato. E’ però necessario indicare quale dovrà essere il comportamento di ogni view, per adattarsi a schermi con risoluzioni differenti. Abbiamo 2 strade: Utilizzare l’autoresizing, che permette di specificare come adattare margini e dimensioni Utilizzare l’autolayout, cioè il nuovo sistema di posizionamento introdotto con iOS6.

5 Autoresizing

6 Unica soluzione possibile fino alla versione 6 Più leggero ma meno flessibile: i layout complessi risultano pertanto più fluidi, ma è più complicato adattarli a tutte le risoluzioni disponibili. Funzionalità limitate rispetto all’autolayout. Se si vogliono ottenere gli stessi risultati è necessario intervenire da codice.

7 Autoresizing L’immagine mostra la finestra utilizzata per configurare l’autoresizing. A sinistra sono presenti 6 elementi selezionabili che permettono di indicare come la view dovrà adattarsi A destra una schermata che ci aiuta a capire se il risultato che si otterrà coincide con quello desiderato

8 Autoresizing Gli elementi più esterni indicano quali margini dovranno rimanere costanti In caso di conflitto la priorità viene assegnata al margine sinistro (in caso di conflitto sui margini orizzontali) ed a quello superiore (in caso di conflitto su quelli verticali)

9 Autoresizing Le frecce interne indicano rispetto a quali dimensioni (altezza, larghezza o entrambe) la dimensione la view dovrà adattarsi proporzionalmente Ad esempio, se è selezionata l’altezza, al raddoppiare dell’altezza dello schermo, raddoppierà anche quella della view

10 Autoresizing L’esempio in questione permette di indicare che la view dovrà mantenere inalterati sia il margine destro che quello sinistro. In questo caso l’incremento della larghezza non sarà proporzionale, ma dipenderà dal margine sinistro

11 Autoresizing Se non si specificano margini, la dimensione rimarrà inalterata, mentre la posizione sarà adattata proporzionalmente.

12 Autolayout

13 Sebbene l’autoresizing sia un meccanismo utile e versatile, non è in grado di soddisfare con semplicità tutte le possibili esigenze: Necessità di imporri vincoli di posizionamento fra due view (Es: la distanza fra 2 view deve essere di 10 pixel) Necessità di indicare dimensioni proporzionali (Es: una view deve essere il doppio dell’altra).

14 Autolayout L’autolayout utilizza dei vincoli, denominati constraint, che permettono di indicare delle regole che devono essere rispettate dalle view. Tali vincoli possono essere relativi a: Proprietà di una view: è ad esempio possibile imporre la dimensione esatta dell’altezza. Due view: è possibile specificare, ad esempio, la distanza fra il margine destro di ua view ed il sinistro di un’altra Una view ed il proprio container

15 Autolayout All’interno dello storyboard sono presenti 3 pulsanti che permettono di visualizzare e specificare i costraint relativi alla view correntemente selezionata.

16 Constraint di allineamento I constraint presenti nella prima finestra sono relativi all’allineamento della view. I più utilizzati sono gli ultimi 2, che permettono di centrare la view orizzontalmente o verticalmente nel container E’ possibile specificare un offset in pixel (la view non sarà quindi centrata, ma avrà uno spiazzamento rispetto al centro).

17 Constraint relativi alla view II secondo menù contiene i contraints relativi alle proprietà della view, quindi principalmente margini e dimensioni. Selezionando un margine è possibile specificare rispetto a quale altra view deve essere riferito.

18 Constraint relativi alla view L’ultimo menù permette di effettuare operazioni di carattere generale: aggiornare la visualizzazione in base ai nuovi constraint aggiunti. rimuovere tutti i constraint relativi ad una view/viewcontroller Aggiungere automaticamente i constraint mancanti (decidendo autonomamente come impostarli).

19 CTRL + Drag Nonostante quanto appena osservato, il modo più semplice per aggiungere dei nuovi constraint è sicuramente la combinazione CTRL + Drag, cioè effettuare un trascinamente tenendo premuto il tasto CTRL.

20 CTRL + Drag Questa combinazione aprirà una nuova finestra contenente tutti i possibili constraint che possono essere specificati, relativamente alle due view in questione. Horizontal/Vertical Spacing: indicano la distanza orizzontale/verticale fra le due view.

21 Allineamenti relativi Top, Left, Right, Bottom: specificano come allineare i corrispondenti margini. E’ possibile, ad esempio, specificare che i margini superiori delle due view dovranno coincidere. Center X/Y : Indicano che il centro orizzontale/verticale delle due view dovrà coincidere In entrambi i casi è possibile indicare un offset

22 Rapporto fra le proporzioni Equal Widths/Height: Indicano che le dimensioni dovranno essere uguali o proporzionali. Aspect ratio: relativo al rapporto larghezza/altezza delle view

23 Violazione di vincoli In alcune situazioni possono verificarsi degli errori perchè alcuni constraint sono assenti o vanno in conflitto fra loro. Quando possibile il sistema risolve automaticamente i problemi, segnalando comunque un warning. In tutti gli altri casi sarà prodotto un errore di compilazione che dovremo gestire.

24 Proprietà dei constraint Tutti i constraint possiedono le seguenti proprietà: Constant : indica il valore del constraint, che sarà interpretato dal sistema in base al corrispondente tipo. L’operatore permette di indicare il tipo di vincolo (uguale, maggiore, minore, ecc.). Priority : Se = 1000, il constraint è obbligatorio. Altrimenti serve per specificare la priorità fra più constraint in caso di conflitto. Multiplier : In caso di dimensioni proporzionali indica il rapporto fra esse.

25 Outlets per i constraint Anche ai constraint, come aqualsiasi altro elemento grafico, è possibile associare un outlet, che servirà per modificarlo a runtime da codice.

26 Esercizio

27 La View verde (#0D8F39) è allineata alla root view rispetto ai margini sinistro, destro e superiore ed ha un’altezza pari esattamente alla metà rispetto a quella del ViewController La View gialla (#FFDF50) ha una larghezza pari alla metà di quella del suo container (verde), mentre gli altri margini sono di 24px. La View blu (#007AFF) è allineata centralmente rispetto alla gialla, è alta 150px ed orizzontalmente occupa tutto lo spazio fra la view gialla ed il contenitore La View rossa (#E5091D) dista 8 px dal margine inferiore (Bottom Layout Guide), è centrata orizzontalmente nel contenitore è alta 120 px e la larghezza è sempre il doppio dell’altezza