swift - Multiline UILabel：使用 boundingRect() 为标签的特定部分添加自定义下划线

问题描述

我希望能够为多行标签的某些部分/单词添加自定义下划线。

我尝试使用NSAttributedString.Key.underlineStylewith a NSMutableAttributedString，但我无法访问重要参数，例如文本和下划线之间的间距或下划线栏高度。

所以我正在考虑UILabel在预期文本下方添加一个子层。这是我到目前为止所做的：

extension UILabel {

    func underline(word: String, withColor color: UIColor) {
        guard let text = self.text else {
            return
        }
        if let range = text.range(of: word) {
            let start = text.distance(from: text.startIndex, to: range.lowerBound)
            let end = text.distance(from: text.startIndex, to: range.upperBound)
            if let rect = self.boundingRectFor(characterRange: start..<end) {
                let c = CALayer()
                c.frame = CGRect(origin: CGPoint(x: rect.origin.x, y: rect.size.height + (self.font.pointSize / 8)), size: CGSize(width: rect.size.width, height: (self.font.pointSize / 4)))
                c.backgroundColor = color.cgColor
                self.layer.addSublayer(c)
            }
        }
    }

    private func boundingRectFor(characterRange: Range<Int>) -> CGRect? {
        guard let attributedText = attributedText else { return nil }
        let textStorage = NSTextStorage(attributedString: attributedText)
        let layoutManager = NSLayoutManager()
        textStorage.addLayoutManager(layoutManager)
        let textContainer = NSTextContainer(size: intrinsicContentSize)
        textContainer.lineFragmentPadding = 0.0
        layoutManager.addTextContainer(textContainer)
        var glyphRange = NSRange()
        layoutManager.characterRange(forGlyphRange: NSRange(location: characterRange.startIndex, length: characterRange.endIndex - characterRange.startIndex), actualGlyphRange: &glyphRange)
        return layoutManager.boundingRect(forGlyphRange: glyphRange, in: textContainer)
    }

}

boundingRectFor(characterRange)是我发现的一种方法，它有望返回包含作为参数传递的范围中的子字符串的矩形。

underline(word: String, withColor color: UIColor)将在标签文本中查找给定单词的第一次出现并在其下划线。

在视图控制器中的简单使用：

class ViewController: UIViewController {

    @IBOutlet var labels: [UILabel]!

    var texts: [String] = ["Lorem ipsum dolor sit amet.", 
                           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 
                           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]

    var textToUnderline = ["ipsum", "amet", "incididunt"]

    var underliningColors: [UIColor] = [.red, .blue, .purple]

    @IBOutlet weak var firstLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.labels.enumerated().forEach { index, label in
            label.text = texts[index]
            label.underline(word: textToUnderline[index], withColor: underliningColors[index])
        }
    }

}

这是结果的屏幕截图：

虽然这在第一行时效果很好，但在尝试为另一行下划线时我不再工作了。

为了更好地理解，我尝试在下面打印一些值if let rect（在UILabel扩展中）：

// will print the label frame and the rect to underline
print("frame: \(self.frame) and rect: \(rect)")

这就是我得到的：

框架：（24.0、68.0、366.0、0.0）和矩形：（34.0576171875、0.0、30.3369140625、11.93359375）

框架：（24.0、100.0、366.0、0.0）和矩形：（176.35009765625、0.0、40.375、20.287109375）

框架：（24.0、124.0、366.0、0.0）和矩形：（572.20458984375、0.0、71.14013671875、17.900390625）

我意识到origin.x最后一个标签 rect (572.2...) 的宽度超过了它的宽度 (366)，但我很难理解为什么会得到这个结果以及如何改进我的功能。

谢谢您的帮助。

标签： swiftuilabelmultiline

swift - Multiline UILabel：使用 boundingRect() 为标签的特定部分添加自定义下划线

问题描述

解决方案

推荐阅读