Share
Xcode 6 gir en rekke signifikante forbedringer. En av de mest bemerkelsesverdige fremskrittene er visning av feilsøking. Ofte vil en apps brukergrensesnitt ikke oppføre seg som forventet. Visninger kan ikke vises, eller hvis de viser, kan de vise feil. Denne opplæringen skisserer hvordan du bruker Xcodes nye visningsfeilsøkingsfunksjoner for enkelt å identifisere og fikse problemer i en apps brukergrensesnitt.
For å komme i gang, last ned prøveprosjektet fra GitHub og åpne ViewDebugging.xcodeproj. Prosjektet inneholder et enkelt fanebladprogram med noen få kontroller, en programdelegator og et storyboard. Denne appen var designet for iPhone, men det vil vise seg fint på en hvilken som helst enhet, siden den bruker adaptiv layout, introdusert i IOS 8.
Formålet med appen er å lage en enkel gjøremålsliste. Den inneholder en oppsummeringsskjerm for å vise annen informasjon, for eksempel antall elementer i oppgavelisten, brukerens avatar og deres Twitter-håndtak. Kjør appen i iOS-simulatoren ved å klikkebygge og kjøreøverst til venstre.
Umiddelbart kan du merke et problem med brukergrensesnittet. Tabellvisningen ser ikke ut til å vise noen data. Åpne opp FirstViewController.swift og finn følgende linje med kode.
var mockNotesDataSource: [String] = ["Gjør noe klesvask", "Fullfør lekser", "Gå hunden", "Lær om visningsfeil"] didSet self.tableView.reloadData ()
De mockNotesDataSource variabel fungerer som tabellvisningens datakilde. Vi bruker Swifts eiendomsobservasjonsfunksjoner. Som et resultat blir tabellvisningen automatisk lastet opp når datakilden endres. Ved å se på kodestykket ovenfor, skal fire elementer vises på oppgavelisten. Det ser ut til at noe annet er galt.
Problemet ser ut til å være relatert til brukergrensesnittet. Mens appen kjører, trykker du på Feilsøkingshierarki knappen nederst. Alternativt kan du navigere til Feilsøking> Vis feilsøking> Capture View Hierarchy kan også vise feilsøking.
Når visning av feilsøking er aktivert, tar Xcode et øyeblikksbilde av programmets visningshierarki og presenterer en tredimensjonal, eksplodert visning av brukergrensesnittet. Den viser programmets visningshierarki, plasseringen, rekkefølgen og størrelsen på hver visning, samt hvordan visningene samhandler med hverandre.
Når vi ser på den tredimensjonale gjengivelsen, kan vi se at oppgavelisten laster seg bra, men tabellvisningscellene er for store.
Stopp feilsøking programmet og naviger til Main.Storyboard å fikse problemet. Klikk på tabellvisningen og velg Rediger> Løs opp automatiske layoutproblemer> Tilbakestill til foreslåtte begrensninger.
Bygg og kjør programmet enda en gang for å bekrefte at brukergrensesnittet vises riktig. Klikk på Feilsøkingshierarki knappen for å se nærmere på noen av de andre funksjonene ved visning av feilsøking.
Klikk og dra hvor som helst i den tredimensjonale gjengivelsen for å vippe og panorere brukergrensesnittet. Kant den til venstre eller høyre for å velge tabellvisningen.
Når en visning er valgt, fremhever Xcode visningen og befolker den Gjenstand og Størrelse inspektører til høyre. For å bekrefte at du har valgt tabellvisningen, se på hoppefeltet øverst og bekreft det UITableView er det siste elementet til høyre.
De Gjenstand og Størrelse inspektører inkluderer et vell av nyttig informasjon. Tidligere måtte utviklere stole på logguttrykk eller bruddpunkter for å inspisere en visnings konfigurasjon.
Åpne opp Størrelse inspektør til høyre og i Automatisk oppsett avsnitt, merk at de rette begrensningene nå er brukt på visningen. I Gjenstand inspektør, kan du inspisere egenskapene til den valgte visningen.
Rett over feilsøkingsområdet i Xcode, er det ni knapper og skyveknapper som brukes til visning av feilsøking.
Dette er hva hver av disse kontrollene gjør, fra venstre til høyre:
Ta noen minutter å spille med disse kontrollene for å forstå hva de gjør.
Bygg og kjør programmet igjen og trykk på Mer faneblad nederst i appens brukergrensesnitt. Ved første øyekast ser brukergrensesnittet ut, men det oppfører seg ikke akkurat slik det skal. En uskarphet på toppen av bildet vises ikke. Feilsøk visningshierarkiet for å bedre identifisere problemet.
Start med å panorere til venstre eller høyre for å se alt i en vinkel. Deretter drar du vis mellomromskyvingen mot høyre.
Med brukergrensesnittet trukket fra hverandre blir det klart at det er en annen visning skjult under bildet. Velg det for å bekrefte at det er den visuelle visningsevnen som mangler.
Åpen Main.storyboard og naviger til Second View Controller Scene. I dokumentoversikt ruten til venstre, utvide Second View Controller's Utsikt Motta for å se hvordan underviews er bestilt.
Xcode lagrer visninger i stigende rekkefølge innenfor dokumentoversikten. Med andre ord er de øverst på listen grunnlaget for visningshierarkiet.
Å fikse problemet vårt er enkelt. Blurseffektvisning vil være under Sky Image på kjøretid, fordi det er den første visningen i visningshierarkiet. Klikk og dra på Blurseffektvisning under Sky Image i dokumentoversikten. Resultatet skal nå se ut som skjermbildet nedenfor.
Hvis du kjører appen igjen, bør uskarphetseffekten være synlig. Appens brukergrensesnitt ser nå ut som det ble designet. La oss se på noen av iOS Simulatorens feilsøkingsfunksjoner for å se hva som kan forbedres.
Bygg og kjør appen i iOS-simulatoren. Med iOS-simulatoren valgt, velg Fargelagde lag fra Debug Meny.
Appens brukergrensesnitt er overlaid med en blanding av grønt og rødt. Dette er tegn for å vise hvilke lag som har blendingen aktivert og hvilke som er ugjennomsiktige. Blandingslag er beregningsintensiv. Det anbefales derfor å bruke ugjennomsiktige lag når det er mulig.
Apple notater i dokumentasjonen for å prøve å bruke ugjennomsiktige lag når det gjelder tabellvisninger. En av hovedårsakene til dårlig ytelse når du ruller skyldes blandet innhold. Når innholdets bakgrunn er ugjennomsiktig, vil rulling generelt bli jevnere.
For denne appen, hvis en bruker har hundrevis av elementer i deres å gjøre listen, kan de oppleve hakkete eller inkonsekvent rullingsytelse. Tabellbilde-cellene bruker for øyeblikket blandede lag. Siden visningsansvarligens bakgrunns bakgrunn er allerede hvit, vil sluttbrukeren ikke se noen forskjell hvis tabellvisningscellene er blandet eller ugjennomsiktig med en hvit bakgrunn.
Åpen Main.storyboard og velg tabellvisningscelleprototypen i Å gjøre liste Scene. I Attributtsinspektør. Rull ned til Tegning seksjon og sjekk Opaque.
Bygg og kjør appen med farger blandede lag aktivert. Siden tabellvisningene er nå ugjennomsiktige, er de overlaid med en grønn farge, noe som indikerer at de er ugjennomsiktige.
Bortsett fra flagglag, finnes det en håndfull andre funksjoner som kan hjelpe til med feilsøking i iOS-simulatoren. Her er noen av de som jeg finner mest nyttige:
Noe oversett av mange utviklere er virkningen av statuslinjen på appen din hvis en samtale pågår. Du kan enkelt teste dette ved å bytte statuslinjen i samtale. Du gjør dette ved å velge Slå på statuslinjen for samtale fra maskinvare menyen i iOS-simulatoren.
Hvis du vil se hvordan appen din svarer på en slik hendelse, trykker du på Kommando-T, for å aktivere langsomme animasjoner, og trykk Kommando-Y for å vise statuslinjen for samtale. Hvis appen din bruker en navigeringslinje, tar operativsystemet seg av dette for deg.
Bortsett fra fargerike visninger, husk at iOS-simulatoren også kan feilsøke Core Location-problemer. Du kan simulere en enhet med en bestemt breddegrad og lengdegrad, og det er til og med en rekke utvalgssteder inkludert for å teste med. Hvis appen din bruker iCloud til å administrere data, kan du også manuelt utløse en synkroniseringshendelse.
Mens demo-appen er inkludert, er det veldig enkelt å bruke teknikkene som er nevnt i denne artikkelen, til å barbere timevis av fremtidige prosjekter. Vis feilsøking kan hjelpe deg med å rette opp mange problemer som kommer opp i brukergrensesnittet.
Utenfor Xcode og grensesnittbygger, kan ved hjelp av iOS Simulatorens feilsøkingsfunksjoner bidra til å øke ytelsen og identifisere flaskehalser. Apples egne retningslinjer for menneskelig grensesnitt understreker betydningen av responsive apps som er enkle å bruke og navigere. Med forbedringene til grensesnittbyggeren har det aldri vært enklere å gjøre nettopp det.
Accentsconagua