在UILabel的特定字符后面画圆圈

Question

我试图在UILabel的特定字符后面绘制圆圈, 而无需使用多个标签或重新计算框架。

我知道可以使用属性文本将图像插入到UILabel中，但我希望圆圈位于数字（从1到9）的后面。 我不想存储1到9的图像。 我也找不到任何能实现此目的的pod。

    let fullText = NSMutableAttributedString()

    let imageAttachment = NSTextAttachment()
    imageAttachment.image = UIImage(named: "\(number)_\(color == .yellow ? "yellow" : "gray")")
    let imageString = NSAttributedString(attachment: imageAttachment)
    let endString = NSAttributedString("nouveaux")

    fullString.append(imageString)
    fullString.append(endString)

    mainLabel.attributedText = fullString

编辑

我想在字符串的每个数字后面画一个圆圈。 如果可能的话，我希望它是一种通用工具，一种返回属性字符串的解析器，如果不行，就是一个独特的UIView。 另一个用例是"4 messages | chat 2"（4为黄色，2为灰色）。

- michael-martinez

---

请展示您已经尝试过的内容，哪些没有起作用，以及代码示例等。请阅读[ask]和[mcve]，然后[编辑]您的问题，展示最少的演示问题的代码。 - Ashley Mills

如果您说1和nouveaux在同一个标签中，为什么不将它们分成2个不同的UILabel，并使用cornerRadius创建一个自定义的标签，将其转换为黄色圆形？ - Mochi

为什么不使用核心动画层和单独的标签来绘制圆形和数字的自定义UIView。我认为这更有效率。 - vadian

所以数字总是标签中的第一个或最后一个字符吗？ - Ashley Mills

这正是我之前的评论建议您应该做的。有什么难度吗？ - matt

Answer 1

我不明白为什么您不使用实时绘制数字圆的实用程序函数。这样，您可以使用任何数字字体、圆的大小、数字颜色和圆的颜色。例如：

func circleAroundDigit(_ num:Int, circleColor:UIColor,
                       digitColor:UIColor, diameter:CGFloat,
                       font:UIFont) -> UIImage {
    precondition((0...9).contains(num), "digit is not a digit")
    let p = NSMutableParagraphStyle()
    p.alignment = .center
    let s = NSAttributedString(string: String(num), attributes:
        [.font:font, .foregroundColor:digitColor, .paragraphStyle:p])
    let r = UIGraphicsImageRenderer(size: CGSize(width:diameter, height:diameter))
    return r.image {con in
        circleColor.setFill()
        con.cgContext.fillEllipse(in:
            CGRect(x: 0, y: 0, width: diameter, height: diameter))
        s.draw(in: CGRect(x: 0, y: diameter / 2 - font.lineHeight / 2,
                          width: diameter, height: diameter))
    }
}

这是如何使用它的：

let im = circleAroundDigit(3, circleColor: .yellow, 
    digitColor: .white, diameter: 30, font:UIFont(name: "GillSans", size: 20)!)

这是生成的图像；但请注意，通过以不同方式调用该函数，可以对其进行任何方面的微调：

好的，现在你已经有了一张图片。你说你已经知道如何将图片插入到带属性的字符串中并将其作为标签的一部分显示，所以我不会解释如何做到这一点：

- matt

---

非常好！谢谢，这正是我一直在寻找的UIImage构造方法，给定标签和字体大小对我来说并不简单。 - michael-martinez

谢谢兄弟，我想在NSMultableString中添加像反应数字一样的图标，你能帮忙吗？ 就像这样 +2（icon_smile） - famfamfam

Answer 2

使用UIStackView非常简单，设置有颜色视图层的圆角半径即可...

结果...

或者在外部堆栈视图中使用2个堆栈视图≥

结果...

- Ashley Mills