Share
Apple ha spinto gli sviluppatori a creare applicazioni iOS universali già da tempo. A WWDC 12 è stato rilasciato Auto Layout per iOS e sono stati seguiti miglioramenti in iOS 7. E ora con iOS 8 è stata introdotta la progettazione adattiva, che include diverse nuove API e miglioramenti di Interface Builder per promuovere lo sviluppo di binari universali.
In questo tutorial, vedremo cosa significa esattamente design adattivo e come usare alcuni dei suoi concetti. Alla fine del tutorial, sarai in grado di utilizzare la progettazione adattiva per creare app universali utilizzando un flusso di lavoro intuitivo. Useremo le nuove classi di dimensioni per creare un'app fittizia per un negozio di computer che funziona su tutti i dispositivi.
Il design adattivo comprende diverse nuove idee e tecniche invece di essere un'unica, unica API. Alcuni componenti del design adattivo includono raccolte di tratti, classi di dimensioni, caratteri adattivi, layout automatico e altro. Al suo interno, esiste una progettazione adattiva per aiutare gli sviluppatori a creare facilmente app universali e localizzate.
Se hai sviluppato app iOS per un certo numero di anni, probabilmente hai realizzato in prima persona il motivo per cui la progettazione adattiva può essere utile. Le maschere di autoresizing si disgregano rapidamente, tenendo traccia degli orientamenti può essere noioso e lo sviluppo di percorsi di codice diversi basati sul tipo di dispositivo non è scalabile. Il design adattivo mira a risolvere tutti questi problemi.
Ora che abbiamo identificato cos'è il design adattivo e perché dovremmo utilizzarlo, scarica il progetto di esempio per iniziare.
Le classi di dimensioni sono la caratteristica principale del design adattivo. L'utilizzo di questi ti consente di eliminare codice e logica che riguardano più dimensioni dello schermo, orientamenti o dispositivi specifici. Rende anche facile avere appena uno interfaccia per tutti i dispositivi disponibili.
Esistono due tipi di classi di dimensioni, compatto e regolare. Ogni classe di dimensione può essere rappresentata orizzontalmente e verticalmente e ad ogni dispositivo viene assegnata una classe di dimensione per entrambi gli orientamenti. Una dimensione normale rappresenta una "grande" quantità di spazio sullo schermo, ad esempio su un iPad. Sono inclusi anche i paradigmi di interfaccia che forniscono l'illusione di spazio in eccesso, come le visualizzazioni di scorrimento su un iPhone.
D'altra parte, una dimensione dello schermo "compatta" denota una minore quantità di spazio disponibile. iPhone o iPod Touch generalmente rientrano in questa categoria. Non è certamente una regola, comunque. Ad esempio, l'iPhone 6 Plus supporta la normale classe di dimensioni orizzontalmente. La seguente tabella elenca i dispositivi iOS e le rispettive classi di dimensioni:
| Verticalmente | Orizzontalmente | |
| Ritratto di iPhone | Regolare | Compatto |
| iPhone Landscape | Compatto | Compatto |
| iPhone 6 Plus Landscape | Compatto | Regolare |
| Ritratto di iPad | Regolare | Regolare |
| iPad Landscape | Regolare | Regolare |
Aprire Main.storyboard all'interno del progetto. Noterai che la tela ha la forma di un rettangolo. Inizialmente, a prima vista, questo è un componente fondamentale del design adattivo. Guardando verso la parte inferiore del generatore di interfacce, noterai un pulsante che dice wAny hAny.
Questo rappresenta Qualsiasi larghezza, qualsiasi altezza, che indica che qualsiasi modifica all'interfaccia utente si applica a tutte le classi di dimensioni. Se fai clic sul pulsante, viene visualizzata una griglia che ti consente di alternare diverse classi di dimensioni:
Nell'esempio sopra, Larghezza compatta | Altezza compatta è selezionato e c'è un punto verde nella griglia blu. Il punto verde indica quali classi di dimensioni sono rappresentate. In questo caso, le modifiche si applicano solo agli iPhone 3,5, 4 e 4,7 pollici in orizzontale.
Si noti che c'è un po 'di differenza nella formulazione, in quanto Interface Builder utilizza i termini larghezza e altezza mentre le classi di dimensioni usano i termini orizzontale e verticale. La larghezza corrisponde all'orizzontale e l'altezza corrisponde alla verticale.
Se hai modificato la classe di dimensioni attualmente selezionata, assicurati di tornare a Qualsiasi larghezza | Qualsiasi altezza.
Trascina una vista immagine sulla tela del controller della vista da Libreria di oggetti. Usando il Ispettore di taglia, impostare il suo X posizione a 0 punti e suoi Y posizione a 72 punti. Impostare il larghezza a 600 punti e il altezza a 218 punti. Apri il Aispettore tributi e cambia la vista modalità a aspetto in forma e Immagine a "Il computer portatile". La tua tela dovrebbe apparire come l'immagine qui sotto:
Apri il Libreria di oggetti ancora una volta e trascina aetichetta sulla tela. Apri il Ispettore di taglia e imposta l'etichetta X posizione a 16 punti e suoi Y posizione a 312 punti. Per la dimensione, impostala larghezza a 568 punti e suoi altezza a 242 punti.
Nel Ispettore degli attributi, apportare le seguenti modifiche:
Ora aggiungeremo vincoli per l'etichetta e la vista dell'immagine. Nella parte inferiore di Interface Builder, fare clic su Ripristina i vincoli suggeriti sotto il Tutte le visualizzazioni in View Controller sezione. Se l'opzione è disattivata, assicurati che sia selezionata una delle viste nell'area di disegno.
Poiché la vista dell'immagine ha lo stesso sfondo bianco della sua vista contenente, cambieremo il colore di sfondo della vista per facilitare la differenziazione tra i due. Selezionare vista dal schema del documento e cambiala colore di sfondo a Tabella dei gruppi Visualizza il colore di sfondo.
Nella parte superiore di Xcode, selezionare Retina iPad da utilizzare per iOS Simulator. Costruisci ed esegui l'app premendo Comando + R. L'app sembra avere un bell'aspetto per l'iPad, ma vogliamo assicurarci che venga visualizzata correttamente su ogni dispositivo.
Costruire ed eseguire la tua app solo per vedere come si comporta l'interfaccia utente può essere un compito noioso. Fortunatamente, Xcode 6 ha aggiunto la possibilità di ottenere un rendering live dell'interfaccia utente su qualsiasi dispositivo con qualsiasi orientamento. Questo ci aiuta a risolvere qualsiasi problema di layout automatico molto più velocemente rispetto a quando si esegue l'applicazione in iOS Simulator ogni volta.
Nella parte superiore di Xcode, fai clic su Assistente editore pulsante.
Questo divide l'editor di Xcode in due riquadri. Nel riquadro destro, selezionare Automatico> Anteprima> Main.storyboard nella barra di salto.
Interface Builder ora mostra un'anteprima live dell'interfaccia utente su un iPhone da 4 pollici. Come previsto, l'interfaccia utente non è ideale su iPhone. Se non vedi nulla nell'anteprima, quindi fai clic sul controller di visualizzazione nel riquadro di sinistra per aggiornarlo.
Nel riquadro destro, fare clic su + pulsante in basso consente di aggiungere più dispositivi per l'anteprima. Vai avanti e aggiungi l'iPad per l'anteprima.
Passa il mouse sopra l'iPhone nell'editor degli assistenti verso il basso. A sinistra del nome del dispositivo, c'è un pulsante che cambia l'orientamento corrente. Fare clic una volta per passare l'anteprima di iPhone all'orientamento orizzontale.
Con l'orientamento in orizzontale, l'interfaccia utente sembra ancora peggio. La visualizzazione dell'immagine non viene visualizzata e il testo dell'etichetta è troppo grande.
Per correggere l'interfaccia utente, aggiungeremo alcuni vincoli specifici per una certa classe di dimensioni. Questo è un altro vantaggio del design adattivo. Possiamo dire all'interfaccia utente come dovrebbe presentare le sue viste per determinate classi di dimensioni, usando lo stesso storyboard. Prima, questo di solito richiedeva l'utilizzo di due diversi storyboard e il caricamento di quello corretto in fase di esecuzione.
In primo luogo aggiungeremo vincoli che dovrebbero funzionare per la maggior parte dei dispositivi e perfezionarli da lì. Inizia rimuovendo i vincoli aggiunti in precedenza facendo clic su qualsiasi vista nell'area di disegno e selezionando Editor> Risolvi problemi di layout automatico> Tutte le viste in View Controller - Cancella vincoli.
Seleziona la visualizzazione dell'immagine, fai clic su Allineare pulsante, scegliere Centro orizzontale nel contenitore, e fare clic Aggiungi 1 vincolo.
Apri il vincolo che abbiamo appena aggiunto Ispettore di taglia a destra e fai doppio clic per modificarlo.
Il vincolo ha il centro del superview uguale al centro della vista dell'immagine, ma vogliamo il contrario. Clic Secondo Articolo e scegliere Reverse First And Second Item per correggere il problema.
Quindi, premere Controlla e trascina dalla visualizzazione dell'immagine a vista all'interno del profilo del documento a sinistra e selezionare Altezze uguali. Seleziona il vincolo nel Ispettore di taglia e cambia il vincolo moltiplicatore a 0.4. Ciò costringerà l'altezza della vista dell'immagine ad essere uguale all'altezza della superview o almeno al 40 percento di essa, a seconda di quale finisce per essere più breve.
Quindi, fai clic su perno pulsante e scegliere il superiore e parte inferiore spaziatura al vicino più vicino. Per il parte inferiore spaziatura, entra 18 punti. La spaziatura superiore dovrebbe essere già impostata su 0 punti. Assicurarsi Vincola ai margini è deselezionato poiché non vogliamo riempire la vista. Clic Aggiungi 2 vincoli in basso per aggiungere i vincoli.
Fare doppio clic sul Spazio inferiore vincolo nel Ispettore di taglia per modificarlo. Cambiare il Relazione a Maggiore o uguale. Per finire i vincoli della vista dell'immagine, Controlla e trascina dalla vista dell'immagine all'etichetta e scegliere Altezze uguali.
I vincoli per la visualizzazione dell'immagine dovrebbero assomigliare a questo:
A causa dei vincoli aggiunti alla vista dell'immagine, l'etichetta ha già la sua altezza e la spaziatura verticale dalla vista dell'immagine aggiunta. Seleziona l'etichetta e fai clic su perno per aggiungere un vincolo di spaziatura iniziale, finale e verticale come mostrato nell'immagine sottostante.
Se visualizzi l'app in anteprima nell'editor degli assistenti, i vincoli hanno reso le cose molto migliori. Tuttavia, c'è ancora un problema quando l'app utilizza la classe di dimensioni orizzontale compatta come puoi vedere qui sotto (al centro).
In questo caso, sarebbe bello avere la vista dell'immagine e l'etichetta l'una accanto all'altra anziché l'una sopra l'altra.
Usando il classe di dimensioni pulsante di commutazione in basso, selezionare Larghezza compatta | Altezza compatta. La barra diventa di colore blu per indicare che stai modificando l'interfaccia utente per una classe di dimensioni specifica.
Seleziona la vista dell'immagine, apri il Ispettore di taglia, e aggiorna la sua cornice come mostrato nell'immagine qui sotto.
Quindi, seleziona l'etichetta e aggiorna la sua cornice nel Ispettore di taglia come mostrato di seguito.
Con l'etichetta ancora selezionata e il Ispettore di taglia aprire, selezionare i vincoli dell'etichetta e rimuoverli premendo Elimina. È possibile selezionare più vincoli tenendo premuto il tasto Cambio chiave. Questo rimuoverà i vincoli che abbiamo aggiunto finora, ma solo per questa classe di dimensioni.
Fai lo stesso per la vista dell'immagine selezionandola, aprendo il Ispettore di taglia, selezionando i suoi vincoli e premendo Elimina. Ora possiamo aggiungere vincoli per garantire che la vista dell'immagine e l'etichetta siano posizionate una accanto all'altra.
Fortunatamente, Xcode può facilmente capire questi vincoli per noi. Con la vista immagine o l'etichetta selezionata, scegli Editor> Risolvi problemi di layout automatico> Tutte le viste in View Controller - Ripristina i vincoli suggeriti.
Apri il Ispettore di taglia per la visualizzazione dell'immagine. Vedrai che ci sono diversi vincoli elencati, ma alcuni sono in grigio e altri no. Questo indica quali vincoli sono attivi per la classe di dimensioni corrente.
Se fai doppio clic su uno di essi, la sezione in basso mostra quali classi di dimensioni sono attive i vincoli. L'immagine sotto mostra che il vincolo è installato per Larghezza compatta | Altezza compatta e disabilitato per Larghezza normale | Altezza normale. Cliccando sul X o + pulsante abilita o disabilita il vincolo per la data classe di dimensione.
Apri il anteprima assistente editor di nuovo e aggiungi un iPhone da 3,5 pollici in modalità orizzontale se non ce n'è uno già. Possiamo vedere che abbiamo realizzato un layout completamente diverso per alcuni dispositivi con orientamento orizzontale - tutto in uno storyboard.
L'ultima cosa da affrontare è la dimensione del carattere. Mentre i fotogrammi effettivi della vista e dell'etichetta dell'immagine stanno funzionando bene, il carattere può a volte essere troncato. La progettazione adattiva ha aggiunto nuove opzioni per gli sviluppatori per gestire questo tipo di scenario.
Seleziona l'etichetta e apri il Ispettore degli attributi sulla destra. Sotto Autoshrink, selezionare Scala dei caratteri minima e impostarlo 0.4.
La modifica della scala dei caratteri sarà sufficiente per la maggior parte dei casi. Nella nostra app, però, il contenuto dell'etichetta è leggibile per Larghezza compatta | Altezza compatta classe di dimensioni, ma non è l'ideale. Se apri l'editor dell'assistente di anteprima, noterai che la "p" nella parola "laptop" è sulla sua stessa linea.
Con l'etichetta selezionata, fare clic su + pulsante accanto a Font nel Ispettore degli attributi. Questo apre un menu per selezionare una classe di dimensioni a cui applicare un particolare tipo di carattere. Scegliere Larghezza compatta | Altezza compatta.
Analogamente ai vincoli specifici della classe di dimensioni, è stato aggiunto un carattere per la classe di dimensioni che abbiamo selezionato. Cambiare il font taglia a 50 punti. Ora apri ancora una volta l'editor dell'assistente di anteprima e verifica che il carattere sia perfetto su ogni dispositivo.
La possibilità di aggiungere font adattivi è incredibilmente potente. La localizzazione delle app è banale quando si è in grado di controllare le dimensioni dei caratteri in modo più preciso con il testo dinamico.
Sebbene le classi di dimensioni siano certamente una caratteristica preminente, ci sono molte altre API e avanzamenti di progettazione adattiva che non ho trattato in questo tutorial. Ad esempio, i controller di visualizzazione ora sono conformi a UITraitEnvironment protocollo. Ciò significa che i controller di visualizzazione hanno a traitCollection proprietà che tiene traccia di quale classe di dimensioni è attualmente visualizzata.
Se ti piace creare interfacce utente nel codice, il traitCollection proprietà offre le stesse funzionalità delle classi di dimensioni in Interface Builder. È possibile ricevere una notifica quando la classe della dimensione cambia e si esegue qualsiasi aggiornamento necessario ai propri vincoli o all'interfaccia utente.
Un'altra utile API è la UIPopoverController. Se in precedenza hai sviluppato un'applicazione universale, sono sicuro che hai visto un codice come questo:
UIViewController * contentVC = // content if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) UIPopoverController * popVC = [[UIPopoverController alloc] initWithContentViewController: contentVC]; [popVC presentPopoverFromBarButtonItem: item allowedArrowDirections: UIPopoverArrowDirectionAny animated: YES]; else [self presentViewViewer: contentVC animated: YES completion: nil];
A partire da iOS 8, non è più necessario verificare su quale dispositivo è in esecuzione l'app quando si utilizza il UIPopoverController classe. Il UIPopoverController ora la classe supporta anche iPhone e iPod Touch.
Per quanto riguarda le immagini, nota che ora c'è un @ 3x taglia. Ciò è dovuto al display Retina HD trovato su iPhone 6 Plus. Se apri il Images.xcassets file nel progetto, lo vedrai sotto qualsiasi set di immagini fornito.
Il design adattivo è probabilmente il cambiamento più importante nello sviluppo di iOS in diversi anni. Prima della progettazione adattiva, le app universali non erano facilmente sviluppate e la scalabilità in tali progetti potrebbe essere un problema. Spero che tu abbia imparato abbastanza da questo tutorial per evitare questi problemi e incorporare il design adattivo nelle tue app.
Accentsconagua