During the development of any electronics and/or software product, being able to see and measure the invisible is crucial to creating great products. Visually being able to inspect a GUI layer hierarchy during app development is essential to understanding and debugging its layers and UI items. Without this capability, a developer will attempt to mentally visualize and debug the UI layer hierarchy using lots of print code (Swift).
The Reveal App, developed by the team at Itty-Bitty Apps in Australia, displays the entire view layer hierarchy in an exploded 3-D spinable view similar to high-end CAD programs. Many of the layout constraints and UI settings are also shown and edittable in real-time. It’s all about the insights gained from being to visualize the view hierarchy within an iOS app.
As shown in this post’s short video, the main screen highlights the amount of detailed information shown in the three panes. The left pane is the view hierarchy organized as an expandable tree that shows views, UI items, and layout constraints. The center pane is the layer viewer which can provide either 2-D (placement visualization of UI items) or 3-D (view and UI item layering). The right pane has five inspectors located across the top (i.e., Application, Identity, Attributes, Layout, Layer). After selecting a particular view in the center pane or in the left pane, various perspectives of that selection are shown with these five inspectors.
Reveal App Integration:
Using the Reveal App with an Xcode project iOS app requires integration (installation and linking) of the Reveal libary into the iOS app project’s development (debug) environment. These integration steps are listed on both on the app’s website and from within the Reveal App’s help menu. Note: It is also straightforward to remove the framework reference and linkages.
I have been using the Reveal App during our app development to understand the scrollview layer hierarchy and verify that the layers and UI match design intent. As such, I spend some time analyzing the information displayed in Reveal App. It is an indispensable development tool with a gorgeous UI look-and-feel that showcases an iOS app’s layer hierarchy in a visually informative manner.