iOS constraint equation values

Question

I'm trying to find out what the values of the left and right views in a constraint equation are.

Currently this is how I see it.

The origin-point (0,0) in the coordinate system is at the top left.

Therefore views.attribute that are closer to the top and left are smaller.

In the image posted above. RedView.Leading has a higher value than BlueView.trailing. The equation is satisfied because 8 is added to BlueView.trailing.

---

The same would apply to the circled constraint in the image below. superView.top is less than greyView.top because superView.top is on origin.x .

---

My question is are the values relative to the origin point ?

Answer 1

Theory of Relativity in Auto Layout

---

Short answer:

Yes and no. Actually more no. But most importantly: It's irrelevant!

---

Detailed answer:

Layout attributes are abstract descriptions of a view's position and size.

Position attributes:

• top
• bottom
• leading
• trailing
• ...

Size attributes:

• width
• height

While size attributes can describe an absolute value (e.g. view.height = 20.0) position attributes are always relative to another position attribute. That's why Apple only shows two views in their example, without any coordinate system. The equation

RedView.leading = 1.0 × BlueView.trailing + 8.0

states that RedView's leading edge is always 8.0 points to the right of BlueView's trailing edge. The origin of the underlying coordinate system doesn't matter!

Let's say we have a coordinate system ∑₁ with an origin O₁ and let's assume that BlueView's trailing edge is at x = 100 with respect to that origin. This would mean:

BlueView.trailing = 100
RedView.leading = 1.0 × 100 + 8.0 = 108

Now we look at a different coordinate system ∑₂ with an origin O₂ that's shifted by 20 points to the left, so

• O₂.x = O₁.x – 20
• O₂.y = O₁.y

In this coordinate system BlueView's trailing edge is at x = 120. So we get:

BlueView.trailing = 120
RedView.leading = 1.0 × 120 + 8.0 = 128

As you can see the values for the layout attributes BlueView.trailing and RedView.leading are different in ∑₁ and ∑₂. However, the horizontal spacing between the views is the same

RedView.leading – BlueView.trailing = 8

in both coordinate systems.

And that's the whole point of Auto Layout:

To describe the positions and sizes of views relative to each other, rather than using absolute values with respect to a particular coordinate system.

When I tell you to park your car behind your neighbor's car and leave a 1 meter gap in between, you know what to do, right? Without knowing where the road begins!

It's not important.

---

However – and I guess that's what made you ask the question – the system will need to "tell" the display at some point which pixels to draw for a particular view. And the pixel grid does have an absolute origin and a fixed coordinate system.

So eventually, the system will substitute the layout attributes for the outermost view (the window) before solving all the constraint equations. At that point in time your layout attributes will be relative to a particular origin (most likely the window's origin in the upper left corner, yes) but it's simply irrelevant!

Apple may choose any coordinate system they want (even a coordinate system whose origin is 50 points above the screen) and regardless of that particular system your layout will still look the same with the same set of constraints.

Answer 2

No, values are not relative to origin point. Forget about this. To position them there must be some additional constraints applied to such attributes of views as:

left, right, top, bottom, leading, trailing, width, height, centerX,  centerY, lastBaseline, firstBaseline, leftMargin, rightMargin, topMargin, bottomMargin, leadingMargin, trailingMargin, centerXWithinMargins, centerYWithinMargins.

Also in iOS 9 there were added diffrent kind of anchorPoints to make adding constraints easier.

Also Autolayout added localized leading and trailing attributes which position (leading is at left or right side of view) depends on Device Locale.

I would suggest the following equations: redView.width = 0 + 1 * blueView.width redView.height = 0 + 1 * blueView.height

redView.leading = 20 + superView.leading blueView.trailing = -20 + superView.trailing redView.bottom - blueView.bottom redView.bottom = superview.bottom - 20

So it does not matter where origin is.

Answer 3

Everything you are asking requires knowledge of Auto Layout.

Leading, Trailing, Top, Bottom and other several constraints are applied w.r.t to the views.

Example:

RedView.leading = 1.0  x BlueView.trailing + 8.0

here, the leading constraint of RedView is applied w.r.t the BlueConstraint trailing whatever it is. i.e. RedView is placed 8 points farther than BlueView in horizontal direction.

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html provides a good knowledge of the auto layout constraints, in what context they are applied and the how the views layout according to them.

Also there are top layout guide, bottom layout guide, margins with respect to which you apply constraints to a view.

Read more about auto layout to get a clear understanding.

Edit:

Example:

BlueView frame: (x: 0, y: 0, width: 4, height: 2)

Now the BlueView trailing that we have is: 4

So now we are setting RedView leading as:

RedView.leading = 1.0  x BlueView.trailing + 8.0

i.e. RedView.leading = 1.0 x 4 + 8.0 = 12.0

So now the frame of RedView is: (x: 12, y: 0, width: 4, height: 2)

Also from above equation,

BlueView.trailing = RedView.leading - 8.0

i.e., BlueView.trailing = 12.0 - 8.0 = 4.0

So, the equation is valid for both RedView and BlueView.