在故事板中创建复杂的布局

Question

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:

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!

Answer 1

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

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

Answer 2

多年来我一直在努力解决这个问题，所以我最终决定创建一个视图来管理所有这些调整大小，如HTML页面： ETFlowView 。