CODEWITHSUNDEEP
xcodeautolayoutconstraints
fuzzlog
fuzzlog

Reputation: 131

XCode 7.2 -- How to accomplish the layout below using Auto Layout

Trying to accomplish the layout below using Auto Layout and settings constraints.

Desired layout

The layout itself is comprised of four UIViews (top and bottom ones occupying the full width of the screen, the two middle ones side by side each taking half the width).

However, after many tutorials on Auto Layout and Setting constraints, the closest I can get to my desired result is the two images below:

Incorrect layout 1

OR

Incorrect Layout 2

I've played with the constraints of all the individuals views until all orange and red marks/lines disappeared and only blue ones remained, but I cannot get to the desired result.

Any ideas how this can accomplished using Auto Layout and constraints?

Upvotes: 1

Views: 93

Answers (1)

Hima
Hima

Reputation: 1247

  • For this layout you will need 5 UIViews.
  • For the first view (RGB: 233,132,125) you need to set top, trailing and leading constraints and make its height 0.3% of the Superview.
  • For the second view you will need a main view , which can have height of approximately 60 to 80 and it will have vertical spacing from its above view and leading and trailing constraints.
  • Now in this view , you will have its two sub views [RGB :220,250,138 and RGB :152,250,253 ] (You can take UIButtons or UIViews or UILabels, whatever you want).
  • For both of these subviews its height will be equal to its parent view and width will be half of its superview, as well as vertically center in the super view and trailing space for the X-Position.
  • And for the last view (RGB : 204,135,248) you have to bound them with top, bottom, leading and trailing spaces.

I know this theoretical description will confuse you so check out these stuff in the video Here : https://youtu.be/XUh1n7X8ZRY

You can adjust heights as you need for your views.

Upvotes: 2

Related Questions