AutoLayout Understanding Multiplier

Question

I have a problem with multiplier and cannot understand how this feature works. For example i have view has 6:1 multiplier(To SuperView.Leading) as below.

When i

Answer 1

When working with autolayout, especially when you are working with proportional layouts, you have to use multiplier.

I have to explain here some mathematics. We know straight line equation.

Y = Mx + C

In above equation. Assume M is your multiplier and C is your Constant.

Thus suppose you have superview (in case of iphone 6s plus) of 414(width) x 736(height) size. On that view suppose you created subview.

Now if you want subview size exacly half of superview size, then just drag two constraints from subview to superview. (i.e. Equal Width and Equal Height)

See this Image

Obviously now you will get an error. just like I'm getting. (See below Image)

Now click on both of the constraints one by one, and use multiplier as 0.5. Then use above straight line equation. Here 0.5 means you want width of subview = superviewWidth / 2.0 i.e. 207 px.

In other words you can provide multiplier as 207:414 also.

Y i.e. subviewWidth = ((M i.e. 0.5) * (x i.e. 414 i.e. superviewWidth)) + (Constant i.e. Zero)

Finally you get subviewWidth = 207 px

Similarly do for height of subview. Provide multiplier 0.5 or 368:736.

When done all things, don't forget to click on subview and update frames.

This way constants and multiplier will works.

Answer 2

In my example multiplier is 1:2 = 0.5

height red view is 0.5 times greater than the superview

Answer 3

When it comes to the multiplier it depends on what constraints you are dealing with. You have the views leading constraint connected to the superview leading margin. When the constant is 0 that gives you an 8 points gap. When you change the multiplier you will be effecting that gap. That's why when you do 2:1 you see it go to the right 8 points. Essentially multiplying the original 8 point gap by 2. If you do 1:2 it will go from 8 points to 4 points, essentially dividing the original 8 point margin by 2.

Now when you look at Adrians example, he only multiplied it by 1:2 so how did that make it half of the entire screen? That's because he did that on the height constraint. The view was originally the full size of the superview, but when he multiplied it by 1:2, he indicated that he wanted it to be 1/2 of its original height. Giving you that end result.

So the important thing to understand is that multiplier may seem to act different depending on the situation but that's because it depends on what constraints you are dealing with.

here is a good answer that goes into this more: Understanding multiplier in auto layout to use relative positioning

the link details how if you wanted to make the leading edge 10% and trailing edge 90% you would need to set both constraints in relation to the trailing edge.

Multiplying the trailing constraint by 0.9 and the leading constraints by 0.1.

In regards to your question about the equally separated views, you should use a stack view. They were made for situations like this so you didn't have to deal with all the constraints. You just need to set constraints for the stack view and configure it accordingly.

Answer 4

Multiplier is there for creating Proportional Constraint. Auto Layout calculates the first item’s attribute to be the product of the second item’s attribute and this multiplier. Any value other than 1 creates a proportional constraint.

In your case, 6:1 means multiplier is 6/1 = 6. Which means

view.leading  = Superview.leadingMargin*6

replace : with / - you will understand what it means.