iOS 富文本 效果整理 基于NSAttributedString

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

  • 首先初始化一个NSAttributedString
NSMutableAttributedString *abStr = [[NSMutableAttributedString alloc] initWithString:@"你看我是富文本"];

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351