iOS开发 关于图文混排

说到图文混排，马上想到的是用第三方的，RTLabel,RcLabel,coretext,等等一些方式。这些东西确实管用。可也得看数据源是什么。

我现在着手的项目，类似于讨论区，主要由帖子构成，图文混排不可避免。而返回的数据是带html的 ，数据字段是

message，在这里放个图会更加清楚：

红色箭头所指的就是图片，我需要做的就是把这段代码转化成图文混排。

我看了半天，发现一个规律：有图片的地方是html语言有"<img  id= "这样的东西，如果是表情则是 "<img src"。马上想到用正则表达式，把有这些的地方找出来 获取 NSRange  这样图片的位置就找到了。

然后在这个位置放入图片，完美！！！

扯淡！！！！

忽略了一个问题，我展示的内容肯定是剔除出html的，那这些NSRange已经不是之前的位置了。所以把片摆上去也是不行。

后来发现，在去除掉html语言之后有图片的位置会变为"\r\n\n\n\n\n\n\r\n"，这是和返回数据本身有关的东西。这时候一个解决的思路就是通过这些特殊的符号，把文本分开方法：

NSArray *components = [stringContent1componentsSeparatedByString:@"\r\n\n\n\n\n"];

这样的话就把一大段的字符分割开了。图片的URL是单独给出来的，所以只需要按顺序排列 字符串－图片－字符串－图片－。这个过程需要注意图片的个数和数组的count值之间的关系，不然程序很容易崩溃。

这时候需要做的就是按顺序排下来就行，label自适应然后放上图片。

如果想要图片点击放大，加上属性

 imageView.userInteractionEnabled =YES;

                _messageLabel.userInteractionEnabled =YES;

这个方法能够成功的前提是分割字符非常规律，那问题将会很简单。

然而，现实很残酷，有各种情况出现。你永远不知道下一个帖子的作者图片会怎么摆出来。所以只能节哀。

在此可以分享一下正则表达式和去除html语言的方法：

- (void *)rexget:(NSString *)staString{

   

    NSString *emotion =@"<img src=\\\"static/image/smiley/default/\\w+";

    // NSString *parten = @"(\\s)*(\\[)(\\s)*(self)(\\s)*(.)(\\s)*(label)(\\s)*(setText)(\\s)*(:)(\\s)*(@)(\\s)*(\".*\")(\\s)*(\\])(\\s)*(;)(\\s)*";

   NSError* error =NULL;

    

    NSRegularExpression *reg1 = [NSRegularExpressionregularExpressionWithPattern:emotionoptions:nilerror:&error];

    

    NSArray* match1 = [reg1matchesInString:staStringoptions:NSMatchingCompletedrange:NSMakeRange(0, [staStringlength])];

    

   if (match1.count !=0)

    {

       NSMutableString *str1 = [NSMutableStringstringWithString:staString];

       NSInteger  lastIndex =0;

       for (NSTextCheckingResult *matcin match1)

        {

           NSRange range = [matcrange];

          //  NSLog(@"%lu,%lu,%@",(unsigned long)range.location,(unsigned long)range.length,[staString substringWithRange:range]);

        }

    }

}

-(NSString *)filterHTML:(NSString *)html

{

   NSScanner * scanner = [NSScannerscannerWithString:html];

   NSString * text =nil;

   while([scannerisAtEnd]==NO)

    {

        //找到标签的起始位置

        [scanner scanUpToString:@"<"intoString:nil];

        //找到标签的结束位置

        [scannerscanUpToString:@">"intoString:&text];

       //替换字符

        html = [html stringByReplacingOccurrencesOfString:[NSStringstringWithFormat:@"%@>",text]withString:@""];

    }

    //    NSString * regEx = @"<([^>]*)>";

    //    html = [html stringByReplacingOccurrencesOfString:regEx withString:@""];

   return html;

}

效果图：

问题仍然存在，再接再厉

从上面的图可以看出 图和文字之间有大片的空白，解决这个问题很简单

 while([str11rangeOfString:@"\n\n"].length>0){

                [str11deleteCharactersInRange: [str11rangeOfString: @"\n\n"]];

            }

           while([str11rangeOfString:@"\r\n"].length>0){

                [str11deleteCharactersInRange: [str11rangeOfString: @"\r\n"]];

            }

str11为你所分割的字符串，通过这个过滤之后，内容便会变的紧凑

在这之后需要对承载这些子视图的_messageLabel的frame重新定义，这样才能保证加在图片上的手势不会出错。

这个问题的用了很长时间才找到。

    _messageLabel.frame =CGRectMake(_messageLabel.left,_userImage.bottom +10, _messageLabel.width, height);

最后：

相应的对行高进行一下改变之后，图文混排完美解决。

总结：

相对于一些第三方库来说，这个办法无疑是笨的，但却是最简单的。不需要倒入什么第三方的库。只是对label重新布局，也能更广泛的适用。

整个问题下来用了断断续续用了四天。找了很多第三方的东西，虽然没怎么用上，但也有一些收获。

之后再写一些关于他们的。

至此！