Proportional layout for iPhones (from 5 to 6 Plus)

问题:

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:

回答1:

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.

回答2:

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

回答3:

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.