2

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!

sanjihan
  • 5,592
  • 11
  • 54
  • 119
  • how much portion of the screen should white view cover? – Usama Aug 21 '15 at 10:50
  • In my photo, it covers 1/2. Bottom of white view is pinned to bottom layout guide using constant 0 and multiplier 1:2. – sanjihan Aug 21 '15 at 11:02
  • so it should cover half on every device? – Usama Aug 21 '15 at 11:13
  • yes, exactly. Image views become bigger because white view gets bigger on bigger devices. The 3 vertical views determine the size of others, because they fill the space from bottom to top of that big white view. Not sure if evident from my question- image view are squares. – sanjihan Aug 21 '15 at 11:32
  • "Also the bottom and upper image view are pined to bottom layout guide and top layout guide respectively" aren't they pinned to their superview? – Usama Aug 21 '15 at 16:04
  • My bad, I edited my question. – sanjihan Aug 21 '15 at 16:28

2 Answers2

6

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

Usama
  • 1,945
  • 1
  • 13
  • 20
1

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.

Pedro Góes
  • 722
  • 6
  • 19