Il Layout automatico è disponibile su Storyboard per iOS e OS X da XCode 5. Ma, io solitamente non adottavo la tecnologia Auto Layout per i progetti che ho sviluppato, perché ci sono (c’erano) solo 2 diverse dimensioni dello schermo iPhone (3,5 pollici e 4 pollici ). Durante quel periodo, regolando alcuni punti di vista per posizionarli all’interno di 2 schermi di dimensioni diverse che utilizzano il codice sembrava essere più facile che imparare a usare i vincoli di layout automatico all’interno della storyboard.
Ora credo che tutti gli sviluppatori iOS dovrebbero utilizzare Auto Layout per i futuri progetti di sviluppo poichè Apple ha rilasciato iPhone 6 con 2 nuove dimensioni dello schermo (4,7 pollici e 5,5 pollici).
Ecco un elenco di risoluzioni dello schermo di iPhone (compreso iPhone 6): –
iPhone 4S
Dimensioni dello schermo: 3.5 pollici
Risoluzione: 640 x 960 (mezza: 320 x 480)
iPhone 5
Dimensioni dello schermo: 4.0 pollici
Risoluzione: 640 × 1136 (mezza: 320 x 568)
iPhone 5S / 5C
Dimensioni dello schermo: 4.0 pollici
Risoluzione: 640 x 1136 (mezza: 320 x 568)
iPhone 6
Dimensioni dello schermo: 4.7 pollici
Risoluzione: 750 x 1334 (mezza: 375 x 667)
iPhone 6 Plus
Dimensioni dello schermo: 5.5 pollici
Risoluzione: 1242 x 2208 (1/3: 414 x 736)
Le dimensioni di iPhone 6 Plus è @3x. Quindi, è diviso per 3.
Quindi, altro che 320 x 480 e 320 x 568, si devono utilizzare 375 x 667 e 414 x 736 solo per iPhone.
Si consiglia di utilizzare l’iPhone 6 e il simulatore di iPhone 6 Plus fornito sul XCode 6 per testare ed eseguire, piuttosto che le dimensioni minori di iPhone. Che dire di iPhone 4? iPhone 4 è stato abbandonato dal supporto per iOS 8. Quindi, non vale la pena di menzionarlo qui, visto che la risoluzione è quella classica.
Le 15 posizioni di base
Quando ho provato ad usare il layout automatico con molti oggetti diversi all’interno di un ViewController, ho sempre incasinato tutto. Quasi ogni singola volta, i vincoli connessi per gli oggetti non sono corretti il che ha causato posizionamenti molto scomodi dell’interfaccia.
Quindi iniziamo con le basi provando a dimensionare un solo oggetto.
Un oggetto ha 4 dimensioni diverse:
- altezza e larghezza fissa
- larghezza fissa ma altezza flessibile
- altezza fissa ma larghezza flessibile
- altezza flessibile e larghezza flessibile
Potremmo per il momento ignorare l’ultima opzione in quanto questa modalità le ha solo UIScrollView e UIView
Inoltre l’oggetto può essere posizionato in 5 diverse posizioni
- sempre al centro della SuperView
- appiccicato alla guida superiore
- appiccicato alla guida inferiore
- appiccicato al lato sinistro della SuperView
- appiccicato al lato destro della SuperView
Quindi, facendo due conti, avremo un oggetto con 3 possibili formati in 5 posizioni possibili. Quindi, avremo un totale di 3 x 5 = 15 diversi potenziali guide di layout automatico per un singolo oggetto in una singola vista.
Usare AutoLayout in XCode 6
È ancora possibile utilizzare il codice per regolare i punti di vista in base alle diverse dimensioni dello schermo. Ma, quando ci sono troppe dimensioni dello schermo ed iPhone diversi, adottando la tecnologia di layout automatico effettivamente facilita il nostro lavoro di sviluppo avendo noi meno da scrivere.
Quando si inizia a sviluppare l’app iOS da XCode 6 utilizzando lo storyboard, la prima cosa che si trova sarebbe una nuova strana “pianta quadrata” 600 x 600. E ‘molto diverso in confronto con la precedente versione di XCode dove lo storyboard offre solo l’alto e corto layout (per lo schermo da 3,5 vs 4,0 pollici).
Quando si fa clic nella parte inferiore della schermata Storyboard, verrà visualizzato un pop-up che indica la View Qualsiasi Larghezza | Qualsiasi Altezza come valore di base per il layout. È possibile selezionare qualsiasi valore (ad esempio: Larghezza Compatta | Qualsiasi Altezza) e il layout dello storyboard cambierà in base a ciò che si sceglie.
Ecco alcuni passi importanti per utilizzare il layout automatico:
- Assicurarsi di aver compreso le 15 posizioni Auto Layout di base descritte sopra.
- Iniziare sempre a sviluppare l’applicazione da Qualsiasi Larghezza | Qualsiasi Altezza. (any – any)
– Eventuali vincoli che vengono aggiunti in qualsiasi Larghezza | Altezza Qualsiasi saranno automaticamente convertiti in altri layout dello schermo. - Cercare di soddisfare tutti i vincoli in layout Qualsiasi Larghezza | Altezza qualsiasi, regolare i vincoli su altri layout solo se necessario.
– La maggior parte dei rapporti vincoli dovrebbe essere costruito sul layout qualsiasi Larghezza | Altezza qualsiasi. Si dovrà utilizzare l’anteprima Storyboard e anche le diverse dimensioni dei simulatori di iPhone per vedere se la posizione dei vincoli per tutti gli oggetti sono corretti.
– Se si scopre che la posizione non è corretta per una certo dimensioni dello schermo (ad esempio: posizione non corretta per lo schermo superiore a 4 pollici), allora si tenta di regolare i vincoli per gli altri layout come (Larghezza Compatta | Qualsiasi Altezza o Larghezza Compatta | Altezza regolare) - Impara a raggruppare diversi elementi insieme per avere il miglior risultato.
– A volte si dovrà raggruppare UI diverse per gli oggetti all’interno di una View in modo che si “siedano” uno accanto all’altro. Senza raggruppamento, gli oggetti non possono essere posizionati al posto giusto. Uno scenario di esempio potrebbe essere: 2 pulsanti giacciono uno accanto all’altro a larghezza costante. Questi 2 pulsanti saranno posizione in basso al centro dello schermo.
Ecco come procedere:
- Selezionare tutti gli elementi che si desidera raggruppare
- Vai in Editor -> Incorpora in -> Visualizza
- Poi si può centralizzare la superview appena creata degli oggetti al centro del ViewController
Spero che questa semplice guida possa aiutare alcuni sviluppatori iOS per imparare la base di Layout Automatico. Ci sono ancora molte strategie/tecniche diverse per utilizzare i vincoli del ViewController come l’utilizzo delle priorità al fine di evitare il conflitto vincolo.
Nella seconda parte di questa serie vedremo alcune tecniche più avanzate per risolvere i problemi più comuni che si andranno a creare.