Cocoa Autolayout: content hugging vs content compression resistance priority
CocoaAutolayoutCocoa Problem Overview
I can't find a clear answer on Apple documentation regarding Cocoa Autolayout about the difference between content hugging and compression resistance.
Can somebody explain their usages and difference ?
Cocoa Solutions
Solution 1 - Cocoa
A quick summary of the concepts:
- Hugging => content does not want to grow
- Compression Resistance => content does not want to shrink
Example:
Say you've got a button like this:
[ Click Me ]
and you've pinned the edges to a larger superview with priority 500.
Then, if Hugging priority > 500 it'll look like this:
[Click Me]
If Hugging priority < 500 it'll look like this:
[ Click Me ]
If the superview now shrinks then, if the Compression Resistance priority > 500, it'll look like this
[Click Me]
Else if Compression Resistance priority < 500, it could look like this:
[Cli..]
If it doesn't work like this then you've probably got some other constraints going on that are messing up your good work!
E.g. you could have it pinned to the superview with priority 1000. Or you could have a width priority. If so, this can be helpful:
Editor > Size to Fit Content
Solution 2 - Cocoa
Take a look at this video tutorial about Autolayout, they explain it carefully
Solution 3 - Cocoa
source: @mokagio
Intrinsic Content Size - Pretty self-explanatory, but views with variable content are aware of how big their content is and describe their content's size through this property. Some obvious examples of views that have intrinsic content sizes are UIImageViews, UILabels, UIButtons.
Content Hugging Priority - The higher this priority is, the more a view resists growing larger than its intrinsic content size.
Content Compression Resistance Priority - The higher this priority is, the more a view resists shrinking smaller than its intrinsic content size.
Check here for more explanation: AUTO LAYOUT MAGIC: CONTENT SIZING PRIORITIES
Solution 4 - Cocoa
Let's say you have a button with the text, "Click Me". What width should that button be?
First, you definitely don't want the button to be smaller than the text. Otherwise, the text would be clipped. This is the horizontal compression resistance priority.
Second, you don't want the button to be bigger than it needs to be. A button that looked like this, [ Click Me ], is obviously too big. You want the button to "hug" its contents without too much padding. This is the horizontal content hugging priority. For a button, it isn't as strong as the horizontal compression resistance priority.
Solution 5 - Cocoa
If view.intrinsicContentSize.width != NSViewNoIntrinsicMetric
, then auto layout creates a special constraint of type NSContentSizeLayoutConstraint
. This constraint acts like two normal constraints:
- a constraint requiring
view.width <= view.intrinsicContentSize.width
with the horizontal hugging priority, and - a constraint requiring
view.width >= view.intrinsicContentSize.width
with the horizontal compression resistance priority.
In Swift, with iOS 9's new layout anchors, you could set up equivalent constraints like this:
let horizontalHugging = view.widthAnchor.constraint(
lessThanOrEqualToConstant: view.intrinsicContentSize.width)
horizontalHugging.priority = view.contentHuggingPriority(for: .horizontal)
let horizontalCompression = view.widthAnchor.constraint(
greaterThanOrEqualToConstant: view.intrinsicContentSize.width)
horizontalCompression.priority = view.contentCompressionResistancePriority(for: .horizontal)
Similarly, if view.intrinsicContentSize.height != NSViewNoIntrinsicMetric
, then auto layout creates an NSContentSizeLayoutConstraint
that acts like two constraints on the view's height. In code, they would look like this:
let verticalHugging = view.heightAnchor.constraint(
lessThanOrEqualToConstant: view.intrinsicContentSize.height)
verticalHugging.priority = view.contentHuggingPriority(for: .vertical)
let verticalCompression = view.heightAnchor.constraint(
greaterThanOrEqualToConstant: view.intrinsicContentSize.height)
verticalCompression.priority = view.contentCompressionResistancePriority(for: .vertical)
You can see these special NSContentSizeLayoutConstraint
instances (if they exist) by printing view.constraints
after layout has run. Example:
label.constraints.forEach { print($0) }
// Output:
<NSContentSizeLayoutConstraint:0x7fd82982af90 H:[UILabel:0x7fd82980e5e0'Hello'(39)] Hug:250 CompressionResistance:750>
<NSContentSizeLayoutConstraint:0x7fd82982b4f0 V:[UILabel:0x7fd82980e5e0'Hello'(21)] Hug:250 CompressionResistance:750>
Solution 6 - Cocoa
Content Hugging and Content Compression Resistence Priorities work for elements which can calculate their size intrinsically depending upon the contents which are coming in.
From Apple docs:
Solution 7 - Cocoa
The Content hugging priority
is like a Rubber band that is placed around a view.
The higher the priority value, the stronger the rubber band and the more it wants to hug to its content size.
The priority value can be imagined like the "strength" of the rubber band
And the Content Compression Resistance
is, how much a view "resists" getting smaller
The View with higher resistance priority value is the one that will resist compression.
Solution 8 - Cocoa
contentCompressionResistancePriority – The view with the lowest value gets truncated when there is not enough space to fit everything’s intrinsicContentSize
contentHuggingPriority – The view with the lowest value gets expanded beyond its intrinsicContentSize
when there is leftover space to fill