Multiline UILabel with automatic width prefers to use 1 line - ios

Question

I want to create a label with dynamic width. I know how to implement it in xib in usual cases.
But in my current case this label has fixed height, 2 max lines and unlimited width.
The problem is width unlimited, so iOS always writes the label in a single line. Is it possible to force fulfill the maximum number of lines first and only then increase the label size?

Answer 1

You can do this by using boundingRect(with:options:attributes:context:)...
Assuming you have string str:
calculate the height that 2 lines would require (use "1\n2", for example)
calculate the width that the str would require, if it was only a single line
divide that width by 2 (we'll call it halfWidth)
calculate the height of str limiting it's width to halfWidth
At this point, we've cut the width exactly in half, and that could (will almost certainly) cut a word in half. That means word-wrapping can result in the height being greater than the two-lines-height.
So we need to:
loop
incrementing halfWidth (by 8-pts seems reasonable)
get the new bounding box height
keep looping until the new height equals the two-lines-height
Here is a quick example. We'll use these strings for the label:
"First example.",
"String with some text.",
"This is a longer string for the two-line label.",
"Depending on the available width, we may run into problems if the text is too long.",
"Our final example string will be much longer than the others. This will demonstrate that, unless we also set a max-width, the calculated width will end up extending the label outside the bounds of our view (assuming we're on an iPhone in Portrait orientation).",
With each tap in the view, we'll calculate a "two-line-width" for the string and update the label's width constraint:
class ViewController: UIViewController {
var theLabel: UILabel = UILabel()
var labelWidthConstraint: NSLayoutConstraint!
let testStrings: [String] = [
"First example.",
"String with some text.",
"This is a longer string for the two-line label.",
"Depending on the available width, we may run into problems if the text is too long.",
"Our final example string will be much longer than the others. This will demonstrate that, unless we also set a max-width, the calculated width will end up extending the label outside the bounds of our view (assuming we're on an iPhone in Portrait orientation).",
]
var idx: Int = 0
override func viewDidLoad() {
super.viewDidLoad()
theLabel.translatesAutoresizingMaskIntoConstraints = false
// max of two lines
theLabel.numberOfLines = 2
// whatever font you want for your label
theLabel.font = .systemFont(ofSize: 16.0)
view.addSubview(theLabel)
let g = view.safeAreaLayoutGuide
// create the width constraint that we'll modify in updateLabel()
// using 100 here, but the initial value doesn't matter...
labelWidthConstraint = theLabel.widthAnchor.constraint(equalToConstant: 100.0)
NSLayoutConstraint.activate([
// let's put the label at 40,40
theLabel.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
theLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
labelWidthConstraint,
])
// so we can see the label frame
theLabel.backgroundColor = .green
// update the label with the first string from our array
let s = testStrings[idx]
updateLabel(s)
let t = UITapGestureRecognizer(target: self, action: #selector(gotTap(_:)))
view.addGestureRecognizer(t)
}
#objc func gotTap(_ g: UITapGestureRecognizer) -> Void {
// change the string and re-caculate the label on each tap
idx += 1
let s = testStrings[idx % testStrings.count]
updateLabel(s)
}
func updateLabel(_ str: String) -> Void {
guard let theLabelFont = theLabel.font else {
// this should never happen, but always a
// good idea to properly unwrap optionals
return
}
// get the calculated width
let calcWidth: CGFloat = calcTwoLineWidth(str, fnt: theLabelFont)
// update the label's width constraint constant
labelWidthConstraint.constant = calcWidth
// update the label's text
theLabel.text = str
}
func calcTwoLineWidth(_ str: String, fnt: UIFont) -> CGFloat {
// get the height of two lines
let twoLineHeight = "1\n2".height(withConstrainedWidth: .greatestFiniteMagnitude, font: fnt)
// get the width of the string as a single line
let oneLineWidth = str.width(withConstrainedHeight: .greatestFiniteMagnitude, font: fnt)
// start with 1/2 of the full width of the string
var halfWidth: CGFloat = ceil(oneLineWidth * 0.5)
// get the height of the string constrained to half width
var newHeight: CGFloat = str.height(withConstrainedWidth: halfWidth, font: fnt)
// the string may still wrap onto a third line, so increase the width
// until we only need two lines
while newHeight > twoLineHeight {
halfWidth += 8
newHeight = str.height(withConstrainedWidth: halfWidth, font: fnt)
}
return halfWidth
}
}
extension String {
func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)
return ceil(boundingBox.height)
}
func width(withConstrainedHeight height: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: .greatestFiniteMagnitude, height: height)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)
return ceil(boundingBox.width)
}
}
And here's the results:
Notice that the final string is too long to fit on two lines within the bounds of our view -- which is, based on your description an comment, your desired goal.
Please note this is Example Code Only.