CODEWITHSUNDEEP
swiftresizeuilabel
David
David

Reputation: 447

UILabel splitting in the middle of words (or how to get proper word wrapping)

I'm trying to fit some text into a fixed-width label (actually the width depends on the screen size, but cannot change within the app), and expect UIKit to cleverly use a combination of font resizing and word-wrapping to get the proper result. However, it doesn't seem to work that way. Considering a UILabel with the following constraints:

and the following code: 

    label.font = label.font.withSize(100)
    label.adjustsFontSizeToFitWidth = true
    label.lineBreakMode = .byClipping
    label.numberOfLines = 0
    label.text = "Shooter team"

I would be hoping that it would resize the text and make it fit into two lines: "Shooter" and "team" (or, since the text could be anything, split it properly into words). However, when I set label.lineBreakMode to .byWordWrapping, it doesn't resize the text at all and so only one big letter is displayed (note: I'm using a big font size for it to resize because I can't know in advance how big the text is going to be, since the size depends on the screen size). Any other value for .lineBreakMode results in the text being resized but split into "Shoote" and "r team", which looks dumb. Changing autoshrink to e.g. Minimum font size = 8 doesn't seem to have any effect. See screenshot below.

Any suggestion of how I can get the proper splitting/resizing? I may have used the wrong terms for my searches but I haven't found any answer :-|

(Note: there will be a different question about how I can get the border of the encompassing view to be a nice circle prior to the view being displayed :-| )

Screenshot on iPhone 8+ simulator

Upvotes: 4

Views: 2149

Answers (2)

David
David

Reputation: 447

For lack of a better solution I've written the following function that empirically tries to find a font size that doesn't split a word in the middle. It's hackish but at least it works... Comments, suggestions or any better solution welcome! 

func findFittingFont(for label: String) -> UIFont {
    // note: the 'split' function is a personal addition that splits a string on a regex
    // in this case, split between a non-word char and a word char
    let words = label.split(pattern: "(?<=\\W)(?=\\w)")
    var font = myLabel.font!
    // the width we don't want to overflow
    let maxWidth = myLabel.frame.width
    var fontSize = myLabel.frame.height
    var tooBig: Bool
    repeat {
        tooBig = false
        font = font.withSize(fontSize)
        // check for each word whether the rendered width is larger than the max width
        for word in words {
            // calculate the rendered width with the current font
            let width = (word as NSString).size(withAttributes: [.font: font]).width
            if width > maxWidth {
                tooBig = true
                // decrease the size by a factor
                fontSize *= 0.9
                break
            }
        }
        // go on as long as there's an overflowing word
    }
    while tooBig
    return font
}

Upvotes: 1

ctrl freak
ctrl freak

Reputation: 12405

First, to take advantage of adjustsFontSizeToFitWidth, you must also give it a scale factor (the smallest size you're willing to let the label shrink to). So if, for example, your label's font is sized at 30, you could let it shrink down to 24:

someLabel.font = UIFont(name: "someFont", size: 30)
someLabel.adjustsFontSizeToFitWidth = true
someLabel.minimumScaleFactor = (24/30)

Second, you may want to consider using an attributed title for your label to take advantage of paragraph styling. Paragraph styling lets you play with hyphenation rules:

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.hyphenationFactor = 1.0

let attributedTitle = NSAttributedString(string: "Shooter team", attributes: [NSAttributedString.Key.foregroundColor: UIColor.red, NSAttributedString.Key.paragraphStyle: paragraphStyle])

someLabel.attributedText = attributedTitle

Upvotes: 2

Related Questions