Share
La creazione di applicazioni con layout flessibili è diventata essenziale, soprattutto dopo il rilascio di iPhone 5 con il suo schermo da 4 "e l'introduzione di Dynamic Type in iOS 7, che consente agli utenti di modificare le dimensioni del testo attraverso il sistema operativo. internazionalizzazione in mente.
Layout automatico, introdotto in iOS 6, consente di creare layout flessibili. È un'ottima alternativa all'autorizzazione delle maschere o alla disposizione manuale dell'interfaccia utente dell'applicazione.
Layout automatico consente di aggiungere vincoli alle viste e definire le relazioni tra le viste. La relazione può essere tra una visione e la sua superview, uno dei suoi fratelli o anche in relazione a se stesso.
Invece di specificare esplicitamente il frame di una vista, Auto Layout consente di definire la spaziatura tra e il posizionamento relativo di due viste usando i vincoli. Layout automatico utilizza tali vincoli per calcolare le posizioni di runtime degli elementi dell'interfaccia utente.
È necessario impostare vincoli sufficienti sulla vista per evitare ambiguità sul layout. È anche possibile impostare troppi vincoli, che possono causare conflitti e causare l'arresto anomalo dell'applicazione.
In Xcode 4, ogni volta che si impostano vincoli incompleti o non validi su una vista, Interface Builder li sostituisce con nuovi vincoli che in gran parte non ti danno l'effetto desiderato. Ciò ha portato a una notevole frustrazione con gli sviluppatori. In Xcode 5, però, è molto più semplice usare il layout automatico. Xcode non forza più i vincoli su una vista, ma ottieni suggerimenti e avvertimenti quando i vincoli di una vista non sono validi.
Sebbene sia possibile lavorare con Auto Layout a livello di programmazione, questo tutorial vedrà come utilizzare Interface Builder per creare layout usando Auto Layout.
Per una semplice dimostrazione di ciò che Auto Layout può fare per te, creeremo una semplice applicazione e imposterai alcuni vincoli sulle sue viste. Crea un nuovo progetto Xcode, scegli il Applicazione vista singola modello e set dispositivi a i phone.
Gli storyboard e i file XIB creati con Xcode 4.5 o versioni successive hanno Auto Layout abilitato di default. Puoi disabilitarlo nel File Inspector sulla destra deselezionando la casella contrassegnata Usa layout automatico.
Un buon motivo per disattivare Auto Layout è supportare iOS 5 o versioni precedenti. Layout automatico è supportato solo da iOS 6 e versioni successive. Ma a parte questo, Apple consiglia di utilizzare Auto Layout in quanto rende la creazione di interfacce utente flessibili più veloce e più semplice.
Apri lo storyboard principale del progetto, Main.storyboard, aggiungi una vista testuale al Visualizza scena controller, e posizionarlo come mostrato di seguito.
Nessun vincolo è stato impostato sulla visualizzazione del testo e questo ha alcune implicazioni. Quando si esegue l'applicazione, la visualizzazione del testo viene posizionata come in Interface Builder. Tuttavia, quando il dispositivo viene ruotato in modalità orizzontale, la visualizzazione del testo continua a rimanere sul bordo sinistro della vista e la sua larghezza viene fissata.
Al momento della compilazione, i vincoli vengono generati automaticamente per le viste che non hanno vincoli, il che spiega il comportamento che stiamo vedendo. I vincoli aggiunti alla vista del testo, ad esempio, sono un vincolo di sinistra e superiore che vincola la visualizzazione del testo in alto a sinistra e un vincolo di larghezza e altezza che corregge le dimensioni della vista del testo.
Una volta che si definiscono i vincoli, tuttavia, spetta a te assicurarsi che i vincoli per una vista non causino conflitti. Nella prossima sezione, aggiungiamo alcuni vincoli alla vista del testo per regolarne la posizione e le dimensioni quando il dispositivo viene ruotato o quando eseguiamo l'applicazione, ad esempio, un iPhone 5 con uno schermo più grande.
Esistono diversi modi in cui i vincoli di layout possono essere aggiunti a una vista.
Tenere premuto il tasto Controllo trascinare la chiave dalla vista e aggiungere il vincolo di layout a un'altra vista. Quando rilasci il mouse, dovrebbe apparire un menu con le opzioni. Le opzioni dipendono dal direzione e il vista che hai trascinato.
Per illustrare questo, trascinare dalla vista testo in cima alla vista del controller della vista. Xcode evidenzierà entrambe le viste per indicare che il vincolo del layout include entrambe le viste. Quando si rilascia il mouse, il menu mostra i vincoli di layout che possono essere aggiunti alla vista sorgente, la visualizzazione del testo. Per centrare la vista del testo in orizzontale nella vista del controller della vista, selezionare Centra orizzontalmente nel contenitore dal menu. Di conseguenza, viene visualizzata una linea arancione che indica il vincolo di layout appena aggiunto.
È anche possibile aggiungere e modificare i vincoli di layout utilizzando il menu Auto Layout nella parte inferiore dell'area di lavoro di Interface Builder.
A partire da sinistra, il menu ti permette di allineare e perno visualizzazioni, risolvere i problemi di layout automatico, e il ridimensionamento del comportamento per la vista selezionata. Lascia che ti spieghi cosa fa ogni opzione di menu.
Ognuna delle opzioni di menu di cui sopra può anche essere trovata in Xcode editore menu.
Per aggiungere vincoli di layout alla vista del testo, selezionare la vista in Xcode, tenere premuto il tasto Controllo chiave, e trascinare dalla vista testo in cima alla vista del controller della vista. Selezionare Centra orizzontalmente nel contenitore dal menu che appare. Ciò aggiunge un vincolo di layout che garantisce che la visualizzazione del testo sia sempre centrata nella vista del controller della vista, indipendentemente dall'orientamento del dispositivo.
Potresti aver notato che la visualizzazione del testo ha un contorno arancione. Xcode ci dice che i vincoli di layout della vista testuale non sono validi o incompleti. Abbiamo specificato che la visualizzazione del testo deve essere centrata orizzontalmente nella sua vista genitore, ma il sistema di layout automatico non sa quali dimensioni deve essere la visualizzazione del testo. Aggiungiamo alcuni altri vincoli finché il contorno della vista del testo diventa blu per indicare che i vincoli di layout della vista testuale sono validi.
Si noti che è possibile ignorare gli avvertimenti ed eseguire un'applicazione con vincoli di layout incompleti. Tuttavia, non dovresti mai spedire un'applicazione con vincoli di layout ambigui, perché non sai per certo quale aspetto avrà l'interfaccia utente dell'applicazione su dispositivi diversi con diversi orientamenti.
Con la vista testo selezionata, Control-Trascinare dalla vista testuale alla parte superiore della vista del controller della vista e selezionare Top Space to Top Guida al layout. Questo imposta a vincolo di spazio verticale dalla guida del layout del controller della vista alla parte superiore della vista del testo.
Successivamente, Control: trascinare dalla vista testo alla vista del controller della vista e selezionare Spazio principale al contenitore per impostare la distanza dalla vista genitore a sinistra della vista del testo. Controllo: trascinare dalla vista testo alla vista del controller della vista e selezionare Guida allo spazio dal basso verso il basso per impostare un vincolo di spazio verticale dalla guida di layout inferiore del controller della vista alla parte inferiore della vista del testo.
Lo schema di visualizzazione del testo dovrebbe essere blu, ad indicare che i vincoli di layout della vista testuale sono validi e completi. Esegui l'applicazione in iOS Simulator e cambia il suo orientamento per ispezionare il risultato.
Si noti che non è stato necessario aggiungere un vincolo di spazio orizzontale per specificare la distanza dal bordo destro della vista del testo e dalla sua superview, poiché abbiamo specificato lo spazio iniziale della vista del testo e centrato orizzontalmente la vista del testo nella sua superview. Il sistema di layout automatico ha informazioni sufficienti per disporre correttamente la visualizzazione del testo. Possiamo ottenere lo stesso risultato specificando quattro vincoli di spazio e omettendo il vincolo di allineamento.
Questo esempio ti ha mostrato come impostare i vincoli di layout tra una vista e la sua vista genitore. Diamo un'occhiata a un altro esempio in cui impostiamo i vincoli di layout tra elementi di pari livello.
Inizia eliminando la visualizzazione del testo. Questo eliminerà anche i vincoli di layout della vista testuale. Aggiungi un campo di testo, un cursore e un controllo segmentato alla vista del controller della vista come mostrato di seguito.
Quando si esegue l'applicazione senza impostare alcun vincolo, i tre elementi si attaccheranno al bordo sinistro della loro vista genitore in orizzontale.
Tuttavia, vogliamo che gli elementi riempiano l'intera larghezza dello schermo come mostrato di seguito. Il campo di testo dovrebbe espandersi orizzontalmente e il cursore dovrebbe anche espandersi per sfruttare la larghezza dello schermo. Il controllo segmentato, tuttavia, dovrebbe avere una larghezza fissa.
Seleziona il campo di testo e fai clic su perno pulsante del menu Auto Layout in basso. Nella sezione Spaziatura al vicino più vicino nella parte superiore del menu, fai clic sulle linee superiore, destra e sinistra che circondano il quadrato. Di conseguenza, le linee dovrebbero diventare rosse. Quindi, fai clic sul pulsante in basso con l'etichetta Aggiungi 3 vincoli per aggiungere i vincoli di spazio specificati.
Seleziona il cursore e ripeti gli stessi passaggi impostando un vincolo di spazio superiore, sinistro e destro. Questo assicura che la distanza tra il cursore e il campo di testo e il cursore e il controllo segmentato sia fisso.
Ripeti gli stessi passaggi per il controllo segmentato, ma aggiungi solo un vincolo di spazio superiore e destro (trailing). Inoltre, controlla il Larghezza casella di controllo e fare clic su Aggiungi 3 vincoli pulsante in basso. Non vogliamo che il controllo segmentato si espanda quando le dimensioni dello schermo cambiano, motivo per cui diamo una larghezza fissa.
Quando Xcode ci dà errori o avvisi relativi a vincoli di layout mancanti o non validi, potrebbe non essere sempre chiaro quali vincoli debbano essere aggiunti o aggiornati. Xcode ci aiuta mostrandoci quali sono i vincoli mancanti Struttura del documento.
Quando un layout non è valido o incompleto, una freccia rossa è visibile nel Struttura del documento. Quando fai clic sulla freccia, una finestra scorre da destra mostrando quali vincoli sono mancanti o non validi. Questo ti dà un'idea di come sistemare il layout.
Sulla destra di ogni errore o avviso c'è un cerchio rosso (errore) o un triangolo giallo (avvertimento). Quando fai clic sull'errore o sull'avviso, viene visualizzato un menu con suggerimenti per risolvere il problema.
Puoi anche usare il Risolvi problemi di layout automatico menu per aggiungere vincoli mancanti, ripristinare i vincoli di una vista o per eliminare i vincoli. Xcode aggiungerà automaticamente vincoli alla vista selezionata per te. Questo può farti risparmiare tempo, ma tieni presente che è anche possibile che il layout risultante non sia quello che intendi.
Se hai aggiunto vincoli di layout a una vista e ne cambi le dimensioni o la posizione, Xcode evidenzia la vista in arancione per indicare che la posizione corrente e / o le dimensioni non sono in linea con i vincoli di layout.
Se esegui l'applicazione, vedrai che il sistema di layout automatico applica i vincoli di layout della vista e ignora le nuove dimensioni e la posizione della vista che hai impostato. Questo è un cosiddetto vista fuori posto. Lo screenshot qui sotto mostra un pulsante che ho spostato dopo aver specificato i suoi vincoli di layout.
Per risolvere questo problema, puoi eliminare i vincoli di layout e impostarne di nuovi oppure puoi lasciare che Xcode lo aggiusti per te. Hai due opzioni per correggere una vista fuori posto.
Nell'esempio sopra, selezioniamo Aggiorna vincoli per aggiornare i vincoli di layout alle nuove dimensioni e posizione del pulsante, poiché desideriamo preservare la nuova dimensione e posizione del pulsante.
Il sistema di layout automatico rende la disposizione delle interfacce utente molto più semplice e veloce. Prima dell'introduzione del layout automatico, gli sviluppatori hanno dovuto codificare in modo rigido l'interfaccia utente di un'applicazione impostando il frame di una vista e la maschera di autoresizzazione. Con Auto Layout, questo non è più necessario.
Impostando correttamente i vincoli di layout di una vista, la sua posizione viene automaticamente aggiornata indipendentemente dalle dimensioni o dall'orientamento dello schermo. Un'altra area in cui è utile il layout automatico è la localizzazione dell'applicazione. Le parole e le frasi hanno una lunghezza diversa in diverse lingue. Anche questo può essere risolto con Auto Layout.
Accentsconagua