Share
Xcode 6 apporta una serie di miglioramenti significativi. Uno dei progressi più importanti è il debug della vista. Spesso, l'interfaccia utente di un'applicazione non si comporta come dovrebbe. Le visualizzazioni potrebbero non essere visualizzate o, se lo mostrano, potrebbero non essere visualizzate correttamente. Questo tutorial illustra come utilizzare le nuove funzionalità di debug della vista di Xcode per identificare e risolvere facilmente i problemi nell'interfaccia utente di un'app.
Per iniziare, scarica il progetto di esempio da GitHub e apri ViewDebugging.xcodeproj. Il progetto contiene una semplice applicazione a schede con alcuni controller di visualizzazione, un delegato dell'applicazione e uno storyboard. Questa app è stata progettata per l'iPhone, ma verrà visualizzata correttamente su qualsiasi dispositivo poiché utilizza un layout adattivo, introdotto in iOS 8.
Lo scopo dell'app è quello di creare una semplice lista di cose da fare. Include una schermata di riepilogo per visualizzare altre informazioni, come il numero di elementi nell'elenco delle cose da fare, l'avatar dell'utente e il loro handle di Twitter. Fai partire l'app in iOS Simulator facendo cliccostruire ed eseguirein alto a sinistra.
Subito, potresti notare un problema con l'interfaccia utente. La vista tabella non sembra mostrare alcun dato. Aprire FirstViewController.swift e individuare la seguente riga di codice.
var mockNotesDataSource: [String] = ["Fai un bucato", "Finisci i compiti", "Passeggia il cane", "Ulteriori informazioni sul debug della vista"] didSet self.tableView.reloadData ()
Il mockNotesDataSource la variabile funge da origine dati della vista tabella. Usiamo le funzionalità di osservatore delle proprietà di Swift. Di conseguenza, la vista tabella viene ricaricata automaticamente ogni volta che cambia l'origine dei dati. Osservando lo snippet di codice sopra riportato, quattro elementi dovrebbero essere visualizzati nell'elenco delle cose da fare. Sembra che qualcos'altro sia sbagliato.
Il problema sembra essere correlato all'interfaccia utente. Mentre l'app è in esecuzione, premi il tasto Debug View Hierarchy pulsante in basso. In alternativa, navigando verso Debug> Visualizza debug> Cattura vista gerarchia abilita anche il debug della vista.
Quando viene abilitato il debug della vista, Xcode acquisisce un'istantanea della gerarchia delle viste dell'applicazione e presenta una vista esplosa tridimensionale dell'interfaccia utente. Mostra la gerarchia delle viste dell'applicazione, la posizione, l'ordine e le dimensioni di ogni vista, nonché il modo in cui le viste interagiscono tra loro.
Osservando il rendering tridimensionale, possiamo vedere che l'elenco delle cose da fare sta caricando bene, ma le celle di visualizzazione tabella sono troppo larghe.
Interrompere il debug dell'applicazione e navigare verso Main.Storyboard per risolvere il problema. Fare clic sulla vista tabella e selezionare Editor> Risolvi problemi di layout automatico> Ripristina vincoli suggeriti.
Crea ed esegui nuovamente l'applicazione per confermare che l'interfaccia utente sia visualizzata correttamente. Clicca il Debug View Hierarchy pulsante per dare un'occhiata più da vicino ad alcune delle altre funzionalità di visualizzazione del debug.
Fare clic e trascinare in qualsiasi punto all'interno del rendering tridimensionale per inclinare e spostare l'interfaccia utente. Inclina verso sinistra o destra per selezionare la vista tabella.
Una volta selezionata una vista, Xcode evidenzia la vista e popola il Oggetto e Taglia ispettori a destra. Per confermare di aver selezionato la vista tabella, guarda la barra di scorrimento in alto e verifica quello UITableView è l'ultimo elemento a destra.
Il Oggetto e Taglia gli ispettori includono una grande quantità di informazioni utili. In passato, gli sviluppatori dovevano basarsi su istruzioni di registro o punti di interruzione per ispezionare la configurazione di una vista.
Apri il Taglia ispettore a destra e, nel Layout automatico sezione, notare che i vincoli corretti vengono ora applicati alla vista. Nel Oggetto ispettore, puoi controllare gli attributi della vista selezionata.
Proprio sopra l'area di debug di Xcode, ci sono nove pulsanti e cursori usati per il debug della vista.
Questo è ciò che ciascuno di questi controlli fa, da sinistra a destra:
Prenditi qualche minuto per giocare con questi controlli per capire correttamente cosa fa ognuno di loro.
Crea ed esegui nuovamente l'applicazione e tocca il Di Più scheda nella parte inferiore dell'interfaccia utente dell'app. A prima vista, l'interfaccia utente sembra a posto, ma non si comporta esattamente come dovrebbe. Un effetto sfocato sulla parte superiore dell'immagine non viene visualizzato. Eseguire il debug della gerarchia delle viste per identificare meglio il problema.
Inizia a panning verso sinistra o destra per visualizzare tutto ad angolo. Quindi, trascina il visualizza il cursore di spaziatura verso la destra.
Con l'interfaccia utente separata, diventa chiaro che c'è un'altra vista nascosta sotto l'immagine. Selezionalo per confermare che è la vista effetto visivo mancante.
Aperto Main.storyboard e vai a Scena del secondo controller di visualizzazione. Nel schema del documento riquadro a sinistra, espandere il Secondo View Controller'S vista oggetto per vedere come sono ordinate le sue sottoview.
Xcode sovrappone le viste in ordine ascendente all'interno del contorno del documento. In altre parole, quelli in cima alla lista sono il fondamento della gerarchia della vista.
Risolvere il problema è semplice. Sfocatura vista effetto sarà sotto Immagine del cielo in fase di esecuzione, perché è la prima vista nella gerarchia della vista. Clicca e trascina il Sfocatura vista effetto sotto Immagine del cielo nel contorno del documento. Il risultato dovrebbe ora assomigliare allo screenshot qui sotto.
Se esegui nuovamente l'app, l'effetto sfocatura dovrebbe essere visibile. L'interfaccia utente dell'app ora sembra come è stata progettata. Diamo un'occhiata ad alcune delle funzionalità di debug di iOS Simulator per vedere cos'altro può essere migliorato.
Crea ed esegui l'app in iOS Simulator. Con il simulatore iOS selezionato, selezionare Strati colorati dal mettere a punto menu.
L'interfaccia utente dell'app è sovrapposta a un mix di verde e rosso. Questi sono segnali per mostrare quali livelli hanno attivato il blending e quali sono opachi. La fusione dei livelli è intensiva dal punto di vista computazionale. Si consiglia pertanto di utilizzare strati opachi quando possibile.
Note Apple nella loro documentazione per provare e utilizzare i livelli opachi quando si tratta di visualizzazioni di tabelle. Una delle principali cause di scarse prestazioni durante lo scorrimento è dovuta al contenuto misto. Quando lo sfondo del contenuto è opaco, lo scorrimento diventa generalmente più agevole.
Per questa app, se un utente ha centinaia di elementi nel proprio elenco di cose da fare, potrebbero verificarsi prestazioni di scorrimento instabili o incoerenti. Le celle di visualizzazione tabella stanno attualmente utilizzando livelli combinati. Poiché lo sfondo della vista del controller della vista è già bianco, l'utente finale non vedrà alcuna differenza se le celle della vista tabella sono mescolate o opache con uno sfondo bianco.
Aperto Main.storyboard e selezionare il prototipo di cella di visualizzazione tabella nel Per elencare la scena. Nel Ispettore degli attributi. Scorri verso il basso fino a Disegno sezione e controllare Opaco.
Costruisci ed esegui l'app con livelli di colorazione blended abilitati. Poiché le celle della vista tabella sono ora opache, sono sovrapposte con un colore verde, a indicare che sono opache.
Oltre ai livelli di segnalazione, ci sono una manciata di altre funzionalità che possono aiutare nel debugging in iOS Simulator. Ecco alcuni di quelli che ritengo più utili:
Qualcosa di trascurato da molti sviluppatori è l'impatto della barra di stato sulla tua app se è in corso una chiamata. Puoi testarlo facilmente passando dalla barra di stato in chiamata. Lo fai selezionando Attiva / disattiva la barra di stato della chiamata dal Hardware menu in iOS Simulator.
Per vedere come la tua app risponde a un tale evento, premi Comando-T, per abilitare le animazioni lente e premere Comando-Y per visualizzare la barra di stato in chiamata. Se la tua app utilizza una barra di navigazione, il sistema operativo si prenderà cura di te.
Oltre alle visualizzazioni di colorazione, tieni presente che il simulatore iOS può anche eseguire il debug dei problemi relativi alla posizione principale. È possibile simulare un dispositivo ad una latitudine e longitudine specifica e ci sono anche un numero di posizioni campione incluse per testare. Se la tua app utilizza iCloud per gestire i dati, puoi anche attivare manualmente un evento di sincronizzazione.
Mentre l'app demo inclusa è molto semplice, l'uso delle tecniche menzionate in questo articolo può ridurre le ore di attesa dei progetti futuri. Visualizza il debug può aiutarti a correggere molti problemi che si presentano nell'interfaccia utente.
Al di fuori di Xcode e dell'interfaccia builder, l'utilizzo delle funzionalità di debug di iOS Simulator può aiutare a migliorare le prestazioni e identificare i colli di bottiglia. Le linee guida sull'interfaccia umana di Apple sottolineano l'importanza delle app reattive facili da usare e da navigare. Con i miglioramenti apportati all'interfaccia builder, non è mai stato così facile farlo.
Accentsconagua