Scatole dentro scatole
Una card è una pila verticale con un'immagine, un testo e una fila di bottoni; quella fila è una pila orizzontale dentro quella verticale. Ogni scatola segue le sue regole, e insieme si comportano comunque come un pezzo solo.
Il trucco è l'ordine. Nel libro non costruiamo dall'alto in basso, costruiamo dall'interno verso l'esterno: prima l'elemento più piccolo e autonomo, poi il gruppo che lo contiene, poi il gruppo intorno a quello. È lo stesso motivo per cui il bottone è venuto prima del gruppo di bottoni.
Leggi il modulo prima di costruirlo
Il modulo di Login ha tre livelli, e ognuno è un frame con una sola direzione:
- Text Fieldil campo: un testo segnaposto in un box alto 50 px
- Form Elementuna colonna: l'etichetta sopra il campo, gap 8
- Formuna colonna di elementi del modulo, gap 24, padding 16 ai lati
Dai un nome a ogni frame appena lo crei. Dopo qualche livello il pannello dei livelli è pieno di “Frame 12” e “Frame 13”, e sono i nomi a rendere il file leggibile per chi viene dopo, compreso te fra tre settimane.
Prova tu: il modulo di Login
- Crea un livello di testo Your Name, premi ⇧ Shift + A e rinomina il frame Text Field. Lascia Hug sulla larghezza, imposta l'altezza a 50 e l'allineamento a sinistra al centro.
- Dai al Text Field un riempimento chiaro e un bordo da 1 px, poi lascia il bordo solo sul lato in basso.
- Scrivi un'etichetta Username subito sopra, seleziona etichetta e campo insieme e premi ⇧ Shift + A. Rinomina il nuovo frame Form Element e imposta il gap a 8.
- Avvolgi il Form Element in un altro frame in Auto layout e chiamalo Form. Fallo largo 393 con padding orizzontale 16.
- Imposta la larghezza di Text Field e Form Element su Fill container, così il campo si allarga per tutto il modulo.
- Duplica il Form Element, cambia l'etichetta in Password e il segnaposto in ********, poi porta il gap del Form a 24.
Il link di recupero
Un ultimo dettaglio insegna uno schema utile: un testo allineato a destra dentro un modulo allineato a sinistra. Duplica l'etichetta Password, portala sotto il campo con la freccia in giù, scrivi Forgot your password?, avvolgila con ⇧ Shift + A, chiama il frame Recovery, metti la larghezza su Fill container, padding 0 e allineamento a destra. Ora il testo finisce esattamente dove finisce il campo.
Da ricordare
- Ogni scatola di un'interfaccia è un frame con una direzione.
- Costruisci dall'interno verso l'esterno: elemento, gruppo, contenitore.
- Gap piccoli dentro un gruppo, più grandi tra i gruppi.
- Dai un nome ai frame mentre li crei.