iOS富文本NSAttributedString垂直对齐

使用更先进的浏览器访问效果更佳。

iOS富文本NSAttributedString垂直对齐

admin

转载自简书 ~ https://www.jianshu.com/p/89ed22f50a9c

//中间有一点图片上代码截图不全 这里贴上代码
3.字体大小不同文本垂直居中

所以需要设置NSBaselineOffsetAttributeName属性，可以达到目的，注意descender是负值。


//NSBaselineOffsetAttributeName:@(([UIFont systemFontOfSize:30].lineHeight - [UIFont systemFontOfSize:15].lineHeight)/2 + (([UIFont systemFontOfSize:30].descender - [UIFont systemFontOfSize:15].descender))),

NSDictionary *dic1 = @{NSFontAttributeName:[UIFont systemFontOfSize:15],
                          NSForegroundColorAttributeName:[UIColor blackColor],
                          NSBackgroundColorAttributeName:[UIColor yellowColor],
                          NSBaselineOffsetAttributeName:@(([UIFont systemFontOfSize:30].lineHeight - [UIFont systemFontOfSize:15].lineHeight)/2 + (([UIFont systemFontOfSize:30].descender - [UIFont systemFontOfSize:15].descender))),
                          NSParagraphStyleAttributeName:ParagraphStyle
                          };

记录一下

实际测试中发现 NSTextAttachment 无法垂直居中

在stackflow中找到了测试后可行

You can use the capHeight of the font.

Objective-C
NSTextAttachment *icon = [[NSTextAttachment alloc] init];
UIImage *iconImage = [UIImage imageNamed:@"icon.png"];
[icon setBounds:CGRectMake(0, roundf(titleFont.capHeight - iconImage.size.height)/2.f, iconImage.size.width, iconImage.size.height)];
[icon setImage:iconImage];
NSAttributedString *iconString = [NSAttributedString attributedStringWithAttachment:icon];
[titleText appendAttributedString:iconString];
Swift
let iconImage = UIImage(named: "icon.png")!
var icon = NSTextAttachment()
icon.bounds = CGRect(x: 0, y: (titleFont.capHeight - iconImage.size.height).rounded() / 2, width: iconImage.size.width, height: iconImage.size.height)
icon.image = iconImage
let iconString = NSAttributedString(attachment: icon)
titleText.append(iconString)
The attachment image is rendered on the baseline of the text. And the y axis of it is reversed like the core graphics coordinate system. If you want to move the image upward, set the bounds.origin.y to positive.

The image should be aligned vertically center with the capHeight of the text. So we need to set the bounds.origin.y to (capHeight - imageHeight)/2.

Avoiding some jagged effect on the image, we should round the fraction part of the y. But fonts and images are usually small, even 1px difference makes the image looks like misaligned. So I applied the round function before dividing. It makes the fraction part of the y value to .0 or .5

In your case, the image height is larger than the capHeight of the font. But you can use the same way. The offset y value will be negative. And it will be laid out from the below of the baseline.
翻译：
附件图像呈现在文本的基线上。并且它的y轴像核心图形坐标系一样反转。如果要向上移动图像，请将bounds.origin.y设置为正。

图像应与文本的capHeight垂直居中对齐。因此，我们需要将bounds.origin.y设置为（capHeight-imageHeight）/ 2。

为避免对图像产生锯齿状影响，我们应将y的小数部分四舍五入。但是字体和图像通常很小，即使相差1px，也会使图像看起来像未对齐。所以我在除法之前应用了round函数。它将y值的小数部分设为.0或.5

在您的情况下，图像高度大于字体的capHeight。但是您可以使用相同的方式。偏移y值将为负。它将从基线的下方进行布局。

其中不清楚 capHeight 属性

这里附上资料

NSLog(@"font.pointSize = %f,font.ascender = %f,font.descender = %f,font.capHeight = %f,font.xHeight = %f,font.lineHeight = %f,font.leading = %f",font.pointSize,font.ascender,font.descender,font.capHeight,font.xHeight,font.lineHeight,font.leading);

结果

font.pointSize = 14.000000,font.ascender = 13.330078,font.descender = -3.376953,font.capHeight = 9.864258,font.xHeight = 7.369141,font.lineHeight = 16.707031,font.leading = 0.000000

capHeight比lineHeight明显要小很多

admin

补充:

//   NSParagraphStyleAttributeName 段落的风格（设置首行，行间距，对齐方式什么的）看自己需要什么属性，写什么    
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];    
    paragraphStyle.lineSpacing = 10;// 字体的行间距    
    paragraphStyle.firstLineHeadIndent = 20.0f;//首行缩进    
    paragraphStyle.alignment = NSTextAlignmentJustified;//（两端对齐的）文本对齐方式：（左，中，右，两端对齐，自然）    
    paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;//结尾部分的内容以……方式省略 ( "...wxyz" ,"abcd..." ,"ab...yz")    
    paragraphStyle.headIndent = 20;//整体缩进(首行除外)    
    paragraphStyle.tailIndent = 20;//    
    paragraphStyle.minimumLineHeight = 10;//最低行高    
    paragraphStyle.maximumLineHeight = 20;//最大行高    
    paragraphStyle.paragraphSpacing = 15;//段与段之间的间距    
    paragraphStyle.paragraphSpacingBefore = 22.0f;//段首行空白空间/* Distance between the bottom of the previous paragraph (or the end of its paragraphSpacing, if any) and the top of this paragraph. */    
    paragraphStyle.baseWritingDirection = NSWritingDirectionLeftToRight;//从左到右的书写方向（一共➡️三种）    
    paragraphStyle.lineHeightMultiple = 15;/* Natural line height is multiplied by this factor (if positive) before being constrained by minimum and maximum line height. */    
    paragraphStyle.hyphenationFactor = 1;//连字属性 在iOS，唯一支持的值分别为0和1

可以很轻松的计算某一段落高度，例如：

 _descAtt = [[NSMutableAttributedString alloc] initWithString:_model.desc];  
       UIFont *descFont = [UIFont PingFangSC_Regular_WithSize:12];  

       NSMutableParagraphStyle *descStyle = [[NSMutableParagraphStyle alloc]init];  
       [descStyle setLineSpacing:1];//行间距  
         
       CGSize descSize = [_model.desc boundingRectWithSize:CGSizeMake(w, MAXFLOAT)  
                                                   options:NSStringDrawingUsesLineFragmentOrigin  
                                                attributes:@{NSFontAttributeName:descFont,  
                                                             NSParagraphStyleAttributeName :descStyle}  
                                                   context:nil].size;

其他:

// NSFontAttributeName                设置字体属性，默认值：字体：Helvetica(Neue) 字号：12  
// NSForegroundColorAttributeNam      设置字体颜色，取值为 UIColor对象，默认值为黑色  
// NSBackgroundColorAttributeName     设置字体所在区域背景颜色，取值为 UIColor对象，默认值为nil, 透明色  
// NSLigatureAttributeName            设置连体属性，取值为NSNumber 对象(整数)，0 表示没有连体字符，1 表示使用默认的连体字符  
// NSKernAttributeName                设定字符间距，取值为 NSNumber 对象（整数），正值间距加宽，负值间距变窄  
// NSStrikethroughStyleAttributeName  设置删除线，取值为 NSNumber 对象（整数）  
// NSStrikethroughColorAttributeName  设置删除线颜色，取值为 UIColor 对象，默认值为黑色  
// NSUnderlineStyleAttributeName      设置下划线，取值为 NSNumber 对象（整数），枚举常量 NSUnderlineStyle中的值，与删除线类似  
// NSUnderlineColorAttributeName      设置下划线颜色，取值为 UIColor 对象，默认值为黑色  
// NSStrokeWidthAttributeName         设置笔画宽度，取值为 NSNumber 对象（整数），负值填充效果，正值中空效果  
// NSStrokeColorAttributeName         填充部分颜色，不是字体颜色，取值为 UIColor 对象  
// NSShadowAttributeName              设置阴影属性，取值为 NSShadow 对象  
// NSTextEffectAttributeName          设置文本特殊效果，取值为 NSString 对象，目前只有图版印刷效果可用：  
// NSBaselineOffsetAttributeName      设置基线偏移值，取值为 NSNumber （float）,正值上偏，负值下偏  
// NSObliquenessAttributeName         设置字形倾斜度，取值为 NSNumber （float）,正值右倾，负值左倾  
// NSExpansionAttributeName           设置文本横向拉伸属性，取值为 NSNumber （float）,正值横向拉伸文本，负值横向压缩文本  
// NSWritingDirectionAttributeName    设置文字书写方向，从左向右书写或者从右向左书写  
// NSVerticalGlyphFormAttributeName   设置文字排版方向，取值为 NSNumber 对象(整数)，0 表示横排文本，1 表示竖排文本  
// NSLinkAttributeName                设置链接属性，点击后调用浏览器打开指定URL地址  
// NSAttachmentAttributeName          设置文本附件,取值为NSTextAttachment对象,常用于文字图片混排  
// NSParagraphStyleAttributeName      设置文本段落排版格式，取值为 NSParagraphStyle 对象