How to obtain an approximately square multiline UILabel using Autolayout

I'm putting a multiline UILabel into a popup. The text has a variable length. What I'd really like to do is get a size that is approximately square—so that when displayed it has a nice appearance.

If I create a constraint that sets the label width to equal the height, I get a one line label with a matching height.

There is a (IMHO a terrible) solution: get the width of the one line label, then in a loop set a width constraint to an ever decreasing a fraction of the original width, layout, then stop when the label bound's is more or less what's desired.

Surely there is a better solution.

I don't think there is any way to do this without looping through sizes.

I can't quite work out what you're doing in the code in your answer -- couldn't get it to produce the expected results. However...

First, instead of setting constraints and forcing auto-layout passes, we can take advantage of systemLayoutSizeFitting (Apple Docs). For example:

	let v = UILabel()
	v.numberOfLines = 0
	v.font = .systemFont(ofSize: 16.0, weight: .regular)
	
	// set the label's text
	v.text = "An Example String: The quick red fox jumps over the lazy brown dog."
	
	// get the widest size
	let sz = v.systemLayoutSizeFitting(.init(width: .greatestFiniteMagnitude, height: 1.0))

	print("Size:", sz)
	
	// prints "Size: (497.0, 19.333333333333332)"

That gives us the width and height of the string as a single line. Well, not really... if the string has embedded newline characters:

"An Example String:\n\nThe quick red fox jumps over the lazy brown dog."

Its "native" layout will be:

An Example String:

The quick red fox jumps over the lazy brown dog.

So that same line of code:

	let sz = v.systemLayoutSizeFitting(.init(width: .greatestFiniteMagnitude, height: 1.0))

    // prints "Size: (355.6666666666667, 57.333333333333336)"

Which is what we want.

So, let's change the width to one-half of the non-constrained width (we'll remove the newline chars):

	v.text = "An Example String: The quick red fox jumps over the lazy brown dog."
	
	var sz = v.systemLayoutSizeFitting(.init(width: .greatestFiniteMagnitude, height: 1.0))
	print("Size:", sz)
	
	sz = v.systemLayoutSizeFitting(.init(width: sz.width * 0.5, height: 1.0))
	print("Size:", sz)

	// prints "Size: (497.0, 19.333333333333332)"
	// prints "Size: (244.66666666666666, 57.333333333333336)"

Now, a ratio can be expressed as a decimal value with width / height.

For example, 5:3 is 5.0 / 3.0 = 1.666...

With the above two resulting sizes, we get:

Size: (497.0, 19.333333333333332)
Ratio: 497.0 / 19.333 = 25.70689655172414
AKA:   5.0 : 0.195

Size: (244.66666666666666, 57.333333333333336)
Ratio: 244.666 / 57.333 = 4.267441860465116
AKA:   5.0 : 1.172

If we want to find the "optimal" dimensions for a given aspect ratio, we can loop through, dividing the width in half each time, and compare the result:

	// we want a 5:3 result
	let targetWidth: CGFloat = 5.0
	let targetHeight: CGFloat = 3.0
	let targetRatio: CGFloat = targetWidth / targetHeight
	
	print("Target Ratio:", targetRatio)
	print("AKA:         ", String(format: "%0.1f : %0.3f", targetWidth, targetHeight))

	var sz = v.systemLayoutSizeFitting(.init(width: .greatestFiniteMagnitude, height: 1.0))

	while (sz.width / sz.height) > targetRatio {

		print()
		print("New Size:", sz)
		print("New Ratio:", sz.width / sz.height)
		print("AKA:      ", String(format: "%0.1f : %0.3f", targetWidth, sz.height / (sz.width / targetWidth)))

		// cut the Width in half
		// get the new Size contstrained to Width
		sz = v.systemLayoutSizeFitting(.init(width: sz.width * 0.5, height: .greatestFiniteMagnitude))
		
	}

	print()
	print("We now have a smaller ratio than targetRatio")
	print("New Size:", sz)
	print("New Ratio:", sz.width / sz.height)
	print("AKA:      ", String(format: "%0.1f : %0.3f", targetWidth, sz.height / (sz.width / targetWidth)))

and the console output will be:

Target Ratio: 1.6666666666666667
AKA:          5.0 : 3.000

New Size: (497.0, 19.333333333333332)
New Ratio: 25.70689655172414
AKA:       5.0 : 0.195

New Size: (244.66666666666666, 57.333333333333336)
New Ratio: 4.267441860465116
AKA:       5.0 : 1.172

We now have a smaller ratio than targetRatio
New Size: (115.0, 95.66666666666667)
New Ratio: 1.2020905923344947
AKA:       5.0 : 4.159

The visualization of that looks like this:

The final ratio of 5.0 : 4.159 isn't very close to 5 : 3 though, and there's a big gap between that and the previous 5.0 : 1.172 ratio... and we can get much closer with this size:

We could simply "brute force" it, adding another loop increasing the width by 1.0 each time, until we get closer to the target ratio. But, that would be inefficient... and potentially a lot of loops.

So one approach would be to evaluate the size/ratio changes using effectively a binary search pattern, increasing or decreasing the width by one-half of the previous gap, until we find our "optimal" size.

Here's an example function:

func sizeForOptimalDimension(label: UILabel, targetWidth: CGFloat, targetHeight: CGFloat) -> (CGSize, CGSize)? {
	
	guard let str = label.text, !str.isEmpty else { return nil }
	
	let targetRatio: CGFloat = targetWidth / targetHeight
	
	var curWidth: CGFloat = 0
	var curSize: CGSize = .zero
	var lastSize: CGSize = .zero
	var prevDiff: CGFloat = 0
	var wInc: CGFloat = 0
	
	// create a new label for calculations
	let v = UILabel()
	v.numberOfLines = 0
	v.font = label.font
	
	// set the label's text
	v.text = str
	
	// get the widest size (single-line height)
	curSize = v.systemLayoutSizeFitting(.init(width: .greatestFiniteMagnitude, height: font.lineHeight + 1.0))
	
	curWidth = curSize.width
	
	// if currentRatio is less than targetRatio to begin with,
	// for example, a string with embedded newlines
	// such as: ""One\nTwo\nThree"
	//	-------
	//	One
	//	Two
	//	Three
	//	Four
	//	Five
	//	-------
	// we can't do anything to it (and we'd get an infinite loop)
	if (curSize.width / curSize.height) < targetRatio {
		lastSize = curSize
	} else {
		
		prevDiff = curWidth
		
		// while the calculated Ratio is Greater-Than the targetRatio
		while (curSize.width / curSize.height) > targetRatio {
			
			// cut the Width in half
			curWidth *= 0.5
			// get the new Size contstrained to Width
			curSize = v.systemLayoutSizeFitting(.init(width: curWidth, height: .greatestFiniteMagnitude))
			
			prevDiff -= curWidth
			
		}
		
		// we now have a smaller ratio than targetRatio
		lastSize = curSize
		
		curWidth = curSize.width
		
		// we'll start incrementing by one-half of the last difference
		wInc = floor(prevDiff * 0.5)
		
		// this should always be true
		//	but sanity check to avoid an infinite loop
		if (curSize.width / curSize.height) < targetRatio {
			
			// while the calculated Ratio is Less-Than the targetRatio
			while (curSize.width / curSize.height) < targetRatio {
				
				// save the current size
				lastSize = curSize
				
				// increment Width
				curWidth += wInc
				
				// get the new Size contstrained to Width
				curSize = v.systemLayoutSizeFitting(.init(width: curWidth, height: .greatestFiniteMagnitude))
				
				// if the new ratio is again Greater than the targetRatio
				//	AND the increment is Greater than 1
				if (curSize.width / curSize.height) > targetRatio && wInc > 1.0 {
					//	reset the current width
					//	reset the current size
					//	cut the increment in half
					curWidth -= wInc
					curSize = lastSize
					wInc = floor(wInc * 0.5)
				}
				
			}
			
		}
		
	}
	
	return (lastSize, curSize)
	
}

You'll notice that function returns two sizes -- the closest size smaller and the closest size larger than the target ratio. This will be most noticeable with shorter strings. For example:

Neither resulting ratio -- 5.0:5.059 or 5.0:1.917 -- is particularly close to 5.0:3.0. So, depending on your overall layout goal, you could choose "closest to target ratio" or "prefer wider" for example.

Here is a complete view controller class to try out:

class ViewController: UIViewController {
// target ratio
let targetWidth: CGFloat = 5.0
let targetHeight: CGFloat = 3.0
let font: UIFont = .systemFont(ofSize: 16.0, weight: .regular)
let labelA: UILabel = UILabel()
let labelB: UILabel = UILabel()
let labelC: UILabel = UILabel()
var labelAWidth: NSLayoutConstraint!
var labelBWidth: NSLayoutConstraint!
var labelCWidth: NSLayoutConstraint!
let infoA: UILabel = UILabel()
let infoB: UILabel = UILabel()
let infoC: UILabel = UILabel()
var samples: [String] = [
"An Example String: The quick red fox jumps over the lazy brown dog.",
"Short string to use in testing.",
"UILabel: A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.",
"UIButton: Displays a plain styled button that can have a title, subtitle, image, and other appearance properties.",
"UIViewController: Provides view-management functionality for toolbars, navigation bars, and application views. The UIViewController class also supports modal views and rotating views when device orientation changes.",
"Linefeeds:\n\nNote that this also works with strings that contain embedded linefeed characters.",
// this will break UICollectionViewFlowLayoutInvalidationContext onto multiple lines
"But, if we have a very long word, such as UICollectionViewFlowLayoutInvalidationContext, word-wrapping is an issue.",
// this will be tall and very narrow, so we can't do anything with it
"And\nwe\ncannot\ndo\nanything\nwith\nthis.",
]
override func viewDidLoad() {
super.viewDidLoad()
[infoA, infoB, infoC].forEach { v in
v.numberOfLines = 0
v.textAlignment = .center
v.font = .systemFont(ofSize: 14.0, weight: .light)
v.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(v)
}
[labelA, labelB, labelC].forEach { v in
v.numberOfLines = 0
v.font = font
v.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(v)
}
labelA.backgroundColor = .cyan
labelB.backgroundColor = .green
labelC.backgroundColor = .yellow
// these will be set later
labelAWidth = labelA.widthAnchor.constraint(equalToConstant: 100.0)
labelBWidth = labelB.widthAnchor.constraint(equalToConstant: 100.0)
labelCWidth = labelC.widthAnchor.constraint(equalToConstant: 100.0)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
infoA.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
infoA.centerXAnchor.constraint(equalTo: g.centerXAnchor),
labelA.topAnchor.constraint(equalTo: infoA.bottomAnchor, constant: 2.0),
labelA.centerXAnchor.constraint(equalTo: g.centerXAnchor),
infoB.topAnchor.constraint(equalTo: labelA.bottomAnchor, constant: 16.0),
infoB.centerXAnchor.constraint(equalTo: g.centerXAnchor),
labelB.topAnchor.constraint(equalTo: infoB.bottomAnchor, constant: 2.0),
labelB.centerXAnchor.constraint(equalTo: g.centerXAnchor),
infoC.topAnchor.constraint(equalTo: labelB.bottomAnchor, constant: 16.0),
infoC.centerXAnchor.constraint(equalTo: g.centerXAnchor),
labelC.topAnchor.constraint(equalTo: infoC.bottomAnchor, constant: 2.0),
labelC.centerXAnchor.constraint(equalTo: g.centerXAnchor),
labelAWidth, labelBWidth, labelCWidth,
])
nextString()
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
nextString()
}
func nextString() {
// cycle to the next sample string
let str = samples.removeFirst()
samples.append(str)
[labelA, labelB, labelC].forEach { v in
v.text = str
}
updateLabels()
}
func updateLabels() {
var lastSize: CGSize = .zero
var curSize: CGSize = .zero
(lastSize, curSize) = sizeForOptimalDimension(label: labelA, targetWidth: targetWidth, targetHeight: targetHeight) ?? (.zero, .zero)
// get the ratios of the last smaller and last larger calculated sizes
let lastRatio: CGFloat = lastSize.width / lastSize.height
let curRatio: CGFloat = curSize.width / curSize.height
let targetRatio: CGFloat = targetWidth / targetHeight
let lastDiff: CGFloat = abs(targetRatio - lastRatio)
let curDiff: CGFloat = abs(targetRatio - curRatio)
// which new ratio is closest to targetRatio?
let finalSize: CGSize = curDiff < lastDiff ? curSize : lastSize
var w: CGFloat = 0
var h: CGFloat = 0
var r: CGFloat = 0
w = lastSize.width
h = lastSize.height
r = h / (w / targetWidth)
let lastR: String = String(format: "%0.1f:%0.3f", targetWidth, r)
w = curSize.width
h = curSize.height
r = h / (w / targetWidth)
let curR: String = String(format: "%0.1f:%0.3f", targetWidth, r)
w = finalSize.width
h = finalSize.height
r = h / (w / targetWidth)
let finalR: String = String(format: "%0.1f:%0.3f", targetWidth, r)
// update the width constraints
labelAWidth.constant = lastSize.width
labelBWidth.constant = curSize.width
labelCWidth.constant = finalSize.width
let infoStrings: [String] = [
String(format: "%0.3f x %0.3f = Ratio \(lastR)", lastSize.width, lastSize.height),
String(format: "%0.3f x %0.3f = Ratio \(curR)", curSize.width, curSize.height),
String(format: "Closest to %0.1f x %0.1f\n%0.3f x %0.3f = Ratio \(finalR)", targetWidth, targetHeight, curSize.width, curSize.height),
]
for (s, v) in zip(infoStrings, [infoA, infoB, infoC]) {
v.text = s
}
}
func sizeForOptimalDimension(label: UILabel, targetWidth: CGFloat, targetHeight: CGFloat) -> (CGSize, CGSize)? {
guard let str = label.text, !str.isEmpty else { return nil }
let targetRatio: CGFloat = targetWidth / targetHeight
var curWidth: CGFloat = 0
var curSize: CGSize = .zero
var lastSize: CGSize = .zero
var prevDiff: CGFloat = 0
var wInc: CGFloat = 0
// create a new label for calculations
let v = UILabel()
v.numberOfLines = 0
v.font = label.font
// set the label's text
v.text = str
// get the widest size (single-line height)
curSize = v.systemLayoutSizeFitting(.init(width: .greatestFiniteMagnitude, height: font.lineHeight + 1.0))
curWidth = curSize.width
// if currentRatio is less than targetRatio to begin with,
// for example, a string with embedded newlines
// such as: ""One\nTwo\nThree"
//	-------
//	One
//	Two
//	Three
//	Four
//	Five
//	-------
// we can't do anything to it (and we'd get an infinite loop)
if (curSize.width / curSize.height) < targetRatio {
lastSize = curSize
} else {
prevDiff = curWidth
// while the calculated Ratio is Greater-Than the targetRatio
while (curSize.width / curSize.height) > targetRatio {
// cut the Width in half
curWidth *= 0.5
// get the new Size contstrained to Width
curSize = v.systemLayoutSizeFitting(.init(width: curWidth, height: .greatestFiniteMagnitude))
prevDiff -= curWidth
}
// we now have a smaller ratio than targetRatio
lastSize = curSize
curWidth = curSize.width
// we'll start incrementing by one-half of the last difference
wInc = floor(prevDiff * 0.5)
// this should always be true
//	but sanity check to avoid an infinite loop
if (curSize.width / curSize.height) < targetRatio {
// while the calculated Ratio is Less-Than the targetRatio
while (curSize.width / curSize.height) < targetRatio {
// save the current size
lastSize = curSize
// increment Width
curWidth += wInc
// get the new Size contstrained to Width
curSize = v.systemLayoutSizeFitting(.init(width: curWidth, height: .greatestFiniteMagnitude))
// if the new ratio is again Greater than the targetRatio
//	AND the increment is Greater than 1
if (curSize.width / curSize.height) > targetRatio && wInc > 1.0 {
//	reset the current width
//	reset the current size
//	cut the increment in half
curWidth -= wInc
curSize = lastSize
wInc = floor(wInc * 0.5)
}
}
}
}
return (lastSize, curSize)
}
}

Tapping anywhere will cycle through the sample strings array:

There will be some "edge cases" that can cause issues... One is when you have a very long word - such as UICollectionViewFlowLayoutInvalidationContext - that can result in quirky word-wrapping:

The other case is when the "native" layout cannot be modified to fit the target ratio - such as this string: "And\nwe\ncannot\ndo\nanything\nwith\nthis." which gives us this result:

This is just one possible approach - but maybe it can help you out. Please keep in mind: this is EXAMPLE CODE ONLY!!!. I didn't spend much time on it... the "fit algorithm" could likely be improved, and I'm sure there are some edge cases that would need some additional error handling.

For anyone interested, here is my current solution:

let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "... your text..."
label.textAlignment = .left
label.numberOfLines = 0
label.adjustsFontForContentSizeCategory = false
label.adjustsFontSizeToFitWidth = false
label.lineBreakMode = .byWordWrapping
// to dynamically resize, the label must be installed in some view that has a window property
view.addSubview(label)
constrainToOptimalDimension(label: label)
label.removeFromSuperview()   private func constrainToOptimalDimension(label: UILabel) {
// label now has a width constraint that forces a landscape picture frame orientation
private func constrainToOptimalDimension(label: UILabel) {
label.sizeToFit()
let oneLineWidth = Int(label.bounds.size.width)
var optimalWidth = oneLineWidth
for i in 2..<10 {
label.snp.remakeConstraints { make in
make.width.equalTo(oneLineWidth/i) // .multipliedBy(0.66)
}
label.setNeedsLayout()
label.layoutIfNeeded()
// my goal - a picture frame width of 5 height 3
if label.bounds.size.height * 5 > label.bounds.size.width * 3 {
optimalWidth = oneLineWidth/(i - 1)
break
}
}
// using SnapKit, but you can use any contraint engine you want
label.snp.remakeConstraints { make in
make.width.equalTo(optimalWidth) // .multipliedBy(0.66)
}
label.setNeedsLayout()
return
}