Need help to set autolayout

Question

Am new to iOS & am facing it very difficult to set autolayout. Watched many videos to learn, but all of them giving solution to a specific problem. No video covers all base rules to set an UI object into it's place & with proper flow.

I came from Corona Background & used to set UI programatically very well. Am thinking here same way, but I think apple made it so difficult or people are not able to explain me properly.

Please see 2 images attached in this question & tell me rules to apply to achieve this UI. I request you people to please explain in the general manner so that my other screen can be completed using same rules.

Image 1: https://i.sstatic.net/MPE47.png

Image 2: https://i.sstatic.net/qEiCm.jpg

Answer 1

A really helpful guideline is

• Every element should be able to figure out its position (x and y) and size (width and height).
• Ensure that every element only has one way to figure out its position and size.
• Remember that the autolayout of all the elements can influence each other.

The most used layout constraints are:

• Top The space between the top of the view to another view.
• Trailing The space between the right edge of the view to another view.
• Leading The space between the left edge of the view to another
• Bottom The space between the bottom edge of the view and another view
• Width Assign a fix width to a view (Note that it can also be a percentage - aspect ratio)
• Height Assign a fix width to a view (Can also be a percentage)
• Center Horizontally Always align the view relative to the horizontal center of another view
• Center Vertically Always align the view relative the the vertical center of another view

For example in your second image, say the yellow bar is a UIView called titleView.

• Set the position of titleView by setting the top layout constraint to the container view. y position is set.
• Set the leading constraint to the container view. x position is set.
• Set the trailing constraint to the container view. The view's width will now stretch with the screen size. Thus width can now be determined.
• Set height to 50. Height is set.
• Now... If you also set the width of this view, it will cause the layoutConstraints to break, because you have redefined the width constraint. Some of the constraints will then be ignored.

Another example of how layoutConstraints might influence each other. Lets look at determining the y positions of the second image.

• Say titleView has a top constraint to the container + height of 50.
• currentCampaignView has a top constraint to the bottom of titleView. (Use vertical spacing) + equal height to titleView. (y + height can be calculated)
• the 5 buttons have equal heights. Top buttons have Top space to Bottom of currentCampaignView. Centre buttons have Top space to bottom of top buttons. Bottom button have Top space to bottom of centre buttons.
• startCampaignView has equal height to currentCampaignView. Top constraint to bottom of bottom button and Bottom constraint to container view.

Note that because views and buttons have equal heights, all are considered when determining the height. Thus it is very important that they are all interlinked and that the entire height that can be used is specified. In this case it is specified by the first element titleView that has a Top Constraint to the Container view (of which the height should be known) and the last element, startCampaignView, that has a Bottom constraint to the Container view. Because all the views in between are linked on y position and height, the view can work out what each view's height and y position should be.

One more example. (Your first image)

• topLeftButton Set the top constraint to Superview. (y), Set the leading constraint to Superview (x), Set height = 100 (height), Set equal width to topRightButton (Note that we do not quite have the width yet, because the width of topRightButton can not be determined)
• topRightButton Set the top constraint to Superview. (y), leading constraint to topLeftButton (will be used for x), Set trailing constraint to superview. Now the width of both buttons can be determined, because we have an external startX + endX and we know the two buttons touches each other and are equal widths. Thus the available space will be split to get the width of the two buttons.