Search code examples
iosswift3uilabelnsattributedstringuistackview

How to remove bottom padding of UILabel with attributedText inside UIStackView

I want to remove the bottom padding of a UILabel with attributedText inside a UIStackview.

enter image description here

I found this solution How to remove the extra padding below an one line UILabel. This works with normal text but not with attributed text.

   let textLabel = UILabel()
        textLabel.translatesAutoresizingMaskIntoConstraints = false
        textLabel.text = "What is a chemical property and how can you observe it?"
        textLabel.numberOfLines = 0
        textLabel.lineBreakMode = .byWordWrapping
        textLabel.backgroundColor = .lightGray
        mainStackView.addArrangedSubview(textLabel)

        let textLabel2 = UILabel()
        textLabel2.translatesAutoresizingMaskIntoConstraints = false

        let html = "<html lang=\"en\"><head><meta charset=\"UTF-8\"></head><body><div style=\"font-size:36;\"><p>What is a <em>chemical property</em> and how can you observe it?</p></div></body></html>"

        let data = Data(html.utf8)

        if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil) {

            let a = NSMutableAttributedString.init(attributedString: attributedString)

            let range = (a.string as NSString).range(of: a.string)

            let paragraphStyle = NSMutableParagraphStyle()
            paragraphStyle.alignment = .left
            paragraphStyle.firstLineHeadIndent = 0.0

            let attributes: [NSAttributedString.Key: Any] = [
                .foregroundColor: UIColor.black,
                .paragraphStyle: paragraphStyle
            ]

            a.addAttributes(attributes, range: range)
            textLabel2.attributedText = a
        }
        textLabel2.numberOfLines = 0
        textLabel2.lineBreakMode = .byWordWrapping
        textLabel2.backgroundColor = .yellow

        mainStackView.addArrangedSubview(textLabel2)

        let textLabel3 = UILabel()
        textLabel3.translatesAutoresizingMaskIntoConstraints = false
        textLabel3.text = "What is a chemical property and how can you observe it?"
        textLabel3.numberOfLines = 0
        textLabel3.lineBreakMode = .byWordWrapping
        textLabel3.backgroundColor = .lightGray
        mainStackView.addArrangedSubview(textLabel3)

A working sample project with this code can be found here: https://github.com/Quobject/testUIlabelInStackviewpadding

Solution

  • The "bottom spacing" is not "spacing" ... your converted <p>...</p> html block adds a newline character at the end of the text.

    You can use this extension (found here):

    extension NSMutableAttributedString {

    func trimmedAttributedString() -> NSAttributedString {
        let invertedSet = CharacterSet.whitespacesAndNewlines.inverted
        let startRange = string.rangeOfCharacter(from: invertedSet)
        let endRange = string.rangeOfCharacter(from: invertedSet, options: .backwards)
        guard let startLocation = startRange?.upperBound, let endLocation = endRange?.lowerBound else {
            return NSAttributedString(string: string)
        }
        let location = string.distance(from: string.startIndex, to: startLocation) - 1
        let length = string.distance(from: startLocation, to: endLocation) + 2
        let range = NSRange(location: location, length: length)
        return attributedSubstring(from: range)
    }
}

    and change this line:

    textLabel2.attributedText = a

    to:

    textLabel2.attributedText = a.trimmedAttributedString()

    Result (applying that change to your GitHub repo):

    enter image description here