Share
Xcode 6 ger ett antal signifikanta förbättringar. En av de mer anmärkningsvärda framstegen är visning av felsökning. Ofta fungerar appens användargränssnitt inte så som det förväntas. Visningar visas kanske inte eller om de visar kan de visas felaktigt. I denna handledning beskrivs hur du använder Xcodes nya felsökningsfunktioner för att enkelt identifiera och åtgärda problem i appens användargränssnitt.
För att komma igång, ladda ner provprojektet från GitHub och öppna ViewDebugging.xcodeproj. Projektet innehåller en enkel flikapplikation med några visningsstyrare, en applikationsdelegator och en storyboard. Den här appen är utformad för iPhone, men den kommer att visa bra på vilken enhet som helst, eftersom den använder adaptiv layout, introducerad i iOS 8.
Syftet med appen är att göra en enkel att göra-lista. Den innehåller en sammanfattande bildskärm för att visa annan information, till exempel antalet objekt i uppgiftslistan, användarens avatar och deras Twitter-handtag. Kör appen i iOS-simulatorn genom att klicka påbygga och springalängst upp till vänster.
Omedelbart kan du märka ett problem med användargränssnittet. Tabellvyn verkar inte visa några data. Öppna FirstViewController.swift och leta efter följande rad kod.
var mockNotesDataSource: [String] = ["Gör lite tvätt", "Slut läxa", "Gå till hunden", "Läs om visningsfelsökning"] didSet self.tableView.reloadData ()
De mockNotesDataSource variabel fungerar som tabellvyns datakälla. Vi använder Swift s egenskap observatör kapacitet. Som ett resultat laddas tabellvyn automatiskt om datakällan ändras. Genom att titta på ovanstående kodbit, ska fyra objekt visas i uppgifterna. Det verkar som att något annat är fel.
Problemet verkar vara relaterat till användargränssnittet. Medan appen körs trycker du på Debug View Hierarchy knappen längst ner. Alternativt kan du navigera till Felsökning> Visa Felsökning> Fånga Visa Hierarki möjliggör också felsökning.
När synkronisering är aktiverad tar Xcode en ögonblicksbild av programmets synhierarki och presenterar en tredimensionell, exploderad vy av användargränssnittet. Den visar programmets synhierarki, positionen, ordningen och storleken på varje vy, liksom hur vyerna interagerar med varandra.
Om vi tittar på den tredimensionella återgivningen kan vi se att att-göra-listan laddas bra, men tabellvyncellerna är för breda.
Sluta felsöka applikationen och navigera till Main.Storyboard för att åtgärda problemet. Klicka på tabellvyn och välj Redigerar> Lös upp automatiska layoutproblem> Återställ till föreslagna begränsningar.
Bygg och kör programmet en gång till för att bekräfta att användargränssnittet visas korrekt. Klicka på Debug View Hierarchy knappen för att titta närmare på några av de andra funktionerna vid visning av felsökning.
Klicka och dra någonstans inuti den tredimensionella renderingen för att luta och panorera användargränssnittet. Vik åt vänster eller höger för att välja tabellvyn.
När en vy väljs markeras Xcode vyn och fyller i Objekt och Storlek inspektörer till höger. För att bekräfta att du har valt tabellvyn, kolla på hoppfältet överst och verifiera det UITableView är sista objektet till höger.
De Objekt och Storlek inspektörer inkluderar en mängd bra information. Tidigare måste utvecklare förlita sig på loggutlåtanden eller brytpunkter för att inspektera en visnings konfiguration.
Öppna upp Storlek inspektör till höger och i Automatisk layout avsnitt, märker att de korrekta begränsningarna nu tillämpas på vyn. I Objekt inspektör kan du inspektera attributen för den valda vyn.
Längre ovanför felsökningsområdet i Xcode finns det nio knappar och reglage som används för visning av felsökning.
Så här gör var och en av dessa kontroller, från vänster till höger:
Ta några minuter att spela med dessa kontroller för att förstå vad de gör.
Bygg och kör programmet igen och tryck på Mer fliken längst ner i appens användargränssnitt. Vid första anblicken ser användargränssnittet okej, men det uppför sig inte exakt hur det ska. En oskärpaffekt ovanpå bilden visas inte. Felsöka synhierarkin för att bättre identifiera problemet.
Börja med att panorera till vänster eller höger för att se allt i en vinkel. Dra sedan Visa mellanslagreglaget till höger.
Med användargränssnittet dras från varandra blir det klart att det finns en annan vy dold under bilden. Välj den för att bekräfta att den visade visningseffekten saknas.
Öppna Main.storyboard och navigera till Second View Controller Scene. I dokument skiss panel till vänster, expandera Second View Controller's Se objekt för att se hur dess undervyer är beställda.
Xcode lagrar synpunkter i stigande ordning inom dokumentet. Med andra ord är de överst i listan grunden för synhierarkin.
Att lösa problemet är enkelt. Blur Effect View kommer att vara under Sky Image vid körning, eftersom det är den första vyn i vyhierarkin. Klicka och dra på Blur Effect View undertill Sky Image i dokumentet. Resultatet ska nu se ut som skärmdumpen nedan.
Om du kör appen igen ska oskärpaffekten vara synlig. Appens användargränssnitt ser nu ut som det utformades. Låt oss titta på några av iOS Simulators felsökningsfunktioner för att se vad som annars kan förbättras.
Bygg och kör appen i iOS-simulatorn. Med iOS-simulatorn vald, välj Färgblandade lager från debug meny.
Appens användargränssnitt är överlagrat med en blandning av grönt och rött. Dessa är signaler för att visa vilka lager som har blivit aktiverade och vilka är ogenomskinliga. Blandningsskikt är beräkningsintensivt. Det rekommenderas därför att använda ogenomskinliga lager om möjligt.
Apple noterar i sin dokumentation att försöka använda ogenomskinliga lager när man hanterar tabellvyer. En av huvudorsakerna till dålig prestanda vid rullning beror på blandat innehåll. När innehållets bakgrund är ogenomskinlig bläddrar vanligtvis mjukare.
För den här appen, om en användare har hundratals objekt i listan att göra, kan de uppleva hakig eller inkonsekvent rullningsprestanda. Bordsvyncellerna använder för närvarande blandade lager. Eftersom bakgrundsskärmens bakgrund är redan vit, kommer slutanvändaren inte att se någon skillnad om tabellvyncellerna är blandade eller opaka med en vit bakgrund.
Öppna Main.storyboard och välj tabellprotokollprototypen i Att göra lista Scen. I Attribut Inspector. Bläddra ner till Ritning avsnitt och checka Ogenomskinlig.
Bygg och kör appen med färgblandade lager aktiverade. Eftersom tabellvyncellerna nu är ogenomskinliga överlagras de med en grön färg som indikerar att de är ogenomskinliga.
Förutom flaggande skikt finns det en handfull andra funktioner som kan hjälpa till med felsökning i iOS-simulatorn. Här är några av de som jag tycker är mest användbara:
Något som förbises av många utvecklare är effekten av statusfältet på din app om ett samtal pågår. Du kan enkelt testa detta genom att växla statusfältet i samtalet. Du gör det genom att välja Växla i samtalsstatusfältet från Hårdvara menyn i iOS-simulatorn.
Om du vill se hur din app svarar på en sådan händelse trycker du på Kommando-T, för att aktivera långsamma animeringar och tryck på Kommando-Y för att visa statusfältet i samtalet. Om din app använder en navigeringsfält, hanterar operativsystemet detta för dig.
Bortsett från färgvyer, tänk på att iOS-simulatorn också kan felsöka Core Location-problem. Du kan simulera en enhet vid en viss latitud och longitud och det finns även ett antal provplatser som ska testas med. Om din app använder iCloud för att hantera data kan du också manuellt utlösa en synkroniseringshändelse.
Medan den medföljande demo-appen är mycket enkel kan du använda de tekniker som nämns i den här artikeln för att raka timmar av framtida projekt. Visa debugging kan hjälpa dig att rätta till många problem som uppstår i användargränssnittet.
Utanför Xcode och gränssnittsbyggare kan hjälp av IOS Simulators felsökningsfunktioner förbättra resultatet och identifiera flaskhalsar. Apples egna riktlinjer för mänskliga gränssnitt betonar vikten av responsiva appar som är lätta att använda och navigera. Med de förbättringar som gjorts till gränssnittsbyggare har det aldrig varit lättare att göra just det.
Accentsconagua