iOS开发之 - 好玩的富文本

周末闲着没事，就想着不如把那些容易遗忘的知识点整理一下，一来可以让有需要的朋友少走弯路，二来自己以后再忘记的时候也可以回头看看……但 iOS 中小冷易忘的知识点实在太多了，不知道该从哪里开始整理，“百无聊赖”逛了下淘宝，发现里面好多都是富文本，就想着为什么不从富文本开始呢？反正闲着也是闲着……于是就有了下面这些东西，希望可以帮到看到的盆友们！

先写一个小引子

在项目中，很多时候我们都需要把文字设置成倾斜、加粗、加下划线、加删除线、加阴影等等状态，就比如下面这张图：

但如果我们只是简单的设置字体

1

self.textView.text = @"很好玩的富文本";

显示出来大概是这个样子滴：普通文本

为了让文字变的好看一些，接下来我们尝试一下富文本！

改变字体颜色

1
2
3
4
5
6


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    
    [string addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(1, 2)];
    [string addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(3, 1)];
    [string addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

改变字体颜色

1
2
3
4


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(1, 2)];
    [string addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

改变字体大小

给文字添加背景色

1
2
3
4


 NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSBackgroundColorAttributeName value:[UIColor cyanColor] range:NSMakeRange(1, 2)];
    [string addAttribute:NSBackgroundColorAttributeName value:[UIColor yellowColor] range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

给文字添加背景色

给文字设置间距

1
2
3


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSKernAttributeName value:@(20) range:NSMakeRange(0, 6)];
    self.textView.attributedText = string;

给文字设置间距

字体倾斜

1
2
3


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSObliquenessAttributeName value:@(0.5) range:NSMakeRange(0, 7)];
    self.textView.attributedText = string;

字体倾斜

字体加粗

1
2
3


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSExpansionAttributeName value:@(0.5) range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

字体加粗

加下划线并设置下划线颜色

1
2
3
4


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSUnderlineStyleAttributeName value:@(1) range:NSMakeRange(4, 3)];
    [string addAttribute:NSUnderlineColorAttributeName value:[UIColor blueColor] range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

加下划线并设置下划线颜色

加删除线并设置删除线颜色

1
2
3
4


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"原价666💰，现价只要66💰！"];
    [string addAttribute:NSStrikethroughStyleAttributeName value:@(1) range:NSMakeRange(2, 3)];
    [string addAttribute:NSStrikethroughColorAttributeName value:[UIColor blueColor] range:NSMakeRange(2, 3)];
    self.textView.attributedText = string;

加删除线并设置删除线颜色

设置文字方向

1
2
3
4


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSVerticalGlyphFormAttributeName value:@(1) range:NSMakeRange(0, 7)];
    [string addAttribute:NSWritingDirectionAttributeName value:@[@(2),@(3)] range:NSMakeRange(0, 7)];
    self.textView.attributedText = string;

设置文字方向

给文字添加阴影

1
2
3
4
5
6
7


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    NSShadow *shadow = [[NSShadow alloc]init];
    shadow.shadowOffset = CGSizeMake(5, 5);
    shadow.shadowColor = [UIColor blueColor];
    shadow.shadowBlurRadius = 1;
    [string addAttribute:NSShadowAttributeName value:shadow range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

给文字添加阴影

图文混排

1
2
3
4
5
6
7
8


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    // 创建图片图片附件
    NSTextAttachment *attach = [[NSTextAttachment alloc] init];
    attach.image = [UIImage imageNamed:@"1.jpg"];
    attach.bounds = CGRectMake(0, 0, 20, 20);
    NSAttributedString *attachString = [NSAttributedString attributedStringWithAttachment:attach];
    [string appendAttributedString:attachString];
    self.textView.attributedText = string;

图文混排

文字偏移

1
2
3
4
5
6
7


NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"很好玩的富文本"];
    [string addAttribute:NSBaselineOffsetAttributeName value:@(10) range:NSMakeRange(0, 1)];
    [string addAttribute:NSBaselineOffsetAttributeName value:@(20) range:NSMakeRange(1, 1)];
    [string addAttribute:NSBaselineOffsetAttributeName value:@(30) range:NSMakeRange(2, 1)];
    [string addAttribute:NSBaselineOffsetAttributeName value:@(40) range:NSMakeRange(3, 1)];
    [string addAttribute:NSBaselineOffsetAttributeName value:@(50) range:NSMakeRange(4, 3)];
    self.textView.attributedText = string;

文字偏移

以上是对 iOS 中富文本相关的知识做的一些整理，如果有粗心写错的地方，还请朋友们指出！如果还有遗漏的地方，以后碰到了再来补充。。。

Table of Contents