如何快速计算多行文本的最佳标签宽度

Question

I'd like to create a method to calculate the optimal width of a multi-line label to attach several labels in a horizontal row of a fixed height.

With one line of text there is no problem:

let textAttributes: [String : Any] = [NSFontAttributeName: UIFont.preferredFont(forTextStyle: UIFontTextStyle.title2)]

let maximalWidth: CGFloat = text!.boundingRect(
        with: CGSize(width: CGFloat.greatestFiniteMagnitude, height: height),
        options: [NSStringDrawingOptions.usesLineFragmentOrigin],
        attributes: textAttributes,
        context: nil).size.width

As far as I understood, there is no option to indicate here, that I have several lines. This method works well in other direction when we calculate the height of the text with the fixed width. But I have the opposite goal.

As a variant, I can create a label based on the longest word (to be more precise, based on the widest word, as we can have several words with the same characters count, but different rendered width):

    var sizeToReturn = CGSize()

    let maxWordsCharacterCount = text?.maxWord.characters.count
    let allLongWords: [String] = text!.wordList.filter {$0.characters.count == maxWordsCharacterCount}
    var sizes: [CGFloat] = []
    allLongWords.forEach {sizes.append($0.size(attributes: attributes).width)}
    let minimalWidth = (sizes.max()! + constantElementsWidth)

I used here two String extensions to create words list and find all longest:

extension String {
    var wordList: [String] {
    return Array(Set(components(separatedBy: .punctuationCharacters).joined(separator: "").components(separatedBy: " "))).filter {$0.characters.count > 0}
    }
}

extension String {
    var maxWord: String {
        if let max = self.wordList.max(by: {$1.characters.count > $0.characters.count}) {
        return max
    } else {return ""}
}

}

Not a bad option, but it looks ugly if we have the text that can't be fitted in three lines and that has several short words and one long word at the end. This long word, determined the width, will be just truncated. And more of that it looks not too good with 3 short words like:

• Sell
• the
• car

Well, I have the minimum width, I have the maximum width. Perhaps, I can go from maximum to minimum and catch when the label starts being truncated. So I feel that there can be an elegant solution, but I'm stuck.

Answer 1

Hooray, I've found one of the possible solutions. You can use the code below in the playground:

import UIKit
import PlaygroundSupport

//: Just a view to launch playground timeline preview
let hostView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
hostView.backgroundColor = .lightGray
PlaygroundPage.current.liveView = hostView

// MARK: - Extensions
extension String {
    var wordList: [String] {
        return Array(Set(components(separatedBy: .punctuationCharacters).joined(separator: "").components(separatedBy: " "))).filter {$0.characters.count > 0}
    }
}

extension String {
    var longestWord: String {
        if let max = self.wordList.max(by: {$1.characters.count > $0.characters.count}) {
            return max
        } else {return ""}
    }
}

// MARK: - Mathod

func createLabelWithOptimalLabelWidth (
                    requestedHeight: CGFloat,
              constantElementsWidth: CGFloat,
    acceptableWidthForTextOfOneLine: CGFloat, //When we don't want the text to be shrinked
                               text: String,
                         attributes: [String:Any]
    ) -> UILabel {

    let label = UILabel(frame: .zero)

    label.attributedText = NSAttributedString(string: text, attributes: attributes)

    let maximalLabelWidth = label.intrinsicContentSize.width

    if maximalLabelWidth < acceptableWidthForTextOfOneLine {

        label.frame = CGRect(origin: CGPoint.zero, size: CGSize(width: maximalLabelWidth, height: requestedHeight))
        return label // We can go with this width
    }

    // Minimal width, calculated based on the longest word

    let maxWordsCharacterCount = label.text!.longestWord.characters.count
    let allLongWords: [String] = label.text!.wordList.filter {$0.characters.count == maxWordsCharacterCount}
    var sizes: [CGFloat] = []
    allLongWords.forEach {sizes.append($0.size(attributes: attributes).width)}
    let minimalWidth = (sizes.max()! + constantElementsWidth)


    // Height calculation
    var flexibleWidth = maximalLabelWidth
    var flexibleHeight = CGFloat()

    var optimalWidth = CGFloat()
    var optimalHeight = CGFloat()

    while (flexibleHeight <= requestedHeight && flexibleWidth >= minimalWidth) {

        optimalWidth = flexibleWidth
        optimalHeight = flexibleHeight

        flexibleWidth -= 1

        flexibleHeight = label.attributedText!.boundingRect(
        with: CGSize(width: flexibleWidth, height: CGFloat.greatestFiniteMagnitude),
        options: [NSStringDrawingOptions.usesLineFragmentOrigin],
        context: nil).size.height

        print("Width: \(flexibleWidth)")
        print("Height: \(flexibleHeight)")
        print("_______________________")
    }

    print("Final Width: \(optimalWidth)")
    print("Final Height: \(optimalHeight)")

    label.frame = CGRect(origin: CGPoint.zero, size: CGSize(width: optimalWidth+constantElementsWidth, height: requestedHeight))

    return label
}

// MARK: - Inputs

let text: String? = "Determine the fair price"//nil//"Select the appropriate payment method"//"Finalize the order" //"Sell the car"//"Check the payment method"
let font = UIFont.preferredFont(forTextStyle: UIFontTextStyle.callout)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byWordWrapping
paragraphStyle.allowsDefaultTighteningForTruncation = true


let attributes: [String:Any] = [
    NSFontAttributeName: font,
    NSParagraphStyleAttributeName: paragraphStyle,
    NSBaselineOffsetAttributeName: 0
]

if text != nil {
    let label = createLabelWithOptimalLabelWidth(requestedHeight: 70, constantElementsWidth: 0, acceptableWidthForTextOfOneLine: 120, text: text!, attributes: attributes)

    label.frame.width
    label.frame.height

    label.backgroundColor = .white
    label.lineBreakMode = .byWordWrapping
    label.numberOfLines = 3

    hostView.addSubview(label)
}