Introduction: Link to heading

In the Test stage in the Software Development Cycle there is the Visual Quality Assurance phase, a common task is to check the distance between views and the big part of issues in this phase is about that. To avoid these concerns we can use some debug instruments from the XCode Simulator and third party tools to check visually.

In this article we use the simulator’s color blended layers debug instrument and third party tool called RocketSim.

Requirements: Link to heading

To understand this tutorial we need knowledge about:

  • Coordinate system in iOS
  • Frames and bounds in views

Tools: Link to heading

1. Simulator built-in visual tools: Link to heading

Xcode Simulator comes with some debug built-in Instruments and to activate it we need to go to the debug menu and choose the debug mode.

For this article we use the color blended layer instrument that shows us the blended view layers. In this mode multiple view layers that are drawn on top of each other with blending enabled are highlighted in red.

Figure: Debug mode in simulator.

1. RocketSim: Link to heading

RocketSim is a third party tool that gives XCode Simulator extra features to increase your productivity as an iOS developer

To check the margins RocketSim give us the Ruler and Grid.

a. Ruler Link to heading

Ruler allow us to check the horizontal and vertical position of UI elements. And with basic arithmetic operations we can check the distance between views.

alt text

b. Grids Link to heading

Grids help us to check the alignment of View in high level and quickly.

alt text

Other functionalities of this tool is record thr simulator with touches/bezels, compare designs and delete Derived Data with a click.

Hands-on practice: Link to heading

To check the distance between two views. We activated the blended colors layers and used the ruler of RocketSim.

  1. We need to save the Y1 position of View1, then the Y2 position of View2.
Figure: Debug mode and ruler in simulator.

Y1 = 556

Figure: Debug mode and ruler in simulator.

Y2 = 566

  1. To know the distance we need apply the arithmetic difference of positions

distance = Y2 - Y1

distance = 566 - 556

distance = 10

3) Check if the difference is according to the real measure (for example in your figma)