iOS 富文本 效果整理 基于NSAttributedString

利用 UILabel 的 attributedText 属性可设置不同的文本样式

• 首先初始化一个NSAttributedString

NSMutableAttributedString *abStr = [[NSMutableAttributedString alloc] initWithString:@"你看我是富文本"];

这里初始加给label.attributedText,看起来是平平无奇的样子
这里要先设置label的初始textColor和font等,展示基本样式

image

• 然后选择一种样式给label变身吧

1. 设置字体和大小

NSFontAttributeName

image

//设置前三个字 [UIFont systemFontOfSize:15]
[abStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(0, 3)];

2. 设置间距

NSParagraphStyleAttributeName

image

// 这里要用NSMutableParagraphStyle来设置各种属性
// 下面只是简单常用的处理行间距
// 还可以设置首行缩进，行高，对齐方式，段落，连字属性等
NSMutableParagraphStyle *pgpStyle = [[NSMutableParagraphStyle alloc] init];
pgpStyle.lineSpacing = 30; //行间距,注意:实际视觉行距要计算到实际行高
// 行间距是多少倍
// pgpStyle.lineHeightMultiple = 1.5f;
// 首行缩进  
// pgpStyle.firstLineHeadIndent = 30.0f;    
// 对齐方式 
// pgpStyle.alignment = NSTextAlignmentLeft; 
// 内容超出宽度时,内容有...省略的位置 ( "...abc" ,"abc..." ,"ab...c")   
// pgpStyle.lineBreakMode = NSLineBreakByTruncatingTail; 
// 整体缩进
// pgpStyle.headIndent = 30;//左边距    
// pgpStyle.tailIndent = 20;//右边距  
// 行高  
// 针对不同的字型与字号,可以透过指定最大与最小行距来避免过高或过窄的状况发生
// pgpStyle.minimumLineHeight = 10;//最低行高    
// pgpStyle.maximumLineHeight = 20;//最大行高    
// 段落 
// pgpStyle.paragraphSpacing = 15; //段落间距  
// pgpStyle.paragraphSpacingBefore = 30;//段首行空白空间 
// pgpStyle.paragraphSpacing = 30; //段落后面的间距  
[abStr addAttribute:NSParagraphStyleAttributeName
              value:pgpStyle
              range:NSMakeRange(0, 5)];

3. 设置文本颜色

NSForegroundColorAttributeName

image

[abStr addAttribute:NSForegroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 3)];

4. 设置文字背景色

NSBackgroundColorAttributeName

image

[abStr addAttribute:NSBackgroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 3)];

5. 设置连字

NSLigatureAttributeName

image

说明:
1.PingFangSC_Bold 和 PingFangSC_Regular 一般不会有连字问题
2.PingFangSC-Semibold等字体或者三方字体就有默认连字现象
3.也不是所有的字都会连,一般出现在fi和fl这种字符才会连,具体"连字"的概念问百度or谷歌

NSMutableAttributedString *abStr = [[NSMutableAttributedString alloc]initWithString:@"fiflfi"];
//0表示不连 1表示连 实际中PingFangSC-Semibold等是默认连的
[abStr addAttribute:NSLigatureAttributeName value:@(1) range:NSMakeRange(0, abStr.length)];

6. 设置文字间距

NSKernAttributeName

image

[abStr addAttribute:NSKernAttributeName value:@(10) range:NSMakeRange(0, 3)];

7. 设置删除线

NSStrikethroughColorAttributeName
NSStrikethroughStyleAttributeName

image

说明:
1.可设置单.双删除线
2.value赋值 [1, 7]是单线, [9, 15]是双线,区间内数值越大,线越粗,注意超出区间内的值,删除线就会失效

[abStr addAttribute:NSStrikethroughStyleAttributeName value:@(5) range:NSMakeRange(0, 3)];
[abStr addAttribute:NSStrikethroughStyleAttributeName value:@(13) range:NSMakeRange(3, 4)];
    
[abStr addAttribute:NSStrikethroughColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 3)];
[abStr addAttribute:NSStrikethroughColorAttributeName value:[UIColor greenColor] range:NSMakeRange(3, 4)];

8. 设置下划线

NSUnderlineStyleAttributeName
NSUnderlineColorAttributeName

image

一般常用:value赋值
NSUnderlineStyleSingle //单根细线
NSUnderlineStyleThick //单根粗线
NSUnderlineStyleDouble //双根细线

//样式
[abStr addAttribute:NSUnderlineStyleAttributeName value:@(NSUnderlineStyleSingle) range:NSMakeRange(0, 3)];
//颜色
[abStr addAttribute:NSUnderlineColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 3)];
[abStr addAttribute:NSUnderlineColorAttributeName value:[UIColor greenColor] range:NSMakeRange(4, 3)];

9. 文字描边

NSStrokeWidthAttributeName
NSStrokeColorAttributeName

image

NSStrokeWidthAttributeName 这个设置描边字符的宽度,(-∞, 0)区间向内,(0, +∞)区间向外, 注意value设置过大就糊了哟
NSStrokeColorAttributeName 这个设置描边字符的颜色

[abStr addAttribute:NSStrokeWidthAttributeName value:@(2) range:NSMakeRange(0, 3)];
[abStr addAttribute:NSStrokeColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(0, 3)];
    
[abStr addAttribute:NSStrokeWidthAttributeName value:@(-2) range:NSMakeRange(3, 3)];
[abStr addAttribute:NSStrokeColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(3, 3)];

10. 设置文字阴影

NSShadowAttributeName

image

NSShadow *shadow = [[NSShadow alloc]init];
shadow.shadowOffset = CGSizeMake(5, 5);
shadow.shadowColor = [UIColor orangeColor];
// shadow.shadowBlurRadius = 5; 阴影模糊度
//貌似range设置无效了,都是这个文本
[abStr addAttribute:NSShadowAttributeName value:shadow range:NSMakeRange(0, abStr.length)];

11. 设置文本特殊效果(用处少)

NSTextEffectAttributeName

只有一直效果类型为NSTextEffectLetterpressStyle //凸版样式

12. 设置文件附件(图文混排)

NSAttachmentAttributeName

image

NSTextAttachment *tathment = [[NSTextAttachment alloc]init];
tathment.image = [UIImage imageNamed:@"absImg.png"];
tathment.bounds = CGRectMake(0, 0, 35, 35);
NSAttributedString *imgAbs = [NSAttributedString attributedStringWithAttachment:tathment];
    
[abStr insertAttributedString:imgAbs atIndex:3];

13. 设置链接(只有UITextView可用)

NSLinkAttributeName

value 赋值类型是 NSURL or NSString

image

UITextView *tv = [[UITextView alloc]initWithFrame:CGRectMake(0, 100, self.view.bounds.size.width, 200)];
tv.font = [UIFont systemFontOfSize:25];
tv.textAlignment = NSTextAlignmentCenter;
tv.editable = NO;
[self.view addSubview:tv];
    
NSMutableAttributedString *abStr = [[NSMutableAttributedString alloc]initWithString:@"你看我是富文本"];
[abStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:25] range:NSMakeRange(0, abStr.length)];
NSMutableParagraphStyle *pgpStyle = [[NSMutableParagraphStyle alloc] init];
pgpStyle.alignment = NSTextAlignmentCenter;
[abStr addAttribute:NSParagraphStyleAttributeName value:pgpStyle range:NSMakeRange(0, abStr.length)];
    
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
[abStr addAttribute:NSLinkAttributeName value:url range:NSMakeRange(abStr.length-3, 3)];
tv.attributedText = abStr;

14. 文字上下偏移

NSBaselineOffsetAttributeName

image

vlaue 赋值 正负对应上下偏移

[abStr addAttribute:NSBaselineOffsetAttributeName value:@(6) range:NSMakeRange(2, 1)];
[abStr addAttribute:NSBaselineOffsetAttributeName value:@(-6) range:NSMakeRange(4, 1)];

15. 文字斜体

NSObliquenessAttributeName

image

vlaue 赋值 正负对应左右斜

[abStr addAttribute:NSObliquenessAttributeName value:@(-0.5) range:NSMakeRange(0, 3)];
[abStr addAttribute:NSObliquenessAttributeName value:@(0.5) range:NSMakeRange(4, 3)];

15. 文字拉伸

NSExpansionAttributeName // 横向拉伸

image

vlaue 赋值 正负对应变胖瘦

[abStr addAttribute:NSExpansionAttributeName value:@(-0.5) range:NSMakeRange(0, 3)];
[abStr addAttribute:NSExpansionAttributeName value:@(0.5) range:NSMakeRange(4, 3)];

16. 文字书写方向(一般用于自右向左)

NSWritingDirectionAttributeName

image

[abStr addAttribute:NSWritingDirectionAttributeName value:@[@(NSWritingDirectionRightToLeft|NSWritingDirectionOverride)] range:NSMakeRange(0, abStr.length)];

17. 文字排版(iOS上无效果)

NSVerticalGlyphFormAttributeName

0为水平排版的字，1为垂直排版的字。iOS上效果一直为1