ios项目中经常需要显示一些带有特殊样式的文本，比如说带有下划线、删除线、斜体、空心字体、背景色、阴影以及图文混排（一种文字中夹杂图片的显示效果）。通常想要实现这些效果要使用到iOS的Foundation框架提供的NSAttributedString类，NSAttributedString类中有许多属性，不同属性对应不同的文本样式。本文主要对这些属性做一个解释说明，并会结合实际代码来应用它们。

1. NSAttributedString属性概览表

2. 属性详解及应用（图文混排比较特殊，会在第 3 部分单独说明）

NSMutableAttributedString 是 NSAttributedString 的子类，一般来说我比较习惯使用NSMutableAttributedString来实现富文本，本文的例子也是采用NSMutableAttributedString来实现的，与NSAttributedString实现效果相比并无优缺点之分，主要目的是讲清楚这些属性。

本文使用NSMutableAttributedString实现富文本，主要步骤分为以下三步，为避免下面解释代码时所添加的注释不断重复，特在此说明提前说明一下：

• 调用 - (instancetype)initWithString:(NSString *)str 方法来创建 NSMutableAttributedString 实例

• 调用 - (void)addAttribute:(NSString *)name value:(id)value range:(NSRange)range 方法添加所需的 Attribute 属性,要注意range的范围，所添加的属性只对指定范围内的文字有效

• 给 label 赋值 ： label.attributedText = attributedString；

2.1 NSFontAttributeName —— 字体大小

代码 ：

- (void)fontAttributeNameTest {
    NSString *text = @"我是30号系统字体,你是15号Courier-BoldOblique字体";
    // 1.创建NSMutableAttributedString实例
    NSMutableAttributedString *fontAttributeNameStr = [[NSMutableAttributedString alloc]initWithString:text];

    // 2.添加属性
    [fontAttributeNameStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(0, 9)];
    [fontAttributeNameStr addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"Courier-BoldOblique" size:15] range:NSMakeRange(9, text.length - 9)];

    // 3.给label赋值
    self.label.attributedText = fontAttributeNameStr;
}

效果图 :

NSFontAttributeName.png

2.2 NSParagraphStyleAttributeName —— 文本字、行间距，对齐等

代码：

- (void)paragraphStyleAttributeNameTest {
    NSString *text = @"我是一个很长很长很长的文本，我的字间距是5，行间距是20，对齐方式为居中对齐。";
    NSMutableAttributedString *attributeStr = [[NSMutableAttributedString alloc]initWithString:text];

    // 创建NSMutableParagraphStyle实例
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = 5;       //字间距5
    paragraphStyle.paragraphSpacing = 20;       //行间距是20
    paragraphStyle.alignment = NSTextAlignmentCenter;   //对齐方式为居中对齐

    [attributeStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, text.length)];

    self.label.attributedText = attributeStr;
}

效果图：

NSParagraphStyleAttributeName.png

2.3 NSForegroundColorAttributeName —— 字体颜色

代码：

- (void)foregroundColorAttributeNameTest {
    NSString *text = @"你好呀，我默认颜色是label的textColor,但是我现在要通过NSForegroundColorAttributeName属性变成一个蓝色了，看好喽！";
    NSMutableAttributedString *attributeStr = [[NSMutableAttributedString alloc]initWithString:text];
    [attributeStr addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(26, text.length - 26)];
    self.label.attributedText = attributeStr;
}

效果图：

NSForegroundColorAttributeName.png

2.4 NSBackgroundColorAttributeName —— 背景色

代码：

- (void)backgroundColorAttributeNameTest {
    NSString *text = @"我是一个紫色背景色的文本！";
    NSMutableAttributedString *attributeStr = [[NSMutableAttributedString alloc]initWithString:text];
    [attributeStr addAttribute:NSBackgroundColorAttributeName value:[UIColor purpleColor] range:NSMakeRange(0, text.length)];
    self.label.attributedText = attributeStr;
}

效果图：

NSBackgroundColorAttributeName.png

2.5 NSLigatureAttributeName —— 连字符

ios 中有 0 和 1 两个值：0表示没有连字符，而1是默认的连字符。（一般对连笔写的英文有效, 中文即使设置了连字符也很难表现出来）。

代码：

- (void)ligatureAttributeNameTest {
   NSString *text = @"逗号前面的我是一个没有连字符样式的fl，逗号后面的你是一个带连字符样式的fl（你看后半句的汉字连字符样式好难体现出来哦)";
   NSMutableAttributedString *attributeStr = [[NSMutableAttributedString alloc]initWithString:text];
   [attributeStr addAttribute:NSFontAttributeName value:[UIFont fontWithName: @"futura" size: 20] range:NSMakeRange(0, text.length)];
   // 设置文本前半句无连字符效果
   [attributeStr addAttribute:NSLigatureAttributeName value:[NSNumber numberWithInt:0] range:NSMakeRange(0, 19)];
   // 设置文本后半句有连字符效果
   [attributeStr addAttribute:NSLigatureAttributeName value:[NSNumber numberWithInt:1] range:NSMakeRange(19, text.length - 19)];
   self.label.attributedText = attributeStr;
}

效果图：

NSLigatureAttributeName.png

2.6 NSKernAttributeName —— 字符间距

注意： 正值间距加宽，负值间距变窄，0表示默认效果

代码：

- (void)kernAttributeNameTest {
   NSString *text = @"设置我的字间距为正值20有拉大效果，中间的你是正常效果，设置他的字间距为负值-5有减少效果";
   NSMutableAttributedString *attributeStr = [[NSMutableAttributedString alloc]initWithString:text];
   [attributeStr addAttribute:NSKernAttributeName value:@20 range:NSMakeRange(0, 18)];
   [attributeStr addAttribute:NSKernAttributeName value:@(-5) range:NSMakeRange(28, text.length - 28)];
   self.label.attributedText = attributeStr;
}

效果图：

NSKernAttributeName.png

----------------------------写在设置文本的删除线和下划线之前----------------------

删除线和下划线的区别就是：删除线是在文字中间显示，下划线是在文字的底部显示；除这一点外，设置的可选值是一样的，都是NSUnderlineStyle的枚举常量

    NSUnderlineStyleNone                                    = 0x00,
    NSUnderlineStyleSingle                                  = 0x01,
    NSUnderlineStyleThick NS_ENUM_AVAILABLE(10_0, 7_0)      = 0x02,
    NSUnderlineStyleDouble NS_ENUM_AVAILABLE(10_0, 7_0)     = 0x09,

    NSUnderlinePatternSolid NS_ENUM_AVAILABLE(10_0, 7_0)      = 0x0000,
    NSUnderlinePatternDot NS_ENUM_AVAILABLE(10_0, 7_0)        = 0x0100,
    NSUnderlinePatternDash NS_ENUM_AVAILABLE(10_0, 7_0)       = 0x0200,
    NSUnderlinePatternDashDot NS_ENUM_AVAILABLE(10_0, 7_0)    = 0x0300,
    NSUnderlinePatternDashDotDot NS_ENUM_AVAILABLE(10_0, 7_0) = 0x0400,

    NSUnderlineByWord NS_ENUM_AVAILABLE(10_0, 7_0)            = 0x8000

在 2.7 中会对他们进行一个统一说明。

--------------------------------------------------------------------------------------------------

2.7 NSStrikethroughStyleAttributeName —— 删除线NSStrikethroughColorAttributeName —— 删除线颜色NSUnderlineStyleAttributeName —— 下划线NSUnderlineColorAttributeName —— 下划线颜色

代码：

- (void)strikethroughStyleAndUnderlineStyleTest {
   NSArray *textArr = @[@"NSUnderlineStyleNone样式", @"NSUnderlineStyleSingle样式", @"NSUnderlineStyleThick样式", @"NSUnderlineStyleDouble样式"];
   NSArray *colorArr = @[[UIColor blueColor], [UIColor redColor], [UIColor purpleColor], [UIColor whiteColor]];

   NSMutableAttributedString *attributeStr = [[NSMutableAttributedString alloc] init];

   //依次为每个字符串数组中的字符添加不同样式和不同颜色的删除线、下划线
   for (int i = 0; i < textArr.count; i++) {
       NSMutableAttributedString *singleAttributeStr = [[NSMutableAttributedString alloc]initWithString:textArr[i]];
       //设置删除线样式
       [singleAttributeStr addAttribute:NSStrikethroughStyleAttributeName value:@(i) range:NSMakeRange(0, ((NSString *)textArr[i]).length)];
       //设置删除线颜色
       [singleAttributeStr addAttribute:NSStrikethroughColorAttributeName value:colorArr[i] range:NSMakeRange(0, ((NSString *)textArr[i]).length)];

       //设置下划线样式
       [singleAttributeStr addAttribute:NSUnderlineStyleAttributeName value:@(i) range:NSMakeRange(0, ((NSString *)textArr[i]).length)];
       //设置下划线颜色
       [singleAttributeStr addAttribute:NSUnderlineColorAttributeName value:colorArr[i] range:NSMakeRange(0, ((NSString *)textArr[i]).length)];

       [attributeStr appendAttributedString:singleAttributeStr];
   }

   self.label.attributedText = attributeStr;
}

效果图：

删除线和下划线.png

2.8 NSStrokeColorAttributeName —— 描边颜色NSStrokeWidthAttributeName —— 描边宽度

注意事项：

• 描边颜色要搭配非0的描边宽度才会生效，如果只设置了描边颜色，描边宽度为0，则没有描边效果
• 描边宽度是正数，会对文字进行描边，但文字中心不填充（ 一种经典的空心文本样式是在该值为3.0）
• 描边宽度是负数，会对文字进行描边，而且会同时对文字中心进行填充（填充的颜色为文字本来的字体颜色）

代码：

- (void)strokeTest {
   // 给第一个label只设置描边颜色
   NSString *text1 = @"只设置描边颜色，没有设置描边宽度（默认为0），没有效果";
   NSMutableAttributedString *attributeStr1 = [[NSMutableAttributedString alloc] initWithString:text1 ];
   [attributeStr1 addAttribute:NSStrokeColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, text1.length)];
   self.label1.attributedText = attributeStr1;

   // 给第二个label设置描边宽度为正数3，不设置描边颜色
   NSString *text2 = @"将描边宽度设置为正数3，无描边颜色，具有空心效果哦，此时描边颜色默认成字体本来的颜色！";
   NSMutableAttributedString *attributeStr2 = [[NSMutableAttributedString alloc] initWithString:text2 ];
   [attributeStr2 addAttribute:NSStrokeWidthAttributeName value:@(3) range:NSMakeRange(0, text2.length)];
   self.label2.attributedText = attributeStr2;

   // 给第三个label设置描边宽度为正数3，描边颜色为红色
   NSString *text3 = @"将描边宽度设置为正数3，描边颜色为红色，具有空心效果哦，因为正数不对文字内部进行填充！";
   NSMutableAttributedString *attributeStr3 = [[NSMutableAttributedString alloc] initWithString:text3 ];
   [attributeStr3 addAttribute:NSStrokeColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, text3.length)];
   [attributeStr3 addAttribute:NSStrokeWidthAttributeName value:@(3) range:NSMakeRange(0, text3.length)];
   self.label.attributedText = attributeStr3;

   // 给第四个label设置描边宽度为负数-3，描边颜色为紫色
   NSString *text4 =  @"将描边宽度设置为负数-3，又设置描边颜色，无空心效果，因为负数会对文字内部进行填充！";
   NSMutableAttributedString *attributeStr4 = [[NSMutableAttributedString alloc] initWithString:text4 ];
   [attributeStr4 addAttribute:NSStrokeColorAttributeName value:[UIColor purpleColor] range:NSMakeRange(0, text4.length)];
   [attributeStr4 addAttribute:NSStrokeWidthAttributeName value:@(-3) range:NSMakeRange(0, text4.length)];
   self.label3.attributedText = attributeStr4;
}

效果图：

描边.png

2.9 NSShadowAttributeName —— 文本阴影

代码：

- (void)shadowTest {
   NSString *text = @"一个有阴影的文本！";
   NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:text];
   // 创建NSShadow实例
   NSShadow *shadow = [[NSShadow alloc] init];
   shadow.shadowColor = [UIColor purpleColor];
   shadow.shadowBlurRadius = 3.0;
   shadow.shadowOffset = CGSizeMake(0, 0.8);
   // 添加属性
   [attributeStr addAttribute:NSShadowAttributeName value:shadow range:NSMakeRange(0, text.length)];
   self.label.attributedText = attributeStr;
}

效果图：

NSShadowAttributeName.png

2.10 NSTextEffectAttributeName —— 文字效果

代码：

- (void)textEffectAttributeTest {
   NSString *text = @"我是没有文字效果的，你是有文字效果的！";
   NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:text];
   [attributeStr addAttribute:NSTextEffectAttributeName value:NSTextEffectLetterpressStyle range:NSMakeRange(10, text.length - 10)];
   self.label.attributedText = attributeStr;
}

效果图：

NSTextEffectAttributeName.png

2.11 NSLinkAttributeName —— 链接

注意：UILabel无法使用该属性, 但UITextView 控件可以使用，所以下面关于 NSLinkAttributeName 属性的代码也是使用 UITextView 来测试的。

代码：

// 注意：跳转链接要实现UITextView的这个委托方法
- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)url inRange:(NSRange)characterRange {
   return YES;
}

- (void)linkAttributeTest {
   NSString *text = @"点我跳转到百度哦！";
   NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:text];
   NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
   [attributeStr addAttribute:NSLinkAttributeName value:url range:NSMakeRange(0, text.length)];
   self.textView.attributedText = attributeStr;
}

效果图：

NSLinkAttributeName.png

点击链接后的页面.png

2.12 NSBaselineOffsetAttributeName —— 基础偏移量

注意：正值向上偏移，负值向下偏移，默认0（不偏移）

代码：

- (void)baselineOffsetAttributeName {
   NSString *text = @"正值向上偏移，无偏移效果，负值向下偏移！";
   NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:text];
   [attributeStr addAttribute:NSBaselineOffsetAttributeName value:@(10) range:NSMakeRange(0, 7)];
   [attributeStr addAttribute:NSBaselineOffsetAttributeName value:@(-10) range:NSMakeRange(13, text.length - 13)];
   self.label3.attributedText = attributeStr;
}

效果图：

NSBaselineOffsetAttributeName.png

2.13 NSObliquenessAttributeName —— 字体倾斜

注意：正值向右倾斜，负值向左倾斜， 默认0（不倾斜）

代码：

- (void)obliquenessTest {
   NSString *text = @"正值向右倾斜，无偏移效果，负值向左倾斜！";
   NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:text];
   [attributeStr addAttribute:NSObliquenessAttributeName value:@(1) range:NSMakeRange(0, 7)];
   [attributeStr addAttribute:NSObliquenessAttributeName value:@(-1) range:NSMakeRange(13, text.length - 13)];
   self.label.attributedText = attributeStr;
}

效果图：

NSObliquenessAttributeName.png

2.14 NSExpansionAttributeName —— 文本扁平化（横向拉伸）

注意：正值横向拉伸，负值横向压缩，默认0（不拉伸）

代码：

- (void)expansionAttributeTest {
   NSString *text = @"正值横向拉伸，无扁平效果，负值横向压缩！";
   NSMutableAttributedString * attributeStr = [[NSMutableAttributedString alloc] initWithString:text];
   [attributeStr addAttribute:NSExpansionAttributeName value:@(0.8) range:NSMakeRange(0, 7)];
   [attributeStr addAttribute:NSExpansionAttributeName value:@(-0.8) range:NSMakeRange(13, text.length - 13)];
   self.label.attributedText = attributeStr;
}

效果图：

NSExpansionAttributeName.png

3. 图文混排

应用场景：如果界面需要显示一串从后台拿到的一个文本，这个文本有长有短，要求文本后面要拼接一个图片，而且如果文本长度为超过一行，图片要跟在文本的最后面。此时就要求图片似乎作为一个文本一样，可以拼接在后台拿到的文本后面。类似这样的：

应用场景举例：图片在文字前面

应用场景举例：图片在文字中间

应用场景举例：图片在文字后面

这样的效果还是通过NSAttributedString类实现的。步骤：

1. 使用文本生成指定样式的AttributedString；
2. 使用图片生成AttributedString；
3. 将生成的AttributedString拼接起来。

• 参考代码：

// 1. 由文本生成attributedString
+ (NSAttributedString *)attributedStringWithText:(NSString *)text textColor:(UIColor *)color textFont:(UIFont *)font hasUnderlineStyle:(BOOL)hasUnderLineStyle lineSpacing:(float)line paragraphSpacing:(float)paragraph {
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    NSRange range = NSMakeRange(0, text.length);
    [paragraphStyle setLineSpacing:line];
    [paragraphStyle setParagraphSpacing:paragraph];
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];
    [attributedString addAttribute:NSForegroundColorAttributeName value:color range:range];
    [attributedString addAttribute:NSFontAttributeName value:font range:range];

    if (hasUnderLineStyle) {
        [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
    }

    return attributedString;
}

// 2. 由图片生成attributedString
+ (NSAttributedString *)attributedStringWithImage:(UIImage *)image imageBounds:(CGRect)bounds {
    NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
    textAttachment.image = image;
    textAttachment.bounds = CGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.width, bounds.size.height);
    NSAttributedString *attachmentAttributedString = [NSAttributedString attributedStringWithAttachment:textAttachment];

    return attachmentAttributedString;
}

// 3. 多个AttributedString拼接成一个resultAttributedString
+ (NSAttributedString *)jointAttributedStringWithItems:(NSArray *)items {
    NSMutableAttributedString *resultAttributedString = [[NSMutableAttributedString alloc] init];

    for (int i = 0; i < items.count; i++) {
        if ([items[i] isKindOfClass:[NSAttributedString class]]) {
            [resultAttributedString appendAttributedString:items[i]];
        }
    }

    return resultAttributedString;
}

图片在文字之后的调用方式：

- (void)initializeLabel:(UILabel *)label withText:(NSString *)text {
    // 传健文本的attributedString
    NSAttributedString *textAttributedString = [UILabel attributedStringWithText:text textColor:[UIColor blackColor] textFont:[UIFont systemFontOfSize:20] hasUnderlineStyle:NO lineSpacing:6 paragraphSpacing:16];

    // 创建图片的attributedString
    NSAttributedString *imageAttributedString = [UILabel attributedStringWithImage:[UIImage imageNamed:@"lovebook.png"] imageBounds:CGRectMake(0, -5, 109, 28)];

    // 将文本和图片的attributedString拼接成一个resultAttributedString
    NSAttributedString *resultAttributedString = [UILabel jointAttributedStringWithItems:@[textAttributedString, imageAttributedString]];

    // 将resultAttributedString赋值给label
    label.attributedText = resultAttributedString;
}

其他图片在文字前、在文字中的调用方式和上面的代码类似，这里不再赘述！

PS: 关于图文混排参考这篇文章, 写的很好，收获很大，感谢分享！

最后附一张属性表图：

image.png

谢谢你那么好看还能看我的文章到末尾处，祝陌生的你一切都好！