调整UILabel的大小以容纳插入内容 [英] Resizing a UILabel to accommodate insets

问题描述

我正在构建一个扫描条形码的屏幕，我需要在一些 UILabels 后面放置一个半透明屏幕，以提高对浅色背景的可见性。

I'm building a screen to scan barcodes, and I need to put a translucent screen behind some UILabels to improve visibility against light backgrounds.

以下是屏幕现在的样子：

Here's what the screen looks like now:

我在 UILabel 上设置背景颜色得到半透明的盒子。我还创建了一个自定义的 UILabel 子类，允许我在 UILabel 的边缘和之间设置一些填充。文字使用这种方法。

I'm setting the background color on the UILabel to get the translucent boxes. I've also created a custom UILabel subclass to allow me to set some padding between the edge of the UILabel and the text using this approach.

当你可以在上面的屏幕中看到， UILabel 没有正确调整大小以考虑填充。 填充只是将文本移动而不改变标签的宽度，导致文本被截断。

As you can see in the screen above, the UILabel doesn't resize correctly to take the padding into account. The "padding" just shifts the text over without changing the width of the label, causing the text to truncate.

这两个标签都包含任意长度的文本，并且我真的需要 UILabel 来动态调整大小。

Both of these labels will contain text of arbitrary lengths, and I really need the UILabel to dynamically resize.

什么 UILabel 方法可以覆盖以增加标签的宽度和填充中的因子吗？

What UILabel method can I override to increase the width of the label and factor in the padding?

推荐答案

这是一个计算的标签类尺寸正确。 发布的代码位于Swift 3中，但您也可以下载 Swift 2 或 Objective-C 版本。

Here's a label class that calculates sizes correctly. The posted code is in Swift 3, but you can also download Swift 2 or Objective-C versions.

通过计算正确的textRect所有 sizeToFit 并且自动布局内容按预期工作。诀窍是首先减去插图，然后计算原始标签边界，最后再添加插入。

By calculating the proper textRect all of the sizeToFit and auto layout stuff works as expected. The trick is to first subtract the insets, then calculate the original label bounds, and finally to add the insets again.

class NRLabel : UILabel {

    var textInsets = UIEdgeInsets.zero {
        didSet { invalidateIntrinsicContentSize() }
    }

    override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {
        let insetRect = UIEdgeInsetsInsetRect(bounds, textInsets)
        let textRect = super.textRect(forBounds: insetRect, limitedToNumberOfLines: numberOfLines)
        let invertedInsets = UIEdgeInsets(top: -textInsets.top,
                                          left: -textInsets.left,
                                          bottom: -textInsets.bottom,
                                          right: -textInsets.right)
        return UIEdgeInsetsInsetRect(textRect, invertedInsets)
    }

    override func drawText(in rect: CGRect) {
        super.drawText(in: UIEdgeInsetsInsetRect(rect, textInsets))
    }
}

可选：Interface Builder支持

如果要设置文本插入在故事板中，您可以使用以下扩展来启用Interface Builder支持：

Optional: Interface Builder support

If you want to setup text insets in storyboards you can use the following extension to enable Interface Builder support:

@IBDesignable
extension NRLabel {

    // currently UIEdgeInsets is no supported IBDesignable type,
    // so we have to fan it out here:
    @IBInspectable
    var leftTextInset: CGFloat {
        set { textInsets.left = newValue }
        get { return textInsets.left }
    }

    // Same for the right, top and bottom edges.
}

现在您可以在IB中方便地设置插图，然后只需按⌘=调整标签的大小以适应。

Now you can conveniently setup your insets in IB and then just press ⌘= to adjust the label's size to fit.

所有代码都在公共领域。请随便。

All code is in the public domain. Do as you please.

这篇关于调整UILabel的大小以容纳插入内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！