DispenseAutoLayout (736055 byte)

Autoresizing e
autolayout
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.
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”
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.
Autoresizing
Autoresizing
 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.
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
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)
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
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
Autoresizing
 Se non si specificano margini, la dimensione rimarrà
inalterata, mentre la posizione sarà adattata
proporzionalmente.
Autolayout
Autolayout
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).
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
Autolayout
All’interno dello storyboard sono presenti 3 pulsanti che
permettono di visualizzare e specificare i costraint relativi
alla view correntemente selezionata.
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).
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.
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).
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.
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.
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
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
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.
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.
Outlets per i constraint
Anche ai constraint, come aqualsiasi altro elemento
grafico, è possibile associare un outlet, che servirà per
modificarlo a runtime da codice.