NSAttributedString中NSTextAttachment竖直居中

iOS开发中经常需要在富文本（NSAttributedString）中添加图片（NSTextAttachment）。那么如何添加图片呢？代码如下

UIFont *font = [UIFont systemFontOfSize:12];
NSDictionary<NSAttributedStringKey,id> *attributes = @{
    NSFontAttributeName: font,
};
//生成富文本
NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:@"我忘记了" attributes:attributes];
//添加图片
[attributedText appendAttributedString:({
    NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
    UIImage *image = [UIImage imageNamed:@"icon"];
    attachment.image = image;
    attachment.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
    [NSAttributedString attributedStringWithAttachment:attachment];
})];

代码写好了，编译运行，看看效果:

运行效果1

这肯定不是设计师需要的效果，如何让文字和图片在竖直方向上居中对齐呢？其实很简单，修改attachment.bounds.origin.y即可：

UIFont *font = [UIFont systemFontOfSize:12];
NSDictionary<NSAttributedStringKey,id> *attributes = @{
    NSFontAttributeName: font,
};
//生成富文本
NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:@"我忘记了" attributes:attributes];
//添加图片
[attributedText appendAttributedString:({
    NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
    UIImage *image = [UIImage imageNamed:@"icon"];
    attachment.image = image;

    attachment.bounds = CGRectMake(0, -4.5, image.size.width, image.size.height);
    [NSAttributedString attributedStringWithAttachment:attachment];
})];

设置好attachment.bounds.origin.y了，再重新编译运行看看效果：

运行效果2

效果不错，达到了设计师需要的效果。那么问题来了，为何要设置attachment.bounds.origin.y = -4.5呢？我试了十遍试出来的

每次新添加或者切换字体都试上十遍，肯定不是我们想要的，那有没有更好的方式呢？答案肯定是有的，设置attachment.bounds.origin.y = round(font.capHeight - image.size.height)/2.0即可：

UIFont *font = [UIFont systemFontOfSize:12];
NSDictionary<NSAttributedStringKey,id> *attributes = @{
    NSFontAttributeName: font,
};
//生成富文本
NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:@"我忘记了" attributes:attributes];
//添加图片
[attributedText appendAttributedString:({
    NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
    UIImage *image = [UIImage imageNamed:@"icon"];
    attachment.image = image;

    attachment.bounds = CGRectMake(0, round(font.capHeight - image.size.height)/2.0, image.size.width, image.size.height);
    [NSAttributedString attributedStringWithAttachment:attachment];
})];

再次编译运行得到我们想要的效果：

最终效果

参考：https://stackoverflow.com/questions/26105803/center-nstextattachment-image-next-to-single-line-uilabel
关于bound的设置可参考：https://www.jianshu.com/p/964313cfbdaa

NSAttributedString中NSTextAttachment竖直居中

推荐阅读更多精彩内容