一、使用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
結(jié)果
這其中有兩個(gè)問題：
- 結(jié)果雖然正常顯示了
attachment靡砌，但是它與其他文本沒有垂直居中辆毡；font的lineHeight是35.800781跟匆，但是根據(jù)boundingRectWithSize計(jì)算出來的高度卻是43.037109;
這是因?yàn)閮蓚€(gè)原因?qū)е碌模?/p>
-
NSTextAttachment默認(rèn)的垂直對(duì)齊方式，也是基線對(duì)齊滚朵； -
attachment.bounds = CGRectMake(0, 0, baseFont.lineHeight, baseFont.lineHeight);冤灾，我們?cè)O(shè)置了attachment的高度為baseFont.lineHeight;
所以attachment的實(shí)際y坐標(biāo)，是
-baseFont.descender辕近，即-7.236328韵吨，而這剛好是上方boundingRectWithSize與lineHeight的差值；
通過上方的結(jié)論移宅，我們可以使用兩種方法來使attachment與文字垂直居中對(duì)齊：
- 設(shè)置
attachment的bounds - 通過設(shè)置
NSBaselineOffsetAttributeName;
二归粉、設(shè)置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
二、設(shè)置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;
}
結(jié)論
雖然通過
NSBaselineOffsetAttributeName可以實(shí)現(xiàn)垂直居中漏峰，但是也有缺陷糠悼，boundingRectWithSize計(jì)算的高度與lineHeight不符；
結(jié)論：設(shè)置bounds的方案更優(yōu)浅乔；
