ios知识点总结富文本实现图文混排

ios知识点总结——富文本实现图文混排在iOS开发中经常会遇到一些图文混排的情况，特别是在微博类应用的开发过程中经常会遇到各种表情，各种链接的解析。笔者在实践开发中经历了几次这种类型的开发，由最开始的利用WebView进行布局到最后利用富文本进行布局，对该部分的开发积累了一定的经验，现对富文本与正则表达式混用实现图文混排进行总结：一.富文本WebView虽然也可以实现图文混排的效果，但是在使用的时候比较复杂，而且WebVIew的内存泄漏相当明显，使用不好反而得补偿失。现在很多的新闻类App都采用自己写的富文本进行图文混排。在很多情况下，富文本表现予外的是一个Label，将要显示的内容通过正则等封装成HTML字符串，然后显示在界面上，下面就是按照步骤实现这一功能：（1）先下载已经封装好的富文本标签类RCLabel（）该类是由一牛人封装好的用于实现图文混排的富文本类，在下载下来的源代码中可以看到其用法，但是这里有一个较为复杂的问题是你每次都需要手动将你要显示的内容封装成HTML格式的文本，这个过程相当繁琐而且容易出错，所以我在这个基础上进行了改进，将封装HTML的方法通过正则表达式独立开来，这样就实现了RCLabel与正则实现图文混排，以下是代码：将字符串转化成HTML的正则如下：.h文件#importFoundation/Foundation.h@interfaceHtmlString:NSString+(NSString*)transformString:(NSString*)originalStr;@end.m文件如下：#importHtmlString.h#importFoundation/NSObjCRuntime.h#importRegexKitLite.h@implementationHtmlString+(NSString*)transformString:(NSString*)originalStr{NSString*text=originalStr;//解析http://短链接NSString*regex_http=@http(s)?://([a-zA-Z|\\d]+\\.)+[a-zA-Z|\\d]+(/[a-zA-Z|\\d|\\-|\\+|_./?%&=]*)?;//http://短链接正则表达式NSArray*array_http=[textcomponentsMatchedByRegex:regex_http];if([array_httpcount]){for(NSString*strinarray_http){NSRangerange=[textrangeOfString:str];NSString*funUrlStr=[NSStringstringWithFormat:@ahref=%@%@/a,str,str];text=[textstringByReplacingCharactersInRange:NSMakeRange(range.location,str.length)withString:funUrlStr];}}//解析@NSString*regex_at=@@[\\u4e00-\\u9fa5\\w\\-]+;//@的正则表达式NSArray*array_at=[textcomponentsMatchedByRegex:regex_at];if([array_atcount]){NSMutableArray*test_arr=[[NSMutableArrayalloc]init];for(NSString*strinarray_at){NSRangerange=[textrangeOfString:str];if(![test_arrcontainsObject:str]){[test_arraddObject:str];NSString*funUrlStr=[NSStringstringWithFormat:@ahref=%@%@/a,str,str];text=[textstringByReplacingCharactersInRange:NSMakeRange(range.location,[strlength])withString:funUrlStr];}}[test_arrrelease];}//解析&NSString*regex_dot=@\\$\\*?[\u4e00-\u9fa5|a-zA-Z|\\d]{2,8}(\\((SH|SZ)?\\d+\\))?;//&的正则表达式NSArray*array_dot=[textcomponentsMatchedByRegex:regex_dot];if([array_dotcount]){NSMutableArray*test_arr=[[NSMutableArrayalloc]init];for(NSString*strinarray_dot){NSRangerange=[textrangeOfString:str];if(![test_arrcontainsObject:str]){[test_arraddObject:str];NSString*funUrlStr=[NSStringstringWithFormat:@ahref=%@%@/a,str,str];text=[textstringByReplacingCharactersInRange:NSMakeRange(range.location,[strlength])withString:funUrlStr];}}[test_arrrelease];}//解析话题NSString*regex_pound=@#([^\\#|.]+)#;//话题的正则表达式NSArray*array_pound=[textcomponentsMatchedByRegex:regex_pound];if([array_poundcount]){for(NSString*strinarray_pound){NSRangerange=[textrangeOfString:str];NSString*funUrlStr=[NSStringstringWithFormat:@ahref=%@%@/a,str,str];text=[textstringByReplacingCharactersInRange:NSMakeRange(range.location,[strlength])withString:funUrlStr];}}//解析表情NSString*regex_emoji=@\\[[a-zA-Z0-9\\u4e00-\\u9fa5]+\];//表情的正则表达式NSArray*array_emoji=[textcomponentsMatchedByRegex:regex_emoji];NSString*filePath=[[[NSBundlemainBundle]resourcePath]stringByAppendingPathComponent:@emotionImage.plist];NSDictionary*m_EmojiDic=[[NSDictionaryalloc]initWithContentsOfFile:filePath];//NSString*path=[NSStringstringWithFormat:@%@,[[NSBundlemainBundle]bundlePath]];if([array_emojicount]){for(NSString*strinarray_emoji){NSRangerange=[textrangeOfString:str];NSString*i_transCharacter=[m_EmojiDicobjectForKey:str];if(i_transCharacter){//NSString*imageHtml=[NSStringstringWithFormat:@imgsrc='file://%@/%@'width='12'height='12',path,i_transCharacter];NSString*imageHtml=[NSStringstringWithFormat:@imgsrc=%@,i_transCharacter];text=[textstringByReplacingCharactersInRange:NSMakeRange(range.location,[strlength])withString:[imageHtmlstringByAppendingString:@]];}}}[m_EmojiDicrelease];//返回转义后的字符串returntext;}@end那么在使用的时候如下：／／contentStr为你要显示的图文字符串NSString*str=[HtmlStringtransformString:contentStr];textLabel=[[RCLabelalloc]initWithFrame:CGRectMake(10,160,300,84)];textLabel.delegate=self;textLabel.sizeDelegate=self;[textLabelsetFont:[UIFontfontWithName:TextNamesize:15]];RCLabelComponentsStructure*componentsDS=[RCLabelextractTextStyle:textString];textLabel.componentsAndPlainText=componentsDS;CGSizeoptimalSize=[textLabeloptimumSize:YES];／／计算图文混排后的高度textLabel.frame=CGRectMake(10,180,300,optimalSize.height+5);textLabel.lineBreakMode=NSLineBreakByCharWrapping;textLabel.backgroundColor=[UIColorclearColor];textLabel.textColor=[UIColorcolorWithRed:33.0/255green:33.0/255blue:33.0/255alpha:1];[self.viewaddSubview:textLabel];如果你在实现图文混排时还有超链接、@、$等，在最后实现该类的代理方法-(void)RCLabel:(id)RCLabeldidSelectLinkWithURL:(NSString*)url{／／url为超链接的文字内容｝效果图如下：下面提供一个详细的图文混排的DEMO，该DEMO包含了AFJSONRequest的用法，异步加在图片的用法，以及RCLabel与正则表达的用法请点击下载效果图