CODEWITHSUNDEEP
iosxcodeuiviewautolayout
Daniel
Daniel

Reputation: 7724

ios placing 3 views inside another view with auto layout

I'll briefly explain the situation: There is a ViewController VC and a View V inside it with the following layout constraints:

like this:

 ____
|    |
|    |      
|____|           
|____| <- V

I wanna place place 3 view inside V, so lets say we divide V in 4 pieces:

 ___________ 
|  |  |  |  |
|  |  |  |  |
|__|__|__|__|

I wanna place my new 3 Views V1, V2 and V3 like this:

 ___________ 
|  |  |  |  |
| [1][2][3] |
|__|__|__|__|

that is, all centered vertically on V middle and the View Vi on (i/4) of V width.

How can I do this in storyboard (without code) ?

Upvotes: 0

Views: 1284

Answers (2)

Pierce
Pierce

Reputation: 3158

Connor's answer would definitely work, another thing you could do is use the NSLayoutConstraint Multipliers. Here are the steps:

1) Create three different UIViews all of equal width. For this example I used UIImageViews but that's irrelevant for this purpose.

2) Set each one to have the same vertical constraint (i.e. 50pts from the bottom, or set each one to be "Vertically Centered In Container"

3) To space them out evenly on the horizontal plane, you could set them each to be "Horizontally Centered In Container".

enter image description here

4) Once each view is horizontally centered in the container, change their multiplier to determine the distance the view's center point on the x-axis is from the superview's center point on the x-axis. If you wanted the three views to be spaced evenly, I would set the multipliers at (0.5, 1.0, 1.5) respectively.

enter image description here

Here's an image that show three views with a width and height of 50:

enter image description here

EDIT - To explain even further:

What's happening here is you're setting the center of the subview on the x-axis to align with center of the superview's x-axis, but when you set the multiplier you're telling it to be set a fraction of that distance. When it's set to 1.0 you're saying you want the subview's centerX to be 0.5 the width of the superview. When you set the multiplier to say 0.5, You're essentially saying you want the centerX of the subview to be 0.5 of 1/2 the width of the superview (1/2 * 1/2 = 1/4) so you're setting the centerX of the subview to 1/4 the width of the superview. Same thing with 1.5 - you're then saying you want the center of the subview to be 3/2 of 1/2 the width of the superview (3/2 * 1/2 = 3/4) so the subview's centerX would be 3/4 the width of the superview.

Upvotes: 2

Connor Neville
Connor Neville

Reputation: 7351

This is a great case for a UIStackView. Configure your container view (V) as:

let myContainer = UIStackView()
myContainer.axis = .horizontal
myContainer.alignment = .center
myContainer.distribution = .equalCentering

The axis tells it to stack subviews horizontally. The alignment gives the alignment for the non-axis; that is, it vertically centers each subview. And an equalCentering distribution will tell the stack view that the space between the centers of each subview should be equal.

Then all you need to do is configure the size of each subview (ie. add a programmatic constraint for width, dividing by the container width), and addArrangedSubview for each subview.

Upvotes: 1

Related Questions