Intrinsic Content Size

Introduction#

Intrinsic content size is a fundamental concept in UI design. It determines the natural size of an element based on its contents and properties. Understanding intrinsic content size is important for creating responsive and aesthetically pleasing user interfaces. We discuss intrinsic content size's role in creating adaptive layouts using Auto Layout in this post.

The intrinsic content size of an element is the size that the element would have based on its contents and other properties. The system determines size, taking into account factors such as text font and size, image size, and other layout properties. For example, consider these common elements and the properties used to size them:

• Label: the size of the text it contains and the font used
• Button: the size of the text on the button and the margins around the text
• Image view: the size of the image it contains

When using content size reference points to define constraints, user interfaces adapt to the content of elements. That is, they adjust their layout automatically as the content changes.

Intrinsic Content Size in Swift: Overriding and Fine-Tuning#

Intrinsic content size can be overridden in Swift, using the contentHuggingpriority and contentcompressionpriority properties of a view. These properties allow you to specify the priority at which the system should respect the intrinsic content size of the view relative to other constraints.

For example, you can set a higher priority on the width of a label, while keeping the priority of its height low, to ensure that the width of the label is always respected, while its height can adjust based on its intrinsic content size:

myLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)
myLabel.setContentCompressionResistancePriority(.defaultLow, for: .vertical)

Anchors#

Anchors can set constraints on the position or size of elements. These constraints can override the intrinsic content size of an element in layout frameworks like Auto Layout or Flex. For example, anchors can set a fixed width or height for a text field, even if the intrinsic content size would be different based on the text content:

myLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true

Keep in mind that when you override the intrinsic content size of a view, it can lead to unexpected layout issues if not done carefully. It is always best to first try to achieve the desired layout using the intrinsic content size of the views, and then use the contenthuggingpriority and contentcompressionpriority properties to fine-tune the layout as needed.

Summary#

In summary, intrinsic content size allows developers to create interfaces that adjust to the content. While it can be used as a reference point for defining constraints in Auto Layout, intrinsic content size can also be overridden in Swift using anchors to set constraints on the position or size of elements or by overriding content properties. This allows for more precise control over the layout of the user interface.