iOS_NSTextAttachment图文混排，图片和文字对齐

NSTextAttachment

需求：图文混排

初始实现的代码如下：

代码语言：javascript复制

let label = UILabel()
label.frame = CGRect(x: 50.0, y: 150.0, width: 200.0, height: 100)
label.backgroundColor = .purple
label.numberOfLines = 0
self.view.addSubview(label)

let attributedStr = NSMutableAttributedString()

// 图片
let image: UIImage = UIImage(named: "online") ?? UIImage()
// 图片高度跟文字高度一致
let imageHeight = label.font.lineHeight
// 高度确定后，根据宽高比，算出图片应该显示的高度
let imageWidth = image.size.width * imageHeight / image.size.height

let attach = NSTextAttachment()
attach.image = image
attach.bounds = CGRect(x: 0.0,
                       y: 0.0,
                       width: imageWidth,
                       height: imageHeight)

let imageStr = NSAttributedString(attachment: attach)
attributedStr.append(imageStr)

// 增加图片后与文字间距
let spacingStr = NSAttributedString(string: " ")
attributedStr.append(spacingStr)

// 昵称
let nameStr = NSAttributedString(string: "莫小言：jKf 阿斯利康打火机v爱仕达比爱是妒忌丽丽i就是懒得8级莉莎爱睡觉的就是的i临时冻结i欧路莎几点")
attributedStr.append(nameStr)

label.attributedText = attributedStr

运行结果如下：

问题：图标没有跟文字对齐（没有处在同一水平线上）

原因：attachment 默认是 显示在 baseline 上方的，所以需要调整一下 attachment 的 originY。

修改 bounds 赋值如下，就能解决：

代码语言：javascript复制

// attachment 默认是 显示在 baseline 上方的
// 为了跟文字对齐，需要将 originY 往上偏移 descender
attach.bounds = CGRect(x: 0.0,
                       y: label.font.descender,
                       width: imageWidth,
                       height: imageHeight)

baseline 和 descender 的相关知识可以看我这篇文章：iOS_UIFont的Attributes解析

修改后运行效果如下：

ios attachment attributes

0 人点赞