Share
Xcode 6 aduce o serie de îmbunătățiri semnificative. Una dintre cele mai importante progrese este de a vizualiza depanarea. De multe ori, interfața de utilizator a unei aplicații nu se va comporta așa cum se așteaptă. Vizualizările nu pot fi afișate sau, dacă nu se afișează, pot apărea incorect. Acest tutorial subliniază modul de utilizare a noilor funcții de depanare a vizualizărilor Xcode pentru a identifica și rezolva cu ușurință problemele din interfața de utilizare a unei aplicații.
Pentru a ne începe, descărcați proiectul de probă de la GitHub și deschideți-l ViewDebugging.xcodeproj. Proiectul conține o aplicație simplă cu tab-uri, cu câteva controale de vizualizare, un delegat al aplicației și un storyboard. Această aplicație a fost concepută pentru iPhone, dar va fi afișată bine pe orice dispozitiv, deoarece utilizează o configurație adaptivă introdusă în iOS 8.
Scopul aplicației este de a face o listă de sarcini simple. Acesta include un ecran de rezumat pentru a vedea alte informații, cum ar fi numărul de articole din lista de sarcini, avatarul utilizatorului și mânerul Twitter. Rulați aplicația în Simulatorul iOS făcând clic peconstrui și alergaîn partea stângă sus.
Imediat, este posibil să observați o problemă cu interfața cu utilizatorul. Vizualizarea tabelului nu pare să afișeze date. Deschide FirstViewController.swift și găsiți următoarea linie de cod.
var mockNotesDataSource: [String] = ["Fă-ți hainele", "Finalizați temele", "Plimbați câinele", "Aflați despre depanarea vizualizării"] didSet self.tableView.reloadData ()
mockNotesDataSource variabilă este sursa de date a tabelului. Folosim capacitățile observatorului proprietății Swift. Ca rezultat, vizualizarea tabelului este reîncărcată automat ori de câte ori se schimbă sursa de date. Privind fragmentul de cod de mai sus, patru elemente ar trebui afișate în lista de sarcini. Se pare că altceva este greșit.
Problema pare să fie legată de interfața cu utilizatorul. În timp ce aplicația se execută, apăsați pe Debug View Ierarchy butonul din partea de jos. Alternativ, navigați la Debug> Vizualizare depanare> Ierarhizare vizualizare Captură permite de asemenea vizualizarea depanării.
Atunci când este activat debugging-ul, Xcode ia un instantaneu al ierarhiei de vizualizare a aplicației și prezintă o vizualizare tridimensională, explodată a interfeței cu utilizatorul. Afișează ierarhia de vizualizare a aplicației, poziția, ordinea și mărimea fiecărei vizualizări, precum și modul în care punctele de vedere interacționează unul cu celălalt.
Privind la redarea tridimensională, putem vedea că lista de sarcini se încarcă bine, dar celulele de vizualizare a tabelului sunt prea late.
Opriți depanarea aplicației și navigați la Main.Storyboard pentru a remedia problema. Faceți clic pe vizualizarea tabelă și selectați Editor> Rezolvați problemele privind aspectul automat> Resetați la constrângerile sugerate.
Construiți și rulați aplicația încă o dată pentru a confirma că interfața cu utilizatorul se afișează corect. Apasă pe Debug View Ierarchy pentru a examina mai îndeaproape unele dintre celelalte caracteristici ale depanării vizualizării.
Faceți clic și trageți oriunde în interiorul randului tridimensional pentru a înclina și panorama interfața cu utilizatorul. Înclinați-l spre stânga sau spre dreapta pentru a selecta vizualizarea tabelului.
După selectarea unei vizualizări, Xcode evidențiază vizualizarea și o populare Obiect și mărimea inspectorii din dreapta. Pentru a confirma că ați selectat vizualizarea de masă, uitați-vă la bara de salt din partea superioară și verificați-o UITableView este ultimul element din dreapta.
Obiect și mărimea inspectorii includ o multitudine de informații utile. În trecut, dezvoltatorii trebuiau să se bazeze pe declarații de jurnal sau puncte de întrerupere pentru a inspecta configurația unei vizualizări.
Deschideți mărimea inspector în dreapta și, în Aspectul automat , observați că acum sunt aplicate constrângerile corecte în vedere. În Obiect inspector, puteți inspecta atributele vizualizării selectate.
Chiar deasupra zonei de depanare din Xcode, există nouă butoane și glisoare utilizate pentru vizualizarea depanării.
Acesta este ceea ce face fiecare dintre aceste controale, de la stânga la dreapta:
Luați câteva minute pentru a juca cu aceste controale pentru a înțelege corect ceea ce fiecare dintre ele face.
Creați și rulați din nou aplicația și atingeți Mai Mult în partea de jos a interfeței de utilizare a aplicației. La prima vedere, interfața cu utilizatorul arată bine, dar nu se comportă exact cum ar trebui. Un efect de estompare în partea de sus a imaginii nu se afișează. Debugați ierarhia vizuală pentru a identifica mai bine problema.
Începeți prin panoramarea spre stânga sau spre dreapta pentru a vedea totul într-un unghi. Apoi trageți vizualizați cursorul de spațiu spre dreapta.
Cu interfața de utilizator trasă în afară, devine clar că există o altă vizualizare ascunsă sub imagine. Selectați-l pentru a confirma că este afișarea efectului vizual lipsă.
Deschis Main.storyboard și navigați la Scenă de controler secundar. În schița documentelor din panoul din stânga, extindeți Controller secundar„s Vedere obiect pentru a vedea cum sunt ordonate subdiviziuni.
Xcode vizualizează straturile în ordine crescătoare în cadrul documentului. Cu alte cuvinte, cele de pe partea de sus a listei reprezintă temelia ierarhiei de vedere.
Rezolvarea problemelor noastre este simplă. Blur View Effect va fi sub Imaginea Sky în timpul execuției, deoarece este prima vedere în ierarhia de vizualizare. Faceți clic și trageți Blur View Effect dedesubt Imaginea Sky în schița documentului. Rezultatul ar trebui să pară ca imaginea de mai jos.
Dacă rulați din nou aplicația, efectul de estompare ar trebui să fie vizibil. Interfața de utilizator a aplicației pare acum așa cum a fost proiectată. Să ne uităm la unele dintre caracteristicile de depanare ale iOS Simulatorului pentru a vedea ce altceva poate fi îmbunătățit.
Construiți și rulați aplicația în Simulatorul iOS. Cu simulatorul iOS selectat, selectați Straturi de culoare îmbinate de la debug meniul.
Interfața de utilizare a aplicației este suprapusă cu un amestec de verde și roșu. Acestea sunt indicii pentru a arăta ce straturi au activat amestecarea și care sunt opace. Straturile de amestecare sunt computațional intensive. Prin urmare, se recomandă utilizarea straturilor opace ori de câte ori este posibil.
Apple notează în documentația lor încercarea de a folosi straturi opace atunci când se ocupă de vizualizările tabelului. Una dintre principalele cauze ale slabei performanțe atunci când derularea se datorează conținutului amestecat. Când fundalul conținutului este opac, derularea va deveni, în general, mai fină.
Pentru această aplicație, dacă un utilizator are sute de articole în lista lor de activități, acestea pot avea performanțe de defilare sau inconsistență. Celulele de vizualizare a tabelului utilizează în prezent straturi amestecate. Deoarece fundalul vizualizării controlerului de vizualizare este deja alb, utilizatorul final nu va vedea nicio diferență dacă celulele de vizualizare a tabelului sunt amestecate sau opace cu un fundal alb.
Deschis Main.storyboard și selectați prototipul de celule din tabel Pentru a face Scenă listă. În Atribuții Inspector. Derulați în jos până la Desen secțiune și verificare Opac.
Creați și rulați aplicația cu straturi de colorare îmbinate. Din moment ce celulele din tabelă sunt acum opace, ele sunt suprapuse cu o culoare verde, indicând faptul că sunt opace.
În afară de straturile de marcare, există o serie de alte caracteristici care pot ajuta la depanarea în Simulatorul iOS. Iată câteva dintre cele pe care le consider cele mai utile:
Ceva ignorat de mulți dezvoltatori este impactul barei de stare asupra aplicației dvs. dacă un apel este în curs de desfășurare. Puteți testa cu ușurință acest lucru prin trecerea barei de stare în timpul apelului. Faceți acest lucru selectând Comutați între bara de stare în apel de la Hardware în simulatorul iOS.
Pentru a vedea cum răspunde aplicația dvs. la un astfel de eveniment, apăsați pe Command-T, pentru a permite animații lentă și apăsați Command-Y pentru a afișa bara de stare în timpul apelului. Dacă aplicația dvs. utilizează o bară de navigare, sistemul de operare are grija de acest lucru pentru dvs..
Pe lângă vederile de colorare, rețineți că simulatorul iOS poate, de asemenea, să depaneze problemele legate de locația principală. Puteți simula un dispozitiv la o anumită latitudine și longitudine și există chiar și un număr de locații de eșantion incluse pentru a testa cu. Dacă aplicația utilizează iCloud pentru a gestiona datele, puteți declanșa manual un eveniment de sincronizare.
În timp ce aplicația demo inclusă este foarte simplă, folosind tehnicile menționate în acest articol, se poate raza orele din viitoarele proiecte. Vizualizarea depanării vă poate ajuta să corectați multe probleme care apar în interfața cu utilizatorul.
În afara constructorului Xcode și a interfeței, utilizarea funcțiilor de depanare ale iOS Simulatorului poate contribui la creșterea performanței și identificarea blocajelor. Propriile ghiduri de interfață umană ale Apple subliniază importanța aplicațiilor receptive ușor de utilizat și de navigat. Odată cu îmbunătățirile aduse constructorului de interfețe, nu a fost niciodată mai ușor să faci asta.
Accentsconagua