iOS开发：如何用NSAttributedString给选中文本添加边框与圆角？

现有代码 #

let adminName = "  ADMIN  "
let name = [adminName, "Greg Weg"].joined(separator: "  ")
let attributed = NSMutableAttributedString(string: name)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 28
let adminAttributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.purple,
    .backgroundColor: UIColor.purple.withAlphaComponent(0.2),
    .paragraphStyle: paragraphStyle,
    .font: UIFont.poppinsRegular.withSize(16),
]
let adminRange = attributed.mutableString.range(of: adminName)
attributed.setAttributes(adminAttributes, range: adminRange)

//assign attributed to UILabel

当前效果 #

目标效果 #

修改后的完整代码 #

// 1. 配置ADMIN标签的样式参数
let adminText = "ADMIN"
let adminFont = UIFont.poppinsRegular.withSize(16)
let adminTextColor = UIColor.purple
let adminBgColor = UIColor.purple.withAlphaComponent(0.2)
let cornerRadius: CGFloat = 4
let padding: UIEdgeInsets = .init(top: 4, left: 8, bottom: 4, right: 8)

// 计算背景和文本的尺寸
let textSize = adminText.size(withAttributes: [.font: adminFont])
let bgSize = CGSize(width: textSize.width + padding.left + padding.right,
                    height: textSize.height + padding.top + padding.bottom)

// 绘制带圆角的背景图片
UIGraphicsBeginImageContextWithOptions(bgSize, false, UIScreen.main.scale)
adminBgColor.setFill()
UIBezierPath(roundedRect: CGRect(origin: .zero, size: bgSize), cornerRadius: cornerRadius).fill()
let bgImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

// 创建文本附件承载背景图
let attachment = NSTextAttachment()
attachment.image = bgImage
attachment.bounds = CGRect(origin: CGPoint(x: 0, y: -(padding.top)), size: bgSize)

// 创建ADMIN的富文本（附件+文字）
let adminAttributedString = NSMutableAttributedString(attachment: attachment)
let adminTextString = NSAttributedString(string: adminText, attributes: [
    .font: adminFont,
    .foregroundColor: adminTextColor,
    .baselineOffset: padding.top
])
adminAttributedString.append(adminTextString)

// 2. 创建Greg Weg的富文本
let gregText = " Greg Weg"
let gregAttributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.poppinsRegular.withSize(16),
    .foregroundColor: UIColor.black
]
let gregAttributedString = NSAttributedString(string: gregText, attributes: gregAttributes)

// 3. 拼接完整富文本并设置统一行高
let fullAttributedString = NSMutableAttributedString()
fullAttributedString.append(adminAttributedString)
fullAttributedString.append(gregAttributedString)

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 28
fullAttributedString.addAttributes([.paragraphStyle: paragraphStyle],
                                   range: NSRange(location: 0, length: fullAttributedString.length))

// 4. 赋值给UILabel
yourLabel.attributedText = fullAttributedString
yourLabel.lineBreakMode = .byWordWrapping

修改说明 #

1. 移除多余空格：删除adminName前后的空格，避免背景色覆盖无效区域
2. 实现圆角背景：通过NSTextAttachment绘制带内边距的圆角背景图，替代原生backgroundColor的矩形填充，实现胶囊状标签效果
3. 统一文本样式：分别定义ADMIN和Greg Weg的文本属性，保证字体、对齐方式一致，通过全局段落样式设置统一行高
4. 垂直对齐调整：通过baselineOffset和附件的bounds参数，确保ADMIN文字在背景图中垂直居中，与后面的姓名文本对齐

内容的提问来源于stack exchange，提问作者kunass2