NSAttributedString（二）NSTextAttac

一、使用NSTextAttachment可渲染富文本中的图片

NSString *text = @"efghefghefgh";
UIFont *baseFont = [UIFont boldSystemFontOfSize:30];
NSMutableAttributedString *result = [[NSMutableAttributedString alloc] initWithString:text];
[result addAttributes:@{NSFontAttributeName: baseFont} range:NSMakeRange(0, text.length)];

NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [UIImage imageNamed:@"love"];
attachment.bounds = CGRectMake(0, 0, baseFont.lineHeight, baseFont.lineHeight);
NSAttributedString *attachmentStr = [NSAttributedString attributedStringWithAttachment:attachment];
[result insertAttributedString:attachmentStr atIndex:4];
    
CGRect rect = [result boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading context:NULL];
NSLog(@"lineHeight--%f", baseFont.lineHeight);  // 35.800781
NSLog(@"bounding--%f", rect.size.height);  // 43.037109

结果

这其中有两个问题：

1. 结果虽然正常显示了attachment，但是它与其他文本没有垂直居中；
2. font的lineHeight是35.800781，但是根据boundingRectWithSize计算出来的高度却是43.037109;

这是因为两个原因导致的：

• NSTextAttachment默认的垂直对齐方式，也是基线对齐；
• attachment.bounds = CGRectMake(0, 0, baseFont.lineHeight, baseFont.lineHeight);，我们设置了attachment的高度为baseFont.lineHeight;

所以attachment的实际y坐标，是-baseFont.descender，即-7.236328，而这刚好是上方boundingRectWithSize与lineHeight的差值；

通过上方的结论，我们可以使用两种方法来使attachment与文字垂直居中对齐：

• 设置attachment的bounds
• 通过设置NSBaselineOffsetAttributeName;

二、设置attachment的bounds

CGFloat height = 40;
CGFloat originX = [self calculateOriginY:baseFont height:height];
attachment.bounds = CGRectMake(0, originX, height, height);
...
NSLog(@"lineHeight--%f", baseFont.lineHeight); // 35.800781
NSLog(@"bounding--%f", rect.size.height); // 35.800781
...
- (CGFloat)calculateOriginY:(UIFont *)baseFont height:(CGFloat)height
{
    CGFloat baseHeight = baseFont.lineHeight;
    CGFloat baseDescender = -baseFont.descender;
    CGFloat result = (baseHeight - height) / 2 - baseDescender;
    return result;
}

image.png

二、设置NSBaselineOffsetAttributeName

attachment.bounds = CGRectMake(0, 0, height, height);
NSMutableAttributedString *attachmentStr = [[NSAttributedString attributedStringWithAttachment:attachment] mutableCopy];
CGFloat baseline = [self calculateBaseLineOffset:baseFont height:height]; 
[attachmentStr addAttributes:@{NSBaselineOffsetAttributeName: @(baseline)} range:NSMakeRange(0, attachmentStr.length)];
NSLog(@"lineHeight--%f", baseFont.lineHeight); // 35.800781
NSLog(@"bounding--%f", rect.size.height); // 44.595703

...
- (CGFloat)calculateBaseLineOffset:(UIFont *)baseFont height:(CGFloat)height
{
    CGFloat baseHeight = baseFont.lineHeight;
    CGFloat baseDescender = -baseFont.descender;
    CGFloat result = (baseHeight - height) / 2 - baseDescender;
    return result;
}

结论

虽然通过NSBaselineOffsetAttributeName可以实现垂直居中，但是也有缺陷，boundingRectWithSize计算的高度与lineHeight不符；

结论：设置bounds的方案更优；