CODEWITHSUNDEEP
iosstoryboardautolayout
theDC
theDC

Reputation: 6484

Responsive design Xcode 6 - How to set constraints to make your design responsive?

Let's consider the following example:

enter image description here

These are 3 stripes, each 450 width and 150 height. I would like to make it responsive which basically means that I want them to resize dependently on screen size. I tried three different sets of constraints, I list them below:

1)

a) set leading space and trailing space for each one

b) set top and bottom space for each one

2)

a) set leading space and trailing space for each one

b) set aspect ratio 3:1

set top and bottom spaces except the bottommost one (pinning it to the bottom leads to constraints conflict)

3)

a) set aspect ratio 3:1

b) set top and bottom spaces for each one

I thought that the third option would work because once the vertical spaces are known, it should set the appropriate width to satisfy aspect ratio constraint. However, this didn't work, Xcode decided to resize only only stripe without respect for aspect ratio.

Second option was close but still inappropriate. Without bottom space vertical position of whole set of stripes would vary for each screen size.

First option was totally wrong because without aspect ratio the stripes had various shapes.

Could you support me with either specific or general advice how to deal with such issues? What are the general rules for iOS responsive design. I guess fixing this simple, exemplary problem will tell me much about approach to responsive design.

EDIT: the thing I'd like to achieve is: fixed aspect ratio and fixed spaces between the stripes. Size, trailing & leading spaces, top and bottom spaces should vary on each screen, but should remain in the same ratio on each screen. Basically, this should look nearly the same whatever the size of screen is.

Upvotes: 0

Views: 1924

Answers (1)

Sebastian Flückiger
Sebastian Flückiger

Reputation: 5555

My approach to this would be:

  • Set leading & lagging spacing for the first
  • Set top spacing for the first
  • Set aspect ratio of the first to 3:1
  • Set width & height of all to equal each other (no fixed size!)
  • Set vertical spacing between 1,2 and 2,3
  • Horizontally center all of them

This way the size for the first gets fixed, the others are then dependent on it.

Upvotes: 1

Related Questions