Wenn man die Benutzeroberfläche einer iOS App mit dem Storyboard aufbaut, ist man spätestens mit iOS 8 bestens beraten, das Layout möglichst unabhängig von einer bestimmten Geräteauflösung zu halten. Bei neu erstellen Xcode 6 Projekten sind die ViewController im Soryboard sogar quadratisch, damit klar ist, dass es sich um kein bestimmtes Gerät handelt.

Die Preview-Ansicht

Um zu testen, ob sich das Layout auf unterschiedlichen Geräten und in unterschiedlichen Orientierungen korrekt verhält, gibt es eine Preview-Ansicht.
Man schaltet zunächst auf den Assistant editor um. Auf der linken Seite wählt man einen ViewController aus und auf dere rechten Seite wählt man in der oberen Leiste „Preview“ aus.
In der unteren linken Ecke kann man mit „+“ weitere Geräte hinzufügen, die man gleichzeitig nebeneinander sehen möchte. Die Geräte können danach noch gedreht werden, um auch die unterschiedlichen Orientierungen zu testen.

Preview-Ansicht

Die Preview-Ansicht beachtet natürlich auch die gesetzten Layout-Constraints.
Unten rechts kann man die Sprache umstellen und eine „Double-Length Pseudolanguage“ auswählen. Diese Pseudosprache verdoppelt die Länge aller Texte und ist sehr praktisch um zu testen wie sich Zeilenumbrüche oder sehr lange Texte auf das Layout auswirken.

Die App sollte man natürlich trotzdem mindestens ein Mal auf einem Gerät oder zumindest auf dem Simulator testen, um zu sehen wie sich das Interface mit echten Daten verhält. Man darf sich auch nicht komplett auf die Preview-Ansicht verlassen. Je nach Komplexität des ViewControllers und der Layout Constraints kann das Resultat in der App anders aussehen als in der Preview Ansicht.
Aber die Preview-Ansicht ist sehr praktisch um schnell zu prüfen ob das Resultat in groben Zügen den eigenen Vorstellungen enspricht.

Die 3D Debug-Ansicht

Wenn das Layout in der laufenden App nicht so aussieht wie erwartet, ist die 3D Debug-Ansicht ziemlich hilfreich. Um in diese Ansicht zu gelangen, klickt man während einer Debug-Session auf den „Debug View Hierarchy“-Button:

Debug View Hierarchy

Die App wird pausiert und es öffnet sich eine Ansicht, in der man die View-Hierarchie betrachten kann. Hier hat man zum Beispiel die Möglichkeit den Blickwinkel zu ändern und uninteressante Ebenen auszublenden. Wenn man auf eine View klickt, werden im Utilities-Bereich (rechts) einige Werte zu der View angezeigt. So kann man zum Beispiel in Erfahrung bringen, welche Schriftart oder Textfarbe gerade gesetzt ist:

debug2

Hilfreich ist hier vor allem, dass man sehen kann wie viele und welche Views übereinander liegen und dass man Views debuggen kann, die von anderen Views verdeckt werden.
Oft sieht man auch, dass einige Views (in diesem Fall die tableView) über den Bildschirmrand hinausgehen. Damit lassen sich einige rätselhafte Phänomene erklären.

Fazit

Die beiden Ansichten können beim Testen und Debuggen viel Zeit sparen. Denn man muss nicht viele Änderungen am Code durchführen, Log-Ausgaben machen, bauen und die App erneut ausführen.

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.