How to achieve this layout with auto layout ?

Question

I m trying to create attached layout, I have added a superview and four subviews each view is aligned to one of the sides, to achieve the + sign in the middle . Constraints I have added are: aspect ration to each subview and leading trailing margins, along with this also have added a width constraints to left bottom view. But obviously this isn't working on smaller screen and everything gets messed up, not sure what exact constraints should i add so that I get the desired result on variable screen sizes.

Answer 1

1. create a superview with required aspect ration.
2. Add four subviews and make all equal width and equal height.
3. Pin each superview like "top, left" "top, right" "bottom, left" ""bottom, right""
4. Give one sub view with ratio according to superview width like if u want 10 px padding horizontally then give 320:155
5. And Height of one view according to their width.

Find the sample code made for this. https://github.com/iTamilan/AutoLayoutPlus

Answer 2

You should use proportional height and width for the views, for eg:

For the Top Left view align Top Left view's top to top of the superview and similarly do this for leading. And now make width proportional to half the width of the super view minus half of the separation between the two views.

In short: Top left view's leading = superview's leading

        Top left view's top = superview's top
        Top left view's width = superview's width/2 - separation/2
        Top left view's height = superview's height/2 - separation/2

Similarly do this for the rest of the views and you will be good to go, and your views will be fine on every device