Proportional layout for iPhones (5 to 6 Plus) with size classes
I've gone through a few tutorials about classroom classes but still can't figure out what it is.
The iPhone 5, iPhone 6, and iPhone 6 Plus all have exactly the same screen aspect ratio, so I want them to use the same content layout. By the same token, I mean proportionality to the width and height of the screen.
But! I can't find a way to make it proportional to all iPhones!
There are only a few restrictions that really support aspect ratios: Aspect Ratio, Same Width + Multiplier, Same Height + Multiplier
Constraints such as Leading Edges, Horizontal Center In Container, all Pin constraints work with absolute values at boolean points, and all iPhones have different sizes at boolean points; thus, I cannot achieve the same picture on all iPhones.
Update
I am adding an image to explain what I want to achieve:
source to share
If you want to make such a poor use of a larger screen, you can simply not include the launcher or image launcher for 4.7 "and 5.5" devices, and they will just use the extended 4 "layout.
But please don't do this. The screens can be the same format, but they are not the same size and their handling makes it a poor user experience.
source to share
I had a similar problem and solved it by testing the image with screen height (or width), for example:
//iphone 5
if UIScreen.main.bounds.size.height == 568.0 {
// your code here
}
The iphone screen height looks like this:
iphone 5 = 568.0
iPhone 6 / 6s / 7 = 667.0
iphone 6/7 plus = 736.0
source to share
Check out this Sample Project I made for you.
Suppose you have a button, then follow the steps mentioned below to make the height, width and position of the button proportional to the parent view.
- Give the aspect ratio of your button.
- Give a width equal to the parent width of the view.
- Add Constraint Center Horizontally in the container and Center Vertically in the container.
- Select your button and then go to the size inspector and set a multiplier for the width (like 0.3 or 0.4, etc.).
- Then set a multiplier for "center X to .." (if you want to stay off center, set a multiplier below 1, like 0.8, 0.7.0.5, etc. And if you want your button to be to the right of center, set the multiplier to a value greater than 1, for example, 1.2, etc.).
- Set a multiplier value for "Align Center y ..." as in step
All this has been done. Just run and check.
Hope this helps you.
source to share