How do I measure the distance between UI elements in Xcode?

Question

I'm trying to determine the distance between UI elements in my app, to check that the layout matches that specified by designers. I'm using the 'Debug UI Hierarchy' option, and I do see the representation of the phone's UI in Xcode. However, the only way I can see to determine the relative positioning of two elements is to look at the Size inspector in the right sidebar, and do a manual calculation on their provided measurements. Is there a better way to do this? Can I select one element and then select another to compare it with?

Answer 1

I now its been a while since you asked your question but I've faced the same problem and I could figure out how to measure NSConstraints between views in runtime.

First, you have to click the debug view hierarchy icon on the debug area as shown on this picture:

After pressing the button a snapshot of the Views hierarchy will be shown on the Xcode screen as follows:

You can see all the elements (UIViews) that are actually being displayed (or not, they can be in the background) on the screen of the device

After this, you can press on the show constraint icon to show the constrains that are being applied to every view on the screen, you'll have a screen pretty similar to the interface builder constraint layout:

If you select on a particular constraint (the one you actually care about), i.e in this screen I want to know the distance between the top and the ImageView that is being represented by the big square. So selecting on that particular constraint and clicking on the inspector Object inspector icon inside the Utilities panel you can actually see the constraint description.

This way you can see the constraints measures and the relation with the views and frame bounds.

Answer 2

You can press "Option key" and the UI element on StoryBoard this will show distances between this element and any other

I hope this helps