(一一一)图文混排基础 -利用正则分割和拼接属性字符串

前端之家收集整理的这篇文章主要介绍了(一一一)图文混排基础 -利用正则分割和拼接属性字符串前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

很多时候需要用到图文混排,例如聊天气泡中的表情,空间、微博中的表情,例如下图:

红心和文字在一起。

比较复杂的情况是表情夹杂在文字之间。

要实现这种功能,首先要介绍iOS中用于显示属性文字的类。

用于文字显示的类除了text属性之外,还有attributedText属性,这个属性是NSAttributedString类型,通过这个属性可以实现不同文字的不同字体、颜色甚至把图片作为文字显示功能

下面介绍这个字符串的使用。


以一条微博内容为应用场景,介绍如何从中找出表情、话题等内容,其中表情替换成表情图片,话题等高亮显示

这里用到的内容主要有:正则表达式、NSAttributedString、NSTextAttachment等知识。

【正则表达式】

正则表达式在上一节(一一〇)正则表达式的基本使用与RegexKitLite的使用中有介绍,主要是为了找出所有特殊位置和非特殊位置。

NSAttributedString

这是一种能够对特定范围的文字设置属性显示图片功能

下面介绍通过普通字符串初始化NSAttributedString,并且把其中的表情([<表情名称>])、话题(#<话题内容>#)、URL全部高亮的方法

①通过微博字符串text初始化一个属性字符串。

 NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:text];
②指定匹配规则。

 NSString *emotionPattern = @"\\[[a-zA-Z\\u4e00-\\u9fa5]+\\]";
 NSString *topicPattern = @"#[0-9a-zA-Z\\u4e00-\\u9fa5]+#";
 NSString *urlPattern = @"[a-zA-z]+://[^\\s]*";
 NSString *pattern = [NSString stringWithFormat:@"%@|%@|%@",emotionPattern,topicPattern,urlPattern];
③对匹配到的范围进行高亮,只需要调用NSMutableAttributedString的addAttribute:::属性对特定范围的文字设置颜色属性

 [text enumerateStringsMatchedByRegex:pattern usingBlock:^(NSInteger captureCount,NSString *const __unsafe_unretained *capturedStrings,const NSRange *capturedRanges,volatile BOOL *const stop) {
        
   [attributedText addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:*capturedRanges];
        
 }];

通过这样的方法,所有匹配到的范围都会被标红。

④设置控件的attributedText属性为上面创建的attributedText值即可。


NSTextAttachment

NSTextAttachment可以设置image和bounds来指定图片和尺寸,并且可以包装成NSAttributedString,这是图文混排的基础。

下面介绍创建一个包含小图片的NSTextAttachment,并且用NSAttributedString包装的方法

调整bounds的x、y可以修正图片在字符串中的位置。

 NSTextAttachment *attach = [[NSTextAttachment alloc] init];
 attach.image = [UIImage imageNamed:@"avatar_vgirl"];
 attach.bounds = CGRectMake(0,-3,15,15);
 NSAttributedString *emotionStr = [NSAttributedString attributedStringWithAttachment:attach];

【将字符串中的表情部分替换为表情图片

为了简单,把所有表情位置的内容都替换为一张图片avatar_vgirl。

有一个自然的思路是调用attributedText的replace方法,把表情替换成图片(NSAttributedString包装的NSTextAttachment)。但是这个方法是有问题的。

例如下面的句子:

今天发送了[笑cry]一件很有意思的事情[笑cry]。

替换第一个表情[笑cry]为图片时,字符串的长度可能会发生变化,此时再处理第二个表情时计算出的位置可能就是错误的,因此应该先找到所有的表情位置然后统一替换。

因此我们可以用RegexKitLite的两个方法,分别找出匹配的和未匹配的,把他们存起来,然后按照位置的先后排序,最后按顺序拼接,拼接时对于表情换成图片,其他特殊字符高亮,余下的正常显示

因为我们要把文字和范围全部放入数组,因此应该定义一个模型,为了方便起见,设置两个成员用于存储当前部分是不是表情、是不是特殊内容

模型的代码如下:

@interface TextSegment : NSObject

@property (nonatomic,copy) NSString *text;
@property (nonatomic,assign) NSRange range;
@property (nonatomic,assign,getter=isSpecial) BOOL special;
@property (nonatomic,getter=isEmotion) BOOL emotion;

@end

假设text是微博的全部内容,下面的代码实现把特殊内容和非特殊内容全部放入数组,并且判断是否是表情,表情的特点是有[ ],利用hasPrefix:和hasSufix:判断。

    NSString *emotionPattern = @"\\[[a-zA-Z\\u4e00-\\u9fa5]+\\]";
    NSString *topicPattern = @"#[0-9a-zA-Z\\u4e00-\\u9fa5]+#";
    NSString *urlPattern = @"[a-zA-z]+://[^\\s]*";
    NSString *pattern = [NSString stringWithFormat:@"%@|%@|%@",urlPattern];
    
    // 把[表情]替换成attachment图片,不能用replace和insert,因为会改变后面的相对位置,应该先拿到所有位置,最后再统一修改。
    // 应该打散特殊部分和非特殊部分,然后拼接。
    NSMutableArray *parts = [NSMutableArray array];
    [text enumerateStringsMatchedByRegex:pattern usingBlock:^(NSInteger captureCount,volatile BOOL *const stop) {
        
        if ((*capturedRanges).length == 0) return;
        
        TextSegment *seg = [[TextSegment alloc] init];
        seg.text = *capturedStrings;
        seg.range = *capturedRanges;
        seg.special = YES;
        
        seg.emotion = [seg.text hasPrefix:@"["] && [seg.text hasSuffix:@"]"];
        
        [parts addObject:seg];
        
    }];
    
    [text enumerateStringsSeparatedByRegex:pattern usingBlock:^(NSInteger captureCount,volatile BOOL *const stop) {
        
        if ((*capturedRanges).length == 0) return;
       
        TextSegment *seg = [[TextSegment alloc] init];
        seg.text = *capturedStrings;
        seg.range = *capturedRanges;
        seg.special = NO;
        [parts addObject:seg];
        
    }];
通过上面的代码,我们把所有的文字部分都放入了parts数组中,为了拼接方便,我们应该按照位置的起始排序,从前到后依次拼接。

这就需要对parts数组依据模型的range.location属性排序,比较常用的是根据block排序。

block传入两个数组中的对象obj1、obj2,要求返回排序规则NSOrderedAscending、NSOrderedSame、NSOrderedDescending。

NSOrderedAscending指的是obj1<obj2,系统默认按照升序排序,因此为了实现升序,发现obj1<obj2应该返回NSOrderedAscending。

 [parts sortUsingComparator:^NSComparisonResult(id obj1,id obj2) {
        
        TextSegment *ts1 = obj1;
        TextSegment *ts2 = obj2;
        
        // Descending指的是obj1>obj2
        // Ascending指的是obj1<obj2
        // 要实现升序,按照上面的规则返回。

        // 系统默认按照升序排列。
        if (ts1.range.location < ts2.range.location) {
            return NSOrderedAscending;
        }
        
        return NSOrderedDescending;
        
 }];

接下来只需要从前到后拼接一个新创建的NSAttributedString,根据内容的不同拼接不同的内容

 NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] init];
 NSInteger cnt = parts.count;
 for (NSInteger i = 0; i < cnt; i++) {
      TextSegment *ts = parts[i];
      if (ts.isEmotion) {
          NSTextAttachment *attach = [[NSTextAttachment alloc] init];
          attach.image = [UIImage imageNamed:@"avatar_vgirl"];
          attach.bounds = CGRectMake(0,15);
          NSAttributedString *emotionStr = [NSAttributedString attributedStringWithAttachment:attach];
          [attributedText appendAttributedString:emotionStr];
      }else if(ts.isSpecial){
          NSAttributedString *special = [[NSAttributedString alloc] initWithString:ts.text attributes:@{NSForegroundColorAttributeName:[UIColor redColor]}];
          [attributedText appendAttributedString:special];
      }else{
          [attributedText appendAttributedString:[[NSAttributedString alloc] initWithString:ts.text]];
      }
 }
最后把这个attributedText设置到控件上。


【计算NSAttributedString的尺寸】

①之前的text,计算尺寸的代码如下:需要指定字体和范围限制,一般是限制宽度,高度不限制(设置为MAXFLOAT),这样可以计算出正确的多行尺寸。

 CGSize contentSize = [text sizeWithFont:ContentFont constrainedToSize:CGSizeMake(MaxW,MaxH)]
②对于NSAttributedString,也有方法用于计算尺寸, 注意计算之前必须为attributedText设定字体

 [attributedText addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:14] range:NSMakeRange(0,attributedText.length)];
然后调用boundingRectWithSize:::计算尺寸,注意options必须选择options:NSStringDrawingUsesLineFragmentOrigin才能得到正确尺寸。

 CGSize contentSize = [attributedText boundingRectWithSize:CGSizeMake(maxWidth,maxHeight) options:NSStringDrawingUsesLineFragmentOrigin context:nil].size;

猜你在找的正则表达式相关文章