Share
Xcode 6 bringt eine Reihe bedeutender Verbesserungen. Einer der bemerkenswertesten Fortschritte ist das Debugging von Ansichten. Häufig verhält sich die Benutzeroberfläche einer App nicht wie erwartet. Ansichten werden möglicherweise nicht angezeigt oder, wenn sie angezeigt werden, werden sie möglicherweise falsch angezeigt. In diesem Lernprogramm wird beschrieben, wie Sie mit den neuen View-Debugging-Funktionen von Xcode Probleme in der Benutzeroberfläche einer App erkennen und beheben können.
Laden Sie das Beispielprojekt von GitHub herunter und öffnen Sie es ViewDebugging.xcodeproj. Das Projekt enthält eine einfache Anwendung mit Registerkarten mit einigen Ansichtscontrollern, einen Anwendungsdelegierten und ein Storyboard. Diese App wurde für das iPhone entwickelt, wird jedoch auf jedem Gerät angezeigt, da das adaptive Layout in iOS 8 verwendet wird.
Der Zweck der App ist es, eine einfache Aufgabenliste zu erstellen. Es enthält einen Übersichtsbildschirm, um andere Informationen anzuzeigen, z. B. die Anzahl der Elemente in der Aufgabenliste, den Avatar des Benutzers und deren Twitter-Handle. Führen Sie die App im iOS-Simulator aus, indem Sie auf klickenbauen und laufenoben links.
Sie stellen möglicherweise sofort ein Problem mit der Benutzeroberfläche fest. Die Tabellenansicht scheint keine Daten anzuzeigen. Aufmachen FirstViewController.swift und suchen Sie die folgende Codezeile.
var mockNotesDataSource: [String] = ["Wäsche waschen", "Hausaufgaben erledigen", "Walk the dog", "Informationen zum Debugging von Ansichten"] didSet self.tableView.reloadData ()
Das mockNotesDataSource Variable dient als Datenquelle der Tabellensicht. Wir nutzen die Eigenschaftsbeobachter von Swift. Daher wird die Tabellensicht automatisch neu geladen, wenn sich die Datenquelle ändert. Bei Betrachtung des obigen Code-Ausschnitts sollten vier Elemente in der To-Do-Liste angezeigt werden. Es scheint, dass etwas anderes nicht stimmt.
Das Problem scheint auf die Benutzeroberfläche zurückzuführen zu sein. Drücken Sie bei laufender App die Taste Debug View-Hierarchie Knopf am unteren Rand. Alternativ zu navigieren Debuggen> Debugging anzeigen> Hierarchie der Capture-Ansicht ermöglicht auch das Debuggen von Ansichten.
Wenn View Debugging aktiviert ist, erstellt Xcode eine Momentaufnahme der Ansichtshierarchie der Anwendung und zeigt eine dreidimensionale, explodierte Ansicht der Benutzeroberfläche. Es zeigt die Ansichtshierarchie der Anwendung, die Position, Reihenfolge und Größe jeder Ansicht sowie die Art und Weise, wie die Ansichten miteinander interagieren.
Beim dreidimensionalen Rendern sehen wir, dass die Aufgabenliste gut geladen wird, die Zellen der Tabellensicht jedoch zu breit sind.
Beenden Sie das Debuggen der Anwendung und navigieren Sie zu Main.Storyboard um das Problem zu beheben. Klicken Sie auf die Tabellenansicht und wählen Sie Editor> Automatische Layoutprobleme beheben> Auf vorgeschlagene Einschränkungen zurücksetzen.
Erstellen Sie die Anwendung erneut, und führen Sie sie erneut aus, um sicherzustellen, dass die Benutzeroberfläche korrekt angezeigt wird. Drücke den Debug View-Hierarchie Klicken Sie auf die Schaltfläche, um einige der anderen Funktionen des View-Debugging näher zu betrachten.
Klicken und ziehen Sie an eine beliebige Stelle innerhalb des dreidimensionalen Renderers, um die Benutzeroberfläche zu neigen und zu schwenken. Neigen Sie ihn nach links oder rechts, um die Tabellenansicht auszuwählen.
Sobald eine Ansicht ausgewählt ist, hebt Xcode die Ansicht hervor und füllt die Objekt und Größe Inspektoren auf der rechten Seite. Um zu bestätigen, dass Sie die Tabellenansicht ausgewählt haben, schauen Sie sich die Sprungleiste oben an und überprüfen Sie dies UITableView ist der letzte Punkt rechts.
Das Objekt und Größe Inspektoren enthalten eine Fülle hilfreicher Informationen. In der Vergangenheit mussten sich Entwickler auf Protokollanweisungen oder Haltepunkte verlassen, um die Konfiguration einer Ansicht zu überprüfen.
Öffne die Größe Inspektor rechts und in der Automatisches Layout Beachten Sie in diesem Abschnitt, dass die richtigen Bedingungen jetzt auf die Ansicht angewendet werden. In dem Objekt Inspector können Sie die Attribute der ausgewählten Ansicht überprüfen.
Über dem Debugging-Bereich in Xcode befinden sich neun Schaltflächen und Schieberegler für das Debugging von Ansichten.
Dies ist, was jedes dieser Steuerelemente von links nach rechts macht:
Nehmen Sie sich einige Minuten Zeit, um mit diesen Steuerelementen zu spielen, um zu verstehen, was jeder von ihnen macht.
Erstellen und starten Sie die Anwendung erneut und tippen Sie auf Mehr Registerkarte am unteren Rand der Benutzeroberfläche der App. Auf den ersten Blick sieht die Benutzeroberfläche gut aus, aber sie verhält sich nicht genau so, wie sie sollte. Ein Unschärfe-Effekt über dem Bild wird nicht angezeigt. Debuggen Sie die Ansichtshierarchie, um das Problem besser zu identifizieren.
Beginnen Sie mit dem Schwenken nach links oder rechts, um alles in einem Winkel anzuzeigen. Dann ziehen Sie die Ansichtsabstandsschieberegler nach rechts.
Wenn die Benutzeroberfläche auseinandergezogen wird, wird deutlich, dass sich unter dem Bild eine weitere Ansicht befindet. Wählen Sie es aus, um zu bestätigen, dass es sich um die fehlende visuelle Effektansicht handelt.
Öffnen Hauptplatine und navigiere zu Zweite Ansicht Controller-Szene. In dem Dokumentumriss Fenster links, erweitern Sie die Zweiter View Controller's Aussicht Objekt, um zu sehen, wie seine Unteransichten angeordnet sind.
Xcode-Layer-Ansichten in aufsteigender Reihenfolge innerhalb der Dokumentumrisse. Mit anderen Worten, die ganz oben in der Liste sind die Grundlage der Ansichtshierarchie.
Unser Problem zu beheben ist einfach. Unschärfeeffektansicht wird unter sein Himmel Bild zur Laufzeit, weil es die erste Ansicht in der Ansichtshierarchie ist. Klicken Sie auf und ziehen Sie die Unschärfeeffektansicht unterhalb Himmel Bild in der Dokumentübersicht. Das Ergebnis sollte jetzt wie in der Abbildung unten aussehen.
Wenn Sie die App erneut ausführen, sollte der Unschärfeeffekt sichtbar sein. Die Benutzeroberfläche der App sieht jetzt so aus, wie sie entworfen wurde. Sehen wir uns einige Debugging-Funktionen des iOS-Simulators an, um zu sehen, was noch verbessert werden kann.
Erstellen und starten Sie die App im iOS-Simulator. Wählen Sie bei ausgewähltem iOS-Simulator aus Farbe gemischt Schichten von dem Debuggen Speisekarte.
Die Benutzeroberfläche der App wird mit einer Mischung aus Grün und Rot überlagert. Dies sind Hinweise, die zeigen, für welche Ebenen das Blending aktiviert ist und welche nicht. Das Mischen von Ebenen ist rechenintensiv. Es wird daher empfohlen, möglichst undurchsichtige Schichten zu verwenden.
Apple stellt in seiner Dokumentation fest, dass undurchsichtige Ebenen bei Tabellenansichten verwendet werden sollen. Eine der Hauptursachen für schlechte Leistung beim Scrollen ist auf gemischten Inhalt zurückzuführen. Wenn der Hintergrund des Inhalts undurchsichtig ist, wird das Scrollen im Allgemeinen weicher.
Wenn ein Benutzer Hunderte von Artikeln in seiner Aufgabenliste hat, kann dies zu abgehackter oder inkonsistenter Bildlaufleistung führen. Die Zellen der Tabellensicht verwenden derzeit gemischte Ebenen. Da der Ansichtshintergrund des View-Controllers bereits weiß ist, wird der Endbenutzer keinen Unterschied erkennen, wenn die Tabellensichtzellen mit einem weißen Hintergrund gemischt oder undurchsichtig sind.
Öffnen Hauptplatine und wählen Sie den Zell-Prototyp der Tabellensicht in aus Aufgabenliste Szene. In dem Attribute-Inspektor. Scrollen Sie nach unten zu Zeichnung Abschnitt und überprüfen Undurchsichtig.
Erstellen und starten Sie die App mit aktivierten Farbebenen. Da die Zellen in der Tabellensicht jetzt undurchsichtig sind, werden sie mit einer grünen Farbe überlagert, um anzuzeigen, dass sie undurchsichtig sind.
Neben dem Markieren von Layern gibt es noch eine Handvoll anderer Funktionen, die beim Debuggen im iOS-Simulator hilfreich sein können. Hier einige, die ich am nützlichsten finde:
Viele Entwickler übersehen die Auswirkungen der Statusleiste auf Ihre App, wenn ein Anruf ausgeführt wird. Sie können dies einfach testen, indem Sie die Statusleiste während eines Anrufs umschalten. Sie tun dies, indem Sie auswählen Statusanzeige während eines Anrufs umschalten von dem Hardware Menü im iOS-Simulator.
Um zu sehen, wie Ihre App auf ein solches Ereignis reagiert, drücken Sie Befehl-T, um langsame Animationen zu aktivieren, und drücken Sie Befehl-Y um die Statusanzeige während eines Anrufs anzuzeigen. Wenn Ihre App eine Navigationsleiste verwendet, kümmert sich das Betriebssystem um Sie.
Beachten Sie, dass der iOS-Simulator neben der Farbansicht auch Probleme mit dem Kernspeicherort beheben kann. Sie können ein Gerät bei einem bestimmten Längen- und Breitengrad simulieren, und es gibt sogar eine Reihe von Beispielstandorten, mit denen getestet werden kann. Wenn Ihre App iCloud zum Verwalten von Daten verwendet, können Sie auch manuell ein Synchronisationsereignis auslösen.
Während die mitgelieferte Demo-App sehr einfach ist, kann die Verwendung der in diesem Artikel erwähnten Techniken die Arbeitszeit zukünftiger Projekte verringern. View Debugging kann Ihnen helfen, viele Probleme zu beheben, die in der Benutzeroberfläche auftreten.
Außerhalb von Xcode und Interface Builder kann die Verwendung der Debugging-Funktionen des iOS Simulators die Leistung verbessern und Engpässe erkennen. Apples eigene Richtlinien für die Benutzeroberfläche betonen die Wichtigkeit von responsiven Apps, die einfach zu bedienen sind und navigieren. Mit den Verbesserungen am Interface Builder war es noch nie einfacher.
Accentsconagua