A proportional approach for creating Auto Layout


(John) #1

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.

(BJ Homer) #2

The layout and resizing of views is handled by the UIKit and AppKit frameworks, which are not part of the Swift project. (You can call them from Swift, but they are not part of Swift itself.)

However, you may be interested to know that the functionality you’ve described is already supported in UIKit by turning off Auto Layout and using the autoresizingMask property. Specifically, the behavior you’ve described in the horizontal axis corresponds to the following code:

view.autoresizingMask = [.flexibleLeftMargin, .flexibleWidth, .flexibleRightMargin]

Similar options are available for specifying autoresizing in the vertical axis.

(Jon Shier) #3

Yeah, unfortunately this isn't something we can evolve here. However, a layout library that allows us to design layouts proportionally (already somewhat possible) and control things like font sizes at the same time would be great.

(John) #4

Thank you for this information.

Are there similar development forums for the UIKit and AppKit frameworks? And could you give a link where it can see more about autoresizingMask property?

(John) #5

Could you explain where in Xcode it can be turning off Auto Layout?

(BJ Homer) #6

Open a storyboard/xib > File inspector > uncheck “Use Auto Layout”

(Svein Halvor Halvorsen) #7

Not exactly similar, but the Apple Developer Forums is a place to discuss Apple technologies and frameworks with developers and Apple engineers. However, they don't have an open evolution process for their APIs similar to what they have for Swift itself.

(John) #8

Thanks so much. And how to use the autoresizingMask property? Do I have to create visual layout elements programmatically?

(Jon Shier) #9

I suggest you read Apple’s layout documentation.

(John) #10

Could you suggest which section in the documentation about this tells. Because I looked through several sections, but I can not find the one that is needed.


This topic would be better served over on the Developer Forums, but a couple of general comments:

  1. Layout constraints already have a "multiplier" property which can be used to constrain dimensions proportionally. (https://developer.apple.com/documentation/uikit/nslayoutconstraint) It may be more limited than the proportionality being proposed here, but it exists.

  2. The idea that a UI layout should uniformly scale according to the screen size is an argument you can make, but it's not obviously a good idea. (Scaling of content, such as web pages or word processor pages is a different matter, of course.) In the graphic in the OP, it's not clear why it's a good idea for the title element to be in a larger point size on a larger screen, or why it should have more white space above it. (If it's to make it easier to read, then by definition there's something wrong with the layout on smaller screens.)

  3. Graphical design proportionality (if I may call it that) tends to fall down in the most important use-case for auto-layout: localization. The point of auto-layout is that it abstracts relationships away from the representation in any given language. That means it deliberately sacrifices some levels of control, in order to ensure that it describes a language-neutral layout.

The design principle that Apple adopted is that UIs should gracefully adapt to the space available, not that they should proportionately scale to the space available. If you want to see what a UI looks like when scaled up proportionally, you can run an iPhone-only app on an iPad in compatibility mode. The general consensus is that this looks awful.

(John) #12

Thank you for the interesting comments.