iOS tools to measure visually the distance between views
Introduction:
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:
To understand this tutorial we need knowledge about:
- Coordinate system in iOS
- Frames and bounds in views
Tools:
1. Simulator built-in visual tools:
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.
1. RocketSim:
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
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.
b. Grids
Grids help us to check the alignment of View in high level and quickly.
Other functionalities of this tool is record thr simulator with touches/bezels, compare designs and delete Derived Data with a click.
Hands-on practice:
To check the distance between two views. We activated the blended colors layers and used the ruler of RocketSim.
- We need to save the Y1 position of View1, then the Y2 position of View2.
Y1 = 556
Y2 = 566
- 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)