Share
Xcode 6 brengt een aantal belangrijke verbeteringen. Een van de meer opvallende ontwikkelingen is beelddebugging. Vaak zal de gebruikersinterface van een app zich niet gedragen zoals verwacht. Weergaven worden mogelijk niet weergegeven of, als ze worden weergegeven, kunnen ze onjuist worden weergegeven. In deze zelfstudie wordt beschreven hoe u de nieuwe functies voor foutopsporing op het scherm van Xcode kunt gebruiken om gemakkelijk problemen in de gebruikersinterface van een app te identificeren en op te lossen.
Om ons op weg te helpen, download je het voorbeeldproject van GitHub en open je ViewDebugging.xcodeproj. Het project bevat een eenvoudige app met tabbladen met een paar view controllers, een applicatieafspraak en een storyboard. Deze app is ontworpen voor de iPhone, maar hij wordt prima weergegeven op elk apparaat, omdat deze een adaptieve lay-out gebruikt, geïntroduceerd in iOS 8.
Het doel van de app is om een eenvoudige takenlijst te maken. Het bevat een overzichtsscherm om andere informatie te bekijken, zoals het aantal items in de takenlijst, de avatar van de gebruiker en hun Twitter-handle. Start de app in de iOS Simulator door op te klikkenbouwen en rennenin de linkerbovenhoek.
Meteen kunt u een probleem met de gebruikersinterface opmerken. De tabelweergave lijkt geen gegevens weer te geven. Doe open FirstViewController.swift en zoek de volgende regel code.
var mockNotesDataSource: [String] = ["Doe wat was", "Maak huiswerk af", "Loop met de hond", "Leer meer over beelddebugging"] didSet self.tableView.reloadData ()
De mockNotesDataSource variabele dient als de gegevensbron van de tabelweergave. We gebruiken Swift's eigendomsobservatiemogelijkheden. Als gevolg hiervan wordt de tabelweergave automatisch opnieuw geladen wanneer de gegevensbron verandert. Als u naar het bovenstaande codefragment kijkt, moeten vier items worden weergegeven in de takenlijst. Het lijkt erop dat er iets anders mis is.
Het probleem lijkt verband te houden met de gebruikersinterface. Druk terwijl de app wordt uitgevoerd op Debug View Hierarchy knop onderaan. Als alternatief, navigeren naar Foutopsporing> Debugging bekijken> Hiërarchie weergeven maakt ook debugging van het beeld mogelijk.
Wanneer foutopsporing voor weergave is ingeschakeld, maakt Xcode een momentopname van de weergavehiërarchie van de toepassing en presenteert deze een driedimensionale, exploded view van de gebruikersinterface. Het toont de weergavehiërarchie van de toepassing, de positie, volgorde en grootte van elke weergave en ook hoe de weergaven met elkaar omgaan.
Als we kijken naar de driedimensionale render, kunnen we zien dat de takenlijst goed wordt geladen, maar de cellen van de tabelweergave zijn te breed.
Stop met het debuggen van de applicatie en ga naar Main.Storyboard om het probleem op te lossen. Klik op de tabelweergave en selecteer Editor> Los problemen in de automatische lay-out op> Reset naar voorgestelde beperkingen.
Bouw en voer de applicatie nogmaals uit om te bevestigen dat de gebruikersinterface correct wordt weergegeven. Klik op de Debug View Hierarchy om enkele van de andere functies van foutopsporing in de weergave nader te bekijken.
Klik en sleep ergens binnen de driedimensionale render om de gebruikersinterface te kantelen en te pannen. Kantel het naar links of rechts om de tabelweergave te selecteren.
Zodra een weergave is geselecteerd, markeert Xcode de weergave en vult de Voorwerp en Grootte inspecteurs aan de rechterkant. Om te bevestigen dat je de tabelweergave hebt geselecteerd, kijk je naar de springbalk bovenaan en verifieer je dat UITableView is het laatste item aan de rechterkant.
De Voorwerp en Grootte inspecteurs bevatten een schat aan nuttige informatie. In het verleden moesten ontwikkelaars vertrouwen op loginstructies of breekpunten om de configuratie van een weergave te inspecteren.
Open de Grootte inspecteur aan de rechterkant en, in de Automatische lay-out sectie, merk op dat de juiste beperkingen nu op de weergave worden toegepast. In de Voorwerp inspecteur, kunt u de kenmerken van de geselecteerde weergave inspecteren.
Recht boven het gebied voor foutopsporing in Xcode zijn er negen knoppen en schuifknoppen gebruikt voor foutopsporing bij weergave.
Dit is wat elk van deze besturingselementen doet, van links naar rechts:
Neem een paar minuten de tijd om met deze knoppen te spelen om goed te begrijpen wat elk van hen doet.
Bouw de toepassing opnieuw en voer deze uit en tik op de Meer tabblad onderaan de gebruikersinterface van de app. Op het eerste gezicht ziet de gebruikersinterface er goed uit, maar hij gedraagt zich niet precies zoals hij zou moeten. Een vervagingseffect boven op de afbeelding wordt niet weergegeven. Debug de weergavehiërarchie om het probleem beter te identificeren.
Begin met pannen naar links of rechts om alles schuin te bekijken. Sleep vervolgens de bekijk spatie schuif naar rechts.
Met de gebruikersinterface uit elkaar getrokken, wordt het duidelijk dat er een andere weergave is verborgen onder de afbeelding. Selecteer het om te bevestigen dat dit de ontbrekende visuele effectweergave is.
Open Main.storyboard en navigeer naar Second View Controller Scene. In de documentoverzicht deelvenster links, vouw het uit Second View Controller's Uitzicht object om te zien hoe zijn subweergaven zijn geordend.
Xcodelaagweergaven in oplopende volgorde binnen de documentomtrek. Met andere woorden, degenen bovenaan de lijst vormen de basis van de weergavehiërarchie.
Ons probleem oplossen is eenvoudig. Weergave-effect vervagen zal beneden zijn Sky Image tijdens runtime, omdat dit de eerste weergave in de weergavehiërarchie is. Klik en sleep het Weergave-effect vervagen onder Sky Image in de documentomtrek. Het resultaat zou nu moeten lijken op de onderstaande schermafbeelding.
Als u de app opnieuw uitvoert, moet het vervagingseffect zichtbaar zijn. De gebruikersinterface van de app ziet er nu uit zoals deze is ontworpen. Laten we eens kijken naar enkele van de functies voor foutopsporing van de iOS Simulator om te zien wat er nog meer verbeterd kan worden.
Bouw en voer de app uit in de iOS Simulator. Selecteer met de iOS-simulator geselecteerd Gemengde kleuren van de debug menu.
De gebruikersinterface van de app is bedekt met een mix van groen en rood. Dit zijn aanwijzingen om aan te geven op welke lagen vermenging is ingeschakeld en welke lagen dekkend zijn. Het mengen van lagen is rekenintensief. Het wordt daarom aanbevolen waar mogelijk ondoorzichtige lagen te gebruiken.
Apple noteert in hun documentatie dat ze ondoorzichtige lagen proberen te gebruiken bij het werken met tabelweergaven. Een van de belangrijkste oorzaken van slechte prestaties bij het scrollen is het gevolg van gemengde inhoud. Wanneer de achtergrond van de inhoud ondoorzichtig is, wordt scrollen over het algemeen vloeiender.
Voor deze app kunnen gebruikers die honderden items in hun takenlijst hebben, schokkerige of inconsistente scrolprestaties ervaren. De cellen van de tabelweergave gebruiken momenteel gemengde lagen. Omdat de weergave-achtergrond van de weergavecontroller al wit is, ziet de eindgebruiker geen verschil als de cellen van de tabelweergave zijn gemengd of dekkend met een witte achtergrond.
Open Main.storyboard en selecteer het prototype van de tafelweergavecel in de Takenlijst Scene. In de Kenmerken Inspector. Blader omlaag naar de Tekening sectie en check ondoorzichtig.
Bouw de app en voer deze uit met ingekleurde gekleurde lagen ingeschakeld. Omdat de cellen van de tabelweergave nu ondoorzichtig zijn, zijn ze bedekt met een groene kleur, wat aangeeft dat ze ondoorzichtig zijn.
Afgezien van het markeren van lagen, zijn er een handvol andere functies die kunnen helpen bij het debuggen in de iOS-simulator. Hier zijn enkele die ik het handigst vind:
Iets dat door veel ontwikkelaars over het hoofd wordt gezien, is de impact van de statusbalk op uw app als er een gesprek gaande is. U kunt dit eenvoudig testen door de statusbalk in gesprek te wisselen. U doet dit door te selecteren Schakel de statusbalk in gesprek in van de Hardware menu in de iOS Simulator.
Als u wilt zien hoe uw app op een dergelijke gebeurtenis reageert, drukt u op Command-T, om langzame animaties in te schakelen en druk op Command-Y om de gespreksstatusbalk weer te geven. Als uw app een navigatiebalk gebruikt, zorgt het besturingssysteem ervoor dat dit voor u gebeurt.
Afgezien van de kleurenweergave, moet u er rekening mee houden dat de iOS-simulator ook problemen met de kernlocatie kan opsporen. U kunt een apparaat simuleren op een specifieke lengte- en breedtegraad en er zijn zelfs een aantal voorbeeldlocaties om mee te testen. Als uw app iCloud gebruikt om gegevens te beheren, kunt u ook handmatig een synchronisatiegebeurtenis activeren.
Hoewel de meegeleverde demo-app heel eenvoudig is, kan het gebruik van de technieken die in dit artikel worden genoemd uren van toekomstige projecten schaven. View debugging kan u helpen veel problemen die in de gebruikersinterface voorkomen op te lossen.
Buiten Xcode en interface builder, kan het gebruik van de debug-functies van de iOS Simulator de prestaties helpen verbeteren en knelpunten identificeren. De eigen menselijke interfacerichtlijnen van Apple benadrukken het belang van responsieve apps die gemakkelijk te gebruiken en te navigeren zijn. Met de verbeteringen aan interface-builder was het nog nooit zo eenvoudig om dat te doen.
Accentsconagua