Gerarchie e Strutture
Nuovi livelli e gerarchie
Per cerare un nuovo livello basta disegnare un elemento qualsiasi base nella barra dei strumenti, tipo “Rectangle”.
Dopo aver creato un qualsiasi elemento all’interno del frame, notiamo come nella barra dei layer compaia il nuovo elemento. Essendo creato all’interno del frame Home il rettangolo andrà a posizionarsi al di sotto e all’interno di esso.
Se con lo strumento move andiamo a spostarlo all’esterno del nostro frame, anche nel menu dei layer il rettangolo sarà spostato all’esterno. Riposizioniamo il rettangolo all’interno.
Altri livelli e gruppi
Creiamo un cerchio utilizzando il comando ellisse. Proviamo a disegnare anche altre forme e notiamo come nel nostro menu layer vengano aggiunti tutti gli elementi disegnati. Ogni elemento ha una sua icona in base al tipo di oggetto.
Proviamo ora a selezionare con il comando tutti gli elementi, clicchiamo e trasciniamo per selezionare, oppure clicchiamo su ogni singolo elemento tenendo premuto shift. Una volta selezionati tutti gli elementi CMD+G o CTRL+G per creare un gruppo.
Nel menu di sinistra si formerà il gruppo con la sua nuova icona, cliccando sulle frecce laterali si possono espandere o contrarre i gruppi. Nel menu di destra il gruppo può essere modificato e impostato come Frame.
Constraints
Quando realizziamo un frame e abbiamo dei elementi al suo interno possiamo porre ad essi dei vincoli. Al modificarsi delle dimensioni del frame genitore gli elementi al suo interno (figli) si sposteranno seguendo delle regole.
Le modifiche le facciamo cliccando su uno o più dei elementi figli e dal menu di destra clicchiamo sul riquadro grafico. Possiamo scegliere se tenerli bloccati in alto o in basso e destra o sinistra. Se non vogliamo usare il riquadro si possono usare anche i menù a tendina.
Per un layout responsive usiamo il parametro left and right, in modo tale che se allarghiamo il nostro frame anche gli elementi al suo interno si allargano seguendolo.
Auto Layout
Una volta creato un gruppo o dopo aver selezionato una serie di elementi possiamo utilizzare l’auto layout per imporre delle regole di impaginazione, comando rapido Shift+A.
Sempre dal menu di destra possiamo decidere l’orientamento dei nostri elementi, l’allineamento e lo spazio tra uno e l’altro. Altro parametro che possiamo cambiare è il padding ma che vedremo nella lezione dei Bottoni.
Per conoscere invece i margini che separano il nostro gruppo di elementi da altri elementi possiamo utilizzare il comando rapido Alt o Option. Quindi selezioniamo normalmente il gruppo e tenendo premunto Alt o Option sposiamo il nostro mouse su un altro elemento, a monitor ci verrano mostrate le distanze da esso.
Righelli e misure
Per facilitare l’impaginazione si possono attivare i righelli dal menu view > rulers oppure premendo Shift+R. Una volta attivati i righelli cliccando su un di esse e trascinando verso il centro dell’area di lavoro si creerà una guida. Le guide non verranno mostrate nei layers e non verrano visualizzate nelle esportazioni ma saranno sempre modificabili cliccandoci sopra con il cursore. Per eliminarle basterà spostarle sul righello.
Per misurare la distanza da un oggetto ed a una guida, basterà selezionare l’oggetto e muoversi con il mouse al di spora guida, poi premere Option oppure Alt. A monitor ci verrà mostrata la distanza. Questo procedimento può essere fatto anche tra oggetti.
Esercizi
Replicare la schermata seguente. Ricordate di utilizzare i constraints e i auto layout per rendere il design responsive. I colori sono scelta.
