Constraints to center and object between two objects

Question

My design requires that a button is centered between two other objects. One of the objects is in the vertical center of the view (green). The other object is some distance from the bottom edge (green). Now the task is to center the third object (red) between the other two. I am using xcode6's new constraints and my view is in wRegular hRegular mode. This would be easy with code, but I am trying to use the storyboard to accomplish this.

enter image description here

for iOS9 check http://stackoverflow.com/a/33733753/1067147 – WINSergey Jan 08 '16 at 14:19 — WINSergey, Jan 08 '16 at 14:19

Rob · Accepted Answer · 2016-01-31T21:29:22.990

There are a number of approaches:

In iOS 9, the easiest would be to define a vertical UIStackedView with a distribution of "equal spacing" and then addArrangedSubview the three circular subviews
Another option in iOS 9 would be to create two UILayoutGuide (which would represent the two question marks in your image), add them to the shared superview with addLayoutGuide and define them to be the same size as each other. The corresponding VFL might look like:
```
"V:|[greenView1(==100)]-[layoutGuide1]-[redView(==50)]-[layoutGuide2(==layoutGuide1)]-[greenView2(==greenView1)]|"
```
In earlier iOS versions, rather than using UILayoutGuide, you could just create two "space" views (UIView with clear background so they're not visible) then define a constraint such that their heights are identical, and then define vertical spacing constraints between the five views (the three circles and the two spacer views) with a constant of zero.

It might look like:

I've made those "spacer" views visible, to illustrate the idea, but obviously you'd set them to be transparent so you can't see them in the UI.

This is logically equivalent to the UILayoutGuide approach in iOS 9, except that the UIView "spacer" views just carry a little more overhead than a UILayoutGuide. But in iOS versions before 9, this is the common approach to this problem.

You can do it with one spacer. Pin the top of the spacer to the bottom of the upper green circle. Pin the bottom of the spacer to the top of the lower green circle. Pin the vertical center of the red circle to the vertical center of the spacer. — rob mayoff, Sep 17 '14 at 19:20
Agreed. Lots of ways of skinning the cat. I use individual spacers so that it works with more than three circles without dealing with multipliers (though you can now do that, too). — Rob, Sep 17 '14 at 19:22
Both great solutions! I like that in the first solution the red button doesn't need to be a child of the spacer views. Thank you. — Joe Andolina, Sep 18 '14 at 02:50
FYI, for the benefit of future readers, I've updated my answer to reflect two new approaches available in iOS 9, namely `UIStackedView` and `UILayoutGuide`. — Rob, Jan 31 '16 at 21:30

score 1 · Answer 2 · answered Nov 22 '17 at 07:43

I've come up with easiest approach.

Just follow these steps :

add a view between them the two circle
add its trailing and leading space. (in my case zero to superview)
add top and bottom space from the circles.
now put your red circle in the recently added view
make it horizontally and vertically center from Alrignment Menu

Constraints to center and object between two objects

2 Answers2

Linked