NSAttributedString（一）基线

前言

在iOS中，展示26个字母，我们发现这行文字，不是完全垂直对齐的；
这是因为在iOS的文本容器中，文字垂直对齐方式都是基线对齐；

基线对齐，就是指无论字符、数字、中文、表情等它们在同一行的时候，基线都是在同一高度；

一、基线

• Baseline：基线
• Ascent：基线上边部分的高度，值为正；
• Descent：基线下边部分的高度，值为负；

NSString *text = @"abcdefghijklmnopqrstuvwxyz";
UIFont *font = [UIFont boldSystemFontOfSize:30];
NSMutableAttributedString *result = [[NSMutableAttributedString alloc] initWithString:text];
[result addAttributes:@{NSFontAttributeName: font} range:NSMakeRange(0, result.length)];
CGRect rect = [result boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading context:NULL];

NSLog(@"lineHeight = %f", font.lineHeight);
NSLog(@"font = %f", font.ascender);
NSLog(@"descender = %f", font.descender);
NSLog(@"leading = %lf", font.leading);
NSLog(@"boundingRectHeight = %f", rect.size.height);

可以得出结论： lineHeight = leading + Ascent + Descent;

二、不同字体大小的基线对齐

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

结果

不同字体下，使用基线对齐时，有着明显的问题；

三、设置不同字体下垂直对齐

可以通过设置NSBaselineOffsetAttributeName来文本的基线偏移，来保持不同字体下垂直对齐；

NSString *text = @"efghefghefgh";
UIFont *baseFont = [UIFont boldSystemFontOfSize:30];
NSMutableAttributedString *result = [[NSMutableAttributedString alloc] initWithString:text];
CGFloat baseLine10 = [self calculateBaseLineOffset:baseFont font:[UIFont boldSystemFontOfSize:10]];
[result addAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:10], NSBaselineOffsetAttributeName: @(baseLine10)} range:NSMakeRange(0, 4)];
[result addAttributes:@{NSFontAttributeName: baseFont} range:NSMakeRange(4, 4)];

CGFloat baseLine25 = [self calculateBaseLineOffset:baseFont font:[UIFont boldSystemFontOfSize:25]];
[result addAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:25], NSBaselineOffsetAttributeName: @(baseLine25)} range:NSMakeRange(8, 4)];

// 计算基线偏移量
- (CGFloat)calculateBaseLineOffset:(UIFont *)baseFont font:(UIFont *)font
{
    CGFloat baseHeight = baseFont.lineHeight;
    CGFloat height = font.lineHeight;
    
    CGFloat baseDescender = -baseFont.descender;
    CGFloat descender = -font.descender;
    CGFloat result = (height - baseHeight) / 2 - (descender - baseDescender);
    return -result;
}