Proportional layout for iPhones (from 5 to 6 Plus) with Size Classes

2
votes

I have passed through a number of tutorials about Size Classes but still I cannot figure out one thing.

iPhone 5, iPhone 6 and iPhone 6 Plus have absolutely the same screen aspect ratios, so I want them to use the same content layout. By saying the same I mean proportional to width and height of the screen.

But! I cannot find a way to make it proportional for all iPhones!

There are just a few constraints that truly support proportions: "Aspect Ratio", "Same Width" + "Multiplier", "Same Height" + "Multiplier"

Constrains, such as Leading Edges, Horizontal Center In Container, all Pin constraints operate with absolute values in logical points, and all iPhones' screens have different sizes in logical points; thereby I cannot achieve the same picture on all iPhones.

Update

I'm adding an image to explain what I want to achieve:

enter image description here

3
iosxcodeinterface-buildersize-classes
if you don't use width constraints with equals relation and high priority you shouldnt have a problem. - Jkmn
Let's say I need to place a view with Top space to container equal to 10 for iPhone 5. For iPhone 6 Plus this space should be proportionally bigger, because the height is bigger (in logical points) - nalexn
I've defined a proportional constraint by specifying multiplier on vertical spacing, see this image: i.imgur.com/7fZTNey.png and let me know if that's what you mean - Amir Rezvani
Maybe you can change the constraints between compact width / any height and compact width / regular height size classes to get a similar result but what you want to achieve is not the default behaviour. - Jkmn
Multiplier won't take effect with constrain equal to zero, however for non-zero values it could make sense, but in this case I would need to specify different Multipliers for iPhone 5, 6 and 6 Plus. And I doubt that it's even possible with Size Classes - nalexn

3 Answers

2
votes

If you want to make such poor use of bigger screen, you could simply not include launch file or launch images for 4.7" and 5.5" devices and they will just use a scaled-up 4" layout.

But please don't do any of that. The screens might be the same aspect ratio, but they are not the same size and treating them that way makes for a bad user experience.

1
votes

I had a similar problem and solved it by testing the image against the screen height (or width) eg:

//iphone 5
if UIScreen.main.bounds.size.height == 568.0 {
// your code here
}

iphone screen heights are as follows:

iphone 5 = 568.0

iPhone 6/6s/7 = 667.0

iphone 6/7 plus = 736.0

-1
votes

Check this Sample Project i have made for you.

Suppose you have a button, then follow the steps i have mentioned below to make proportional height, width and position of the Button to the parent View.

  1. Give your Button Aspect ratio.
  2. Give width equal to the parent View's width.
  3. Add Constraint Center Horizontally in container and Center Vertically in container.
  4. Select Your Button and then go to size inspector and set the multiplier for the width (like 0.3 or 0.4 etc).
  5. Then set the multiplier for "align center X to.." (if you want your button to be left of center then set multiplier below 1 like 0.8, 0.7,0.5 etc And if you want your button to be in the right of the center then set the multiplier value bigger than 1 like 1.2 etc).
  6. Set the multiplier value for "Align center y to.." as like in Step

Its all done.. Just run and check.

Hope this will help you.