To date, Swift has implemented two approaches to creating layouts.
The first is positioning, when the upper left points are fixed by height and width of the left corner of the rectangle, as well as the width and height of the rectangle itself.
The second approach is called constraints, when the distances from the sides of a rectangle to external objects (a container or other visual objects) are fixed, and the width and height of the rectangle are fixed or not fixed.
But until now the development of application layouts remains a headache in the development especially of complex layouts, which are usually passed on to less experienced developers (such as myself), and that has already become a separate area of good earnings.
In fact, in 99% of the cases we need the visual objects on the layout to vary in proportions to the size of the device's screen. For example, if the screen size increases, it should also increase the size of the visual object, and vice versa.
Consider this third proportional approach in more detail. This is not yet a software implementation of the method. It is only a description of the algorithm that can be developed in the next versions of the Swift language.
Take first a simple example. Imagine that we create a layout in Xcode with the help of UIBuilder for iPhone 8. We have a label that we place at the top of the screen. On the horizontal axis the label has the following parameters:
Align Leading - 152, Width - 71, Align Trailing - 152.
The screen width of the iPhone in portrait dimension is 750px.
Therefore, the proportionality coefficients are:
Align Leading - 152 / 750 = 20.27%.
Width - 71 / 750 = 9.47%.
Align Trailing - 152 / 750 = 20.27%.
Then we assume that we want our visual element to also be proportionally displayed on a large screen, for example, on the 12’’9 iPad Pro.
The screen width of the 12’’9 iPad Pro in portrait dimension is 2048px.
We use the appropriate coefficients for each of the parameters and get the following sizes:
Align Leading - 2048 * 20.27% = 415.
Width - 2048 * 9.47% = 194.
Align Trailing - 2048 * 20.27% = 415.
Similarly, we calculate the vertical parameters of the visual object.
Original vertical label parameters are:
Align Top - 55, Height - 36, Align Bottom - 556.
The screen height of the iPhone in portrait dimension is 1334px.
The proportionality coefficients are:
Align Top - 55 / 1334 = 2.70%.
Height - 36 / 1334 = 4.12%.
Align Bottom - 556 / 1334 = 41.68%.
The screen height of the 12’’9 iPad Pro in portrait dimension is 2732px.
Vertical parameters of the visual object for the 12’’9 iPad Pro are:
Align Top - 2732 * 7.33% = 113.
Height - 2732 * 4.80% = 74.
Align Bottom - 2732 * 74.13% = 1139.
In the same way, you can also recalculate the font size on the label.
The origin font size is 30, the coefficient relative to the height of the iPhone 8 screen is 2.25%, the new size for the 12’’9 iPad Pro is 61.
In result, we get a well-balanced layout for the iPhone 8 screen and for the 12’’9 iPad Pro screen.
The previous approach, based on constraints, fixes these constraints. In the new approach, based on proportions, neither limitations nor the size of visual objects are fixed. It is sufficient to calculate the proportionality coefficient and, on its basis, to set new sizes and new constraints.
Visually, these differences between two approaches look like this.
Left layout for the 12’’9 iPad Pro, built using fixed constraints, on the right is a layout built on the basis of the proportionality algorithm.
It should be noted that with the help of constraints it is also possible to create the same layout as on the right. But this will require much more time and effort than calculating the proportionality coefficients.
In the same way, based on the calculation of proportionality, we can create more complex layouts, for example, with several visual elements, using a Stack View, changing orientation, etc.
In this way, the software implementation of the proportionality calculation algorithm will allow us to create application layouts much easier and faster.