objective-c 回顾总结---NSMutableAttributedString的使用

NSMutableAttributedString是objective-c中处理富文本的一个类，满足于平常开发中一些基本的富文本显示，如果需要更复杂的显示，就需要使用coreText框架进行开发。

NSMutableAttributedString是NSAttributedString的子类，使用它，可以对文中进行一些特殊的处理。

1、设置文字前后显示font和color不一样，这在日常的开发中是经常使用到的：

- (NSMutableAttributedString*)returnAttributedText:(NSString*)stg {
    NSMutableAttributedString *aStg = [[NSMutableAttributedString alloc]initWithString:stg];
    
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:17] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:36] range:NSMakeRange(0, 3)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 3)];
    return aStg;
}

Simulator Screen Shot - iPhone 12 - 2021-05-18 at 11.42.18.png

2、插入图片

如下图，遇到这样的设计，该怎么布局：

是用一个UIImageView加个Label，可能会说用UIButton可以设置，如果宽度够，但是如果要显示的图片在中间，在尾端呢？咋办？这个时候，还是得用NSMutableAttributedString，想插入在哪里就哪里，上代码：

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UILabel *textLabel;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _textLabel = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 150, 90)];
    _textLabel.attributedText = [self returnAttributedText:@"UILabel" insertImage:[UIImage imageNamed:@"data_dataType"] imageIndex:0 imageBounds:CGRectMake(0, 0, 46, 46)];
    [self.view addSubview:_textLabel];

}
- (NSMutableAttributedString*)returnAttributedText:(NSString*)stg
                                       insertImage:(UIImage*)image
                                        imageIndex:(NSInteger)index imageBounds:(CGRect)bounds
{
    NSMutableAttributedString *aStg = [[NSMutableAttributedString alloc]initWithString:stg];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:17] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:36] range:NSMakeRange(0, 3)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 3)];
    NSTextAttachment *attachment = [[NSTextAttachment alloc]init];
    attachment.image = image;
    attachment.bounds = bounds;
    NSAttributedString *imageStg = [NSAttributedString attributedStringWithAttachment:attachment];
    [aStg insertAttributedString:imageStg atIndex:index];
    return aStg;
}
@end

Simulator Screen Shot - iPhone 12 - 2021-05-18 at 13.58.20.png

然而这里显示有点问题，就是图片和后面的小字体文字没有居中，下面就做一些属性添加，先调整小字体居中：

- (NSMutableAttributedString*)returnAttributedText:(NSString*)stg
                                       insertImage:(UIImage*)image
                                        imageIndex:(NSInteger)index imageBounds:(CGRect)bounds
{
    NSMutableAttributedString *aStg = [[NSMutableAttributedString alloc]initWithString:stg];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:17] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:36] range:NSMakeRange(0, 3)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 3)];
    NSTextAttachment *attachment = [[NSTextAttachment alloc]init];
    attachment.image = image;
    attachment.bounds = bounds;
    NSAttributedString *imageStg = [NSAttributedString attributedStringWithAttachment:attachment];
    [aStg insertAttributedString:imageStg atIndex:index];
    /*
     设置小字体显示居中
     **/
    [aStg addAttribute:NSBaselineOffsetAttributeName value:@(5) range:NSMakeRange(aStg.length - 5, 5)];

    return aStg;
}

添加NSBaselineOffsetAttributeName属性设置，根据range得到要显示居中的小字体文字。
通过调整image的bound使图片居中，这里的Y轴是反向的，所以设置的时候要注意：

    _textLabel.attributedText = [self returnAttributedText:@"回顾总结学习研究" insertImage:[UIImage imageNamed:@"data_dataType"] imageIndex:0 imageBounds:CGRectMake(0, -15, 46, 46)];

Simulator Screen Shot - iPhone 12 - 2021-05-18 at 14.16.12.png

3、给文字添加下划线、删除线。

咋样，是不是好看多了，也顺眼多了。下面就在文字上添加一条删除线，这种操作在电商的应用中常用到：

- (NSMutableAttributedString*)returnAttributedText:(NSString*)stg
                                       insertImage:(UIImage*)image
                                        imageIndex:(NSInteger)index imageBounds:(CGRect)bounds
{
    NSMutableAttributedString *aStg = [[NSMutableAttributedString alloc]initWithString:stg];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:17] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, stg.length)];
    [aStg addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:36] range:NSMakeRange(0, 3)];
    [aStg addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 3)];
    NSTextAttachment *attachment = [[NSTextAttachment alloc]init];
    attachment.image = image;
    attachment.bounds = bounds;
    NSAttributedString *imageStg = [NSAttributedString attributedStringWithAttachment:attachment];
    [aStg insertAttributedString:imageStg atIndex:index];
    /*
     设置小字体显示居中
     **/
    [aStg addAttribute:NSBaselineOffsetAttributeName value:@(5) range:NSMakeRange(aStg.length - 5, 5)];
    /*
     设置删除线
     **/
    [aStg addAttribute:NSStrikethroughStyleAttributeName value:@1 range:NSMakeRange(0, stg.length)];
    
    /*
     设置删除线颜色。默认会根据显示的文字颜色进行改变
     **/
    [aStg addAttribute:NSStrikethroughColorAttributeName value:[UIColor blackColor] range:NSMakeRange(0, stg.length)];

    return aStg;
}

Simulator Screen Shot - iPhone 12 - 2021-05-18 at 14.47.43.png

上面显示，因为有插入图片的原因，导致删除线不能覆盖到最后一个文字，使用下滑线的时候也会出现同样的问题。

    /*
     设置下划线
     **/
    [aStg addAttribute:NSUnderlineStyleAttributeName value:@(NSUnderlineStyleSingle) range:NSMakeRange(0, stg.length)];
    /*
     设置下划线颜色。默认会根据显示的文字颜色进行改变
     **/
    [aStg addAttribute:NSUnderlineColorAttributeName value:[UIColor blackColor] range:NSMakeRange(0, stg.length)];

Simulator Screen Shot - iPhone 12 - 2021-05-18 at 14.54.44.png

4、给文字添加URL超链接事件。
在文字中有一段URL地址，要求点击可以跳转到这个URL的web页面，这个在电商APP中也是常见需求。

- (void)setupURLString {
    UITextView *textView = [[UITextView alloc]initWithFrame:CGRectMake(100, 100, 180, 46)];
    NSDictionary *linkDic = @{NSFontAttributeName:[UIFont systemFontOfSize:17],NSForegroundColorAttributeName:[UIColor redColor]};
    textView.linkTextAttributes = linkDic;
    textView.dataDetectorTypes =  UIDataDetectorTypeLink;
    textView.delegate = self;
    textView.editable = NO;
    NSMutableAttributedString *aStg = [[NSMutableAttributedString alloc]initWithString:@"百度"];
    [aStg addAttribute:NSLinkAttributeName value:[NSURL URLWithString:@"https://www.baidu.com"] range:[[aStg string] rangeOfString:@"百度"]];
    textView.attributedText = aStg;
    [self.view addSubview:textView];
}

注意，需要使用UITextView才能配套使用这个功能。

截屏2021-05-18 下午3.32.28.png

以上只是开发中遇到的一些需求，NSMutableAttributedString还有许多其它优秀的功能，后期有用到再持续更新中。