creating complex layout in storyboard

495 views Asked by At

I'm trying to create a complex user interface in storyboards. All I get is a bunch of errors and I do not know exactly how to resolve them, because suggested constraints are not appropriate. This is link to my project: link. Final layout should look similar to that in an image:

enter image description here

Short version: layout should look like the one in the picture on any screen size. Image View and coloured view should both become bigger on bigger screens. All image view should be the same size.

Long version: All image view should be the same size.

The big white view will should always take the upper half of screen. I know how to do that. The red view should appear exactly in center of its superview,the big white view.

Two blue view should have exactly the same width as the red one. Width of those 3 view should match the height of the 2 green views. Meaning, the taller the screen is(taller screen means higher green views), the wider the space between ImageViews(those who has Image word in it, that basically means wider blue and red views).

The white views at the left and right fill the space form left image view to left margin and right image view to right margin.

All views are pined with 0 to its first neighbour. Blue and red are pined horizontally, green views are pined vertically. Also the bottom and upper image view are pined to bottom and top of superview(big white view) respectively.

I do not want to set the height and width constraint on image views, because they should be detremined at runtime.

I would really appreciate if anyone here could help me out!

2

There are 2 answers

0
Usama On BEST ANSWER

I have uploaded the solution on GithubRepo, you can have a look.

enter image description here

1) "Also the bottom and upper image view are pined to bottom and top of superview(big white view) respectively" this requirement can not be satisfied

2) Spacing on left and right can be decrease/increased by keeping overall requirements satisfied

0
Pedro Góes On

I've struggled with this for years, so I finally decided to create a view to manage all these resizes like a HTML page: ETFlowView.