通过RTLabel、RCLabel、FTCoreText及webView结合SDWebImage等4种方式实现左滑或下拉中cell中图文混排使用场景方案

0.简单的RCLable使用 项目中有段信息中包含html格式的数据，但又不能用uiwebview来显示，只能用uilabel来显示，但是uilabel又不支持显示html格式，所以从网上找了一个能显示html的rclabel...很不错...   rclabel下载地址:https://github.com/Janak-Nirmal/RichContentLabel   使用方式: 把RCLabel.h和RCLabel.m加入到项目中，在m文件中有一个RegexKitLite.h引用，可去掉没看到有使用这个的地方，如果不想去把RegexKitLite.h、RegexKitLite.m这两个文件再加入到项目中，然后设置-fno-objc-arc   Objective-c代码  收藏代码       RCLabel* info = [[RCLabel alloc] initWithFrame:CGRectMake(10,0,300,100)];       [info setFont:[UIFont boldSystemFontOfSize:14]];       info.componentsAndPlainText = [RCLabel extractTextStyle:content];       CGSize optimalSize = [info optimumSize];   //计算图文混排后的高度       info.frame = CGRectMake(info.frame.origin.x, info.frame.origin.y, info.frame.size.width, optimalSize.height);//保持原来Label的位置和宽度，只是改变高度。

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

1.RTLabel和RCLabel两个在使用方式上差不多，对服务端吐的的数据要求比较高

   json数据最好是定制式
   {"type","img",con:"http://www.xxx.com/123.png", “width":"300", "height":"300"}
   {"type","text",con:"图片名称", “width":"", "height":""}

  类似这种方式去对cell中的每一项进行遍历显,部分代码实例如下:

导入RTLabel

#import "RTLabel.h"

在UITableViewCell中实现如下代码

[html]  view plain copy

1. - (void)layoutSubviews  
2. {  
3.     [super layoutSubviews];  
4.       
5.     CGSize optimumSize = [self.rtLabel optimumSize];  
6.     CGRect frame = [self.rtLabel frame];  
7.     frame.size.height = (int)optimumSize.height+20; // +5 to fix height issue, this should be automatically fixed in iOS5  
8.       
9.     [self.rtLabel setFrame:frame];  
10. }  

/**
 * 初始化
 */

[html]  view plain copy

1. - (void)setupView{  
2.       
3.     //没有分隔线  
4.     self.selectionStyle = UITableViewCellSeparatorStyleNone;  
5.     self.backgroundColor = [UIColor clearColor];  
6.     self.contentView.backgroundColor = [UIColor clearColor];  
7.       
8.     self.rtLabel = [PostTextCell textLabel];  
9.     self.rtLabel.userInteractionEnabled = YES;  
10.     self.rtLabel.delegate = self;  
11.     [self.contentView addSubview:self.rtLabel];      
12. }  

/**
 * 设置内容样式
 */

[html]  view plain copy

1. + (RTLabel*)textLabel  
2. {  
3.     RTLabel *rtLabel = [[RTLabel alloc] initWithFrame:CGRectMake(10,0,300,100)];  
4.     rtLabel.backgroundColor = [UIColor clearColor];  
5.     rtLabel.lineBreakMode = NSLineBreakByWordWrapping;  
6.     rtLabel.textColor = [[UIColor alloc]initWithRed:50.0f/255.0f green:50.0f/255.0f blue:50.0f/255.0f alpha:1.0f];  
7.     rtLabel.font = [UIFont systemFontOfSize:16];  
8.     rtLabel.linkAttributes = [NSDictionary dictionaryWithObject:@"#4595CB"  forKey:@"color"];  
9.     rtLabel.selectedLinkAttributes = [NSDictionary dictionaryWithObject:@"#4595CB" forKey:@"color"]; //BEBEBE  
10.     //rtLabel.selectedLinkAttributes = [NSDictionary dictionaryWithObject:@"#darkGray" forKey:@"color"];  
11.     rtLabel.textAlignment = NSTextAlignmentLeft;  
12.     [rtLabel setParagraphReplacement:@""];  
13.       
14.     return rtLabel;  
15. }  

[html]  view plain copy

1. /**  
2.  * 获取内容高度  
3.  */  
4. + (float)getHeightWithData:(NSString *)aData{  
5.     RTLabel *rtLabel = [PostTextCell textLabel];  
6.     [rtLabel setText:[NSString stringWithFormat:@"%@",aData]];  
7.     CGSize optimumSize = [rtLabel optimumSize];  
8.     return optimumSize.height+10;  
9. }  

另一种RCLabel的实现方式和RTLabel方法基本一样，当遇到图片时

最好单起图片的cell用SDWebImage显示即可，代码如下:

#import "ImgCell.h"

[html]  view plain copy

1. /**  
2.  * 图片cell视图初始化  
3.  */  
4. - (void)setupView{  
5.       
6.     //没有选择效果  
7.     self.selectionStyle = UITableViewCellSeparatorStyleNone;  
8.     self.backgroundColor = [UIColor clearColor];  
9.     self.contentView.backgroundColor = [UIColor clearColor];  
10.       
11.     //图片展示  
12.     _imgView = [[JzbNetImageView alloc] initWithFrame:CGRectMake(10, IMGVIWE_TOP, IMGVIEW_WIDTH, IMGVIEW_HEIGHT)];  
13.     [self.contentView addSubview:_imgView];  
14.     _imgView.userInteractionEnabled = YES;  
15.       
16.     //加点击处理  
17.     _tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapInImgView:)];  
18.     [_imgView addGestureRecognizer:_tapGesture];  
19. }  

/**
 * 下载图片并按比例缩放
 */

[html]  view plain copy

1. - (NSString *)updateImgCellWithItem:(Item *)aItem pushViewController:(id)viewController  
2. {  
3.       
4.     _postItem = aItem;  
5.     _pushViewController = viewController;  
6.       
7.     NSString *imgURL;  
8.       
9.       
10.     //图片展示(图片宽高进行处理)  
11.     if (aItem.width>0 && aItem.height>0) {  
12.               
13.         /** 获取图片等比例缩放值 **/  
14.         CGSize size = [self scaleSize:aItem.width aHeight:aItem.height];  
15.               
16.         _imgView.frame = CGRectMake((FD_SCREEN_MAIN_WIDTH-size.width)/2, IMGVIWE_TOP, size.width, size.height);  
17.         imgURL = [NSObject JzbGetAttachImgAttachID:aItem.atthID postID:aItem.threadID width:size.width height:size.height];  
18.     }else{  
19.               
20.        _imgView.frame = CGRectMake(10, IMGVIWE_TOP, IMGVIEW_WIDTH, IMGVIEW_HEIGHT);  
21.        imgURL = [NSObject JzbGetAttachImgAttachID:aItem.atthID postID:aItem.threadID width:300 height:0];  
22.     }  
23.     
24.     SDWebImageManager *manager = [SDWebImageManager sharedManager];  
25.     [manager downloadImageWithURL:[NSURL URLWithString:imgURL]  
26.                                   options:SDWebImageRefreshCached  
27.                                  progress:nil  
28.                                 completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {  
29.                                       
30.                                     if (finished && [error code]>=0) {  
31.                                         _imgView.image = image;  
32.                                         _errorCode = NO;  
33.                                         _imgView.userInteractionEnabled = YES;  
34.                                     }else{  
35.                                         _imgView.image = [UIImage imageNamed:@"bg_img_loading.png"];  
36.                                         _errorCode = YES;  
37.                                         _imgView.userInteractionEnabled = NO;  
38.                                     }  
39.                                 }];  
40.   
41.     return imgURL;  
42. }  

[html]  view plain copy

1. /**  
2.  * 图片等比例缩放  
3.  */  
4. - (CGSize)scaleSize:(NSInteger)aWidth aHeight:(NSInteger)aHeight  
5. {  
6.     int h = aHeight;  
7.     int w = aWidth;  
8.     CGSize _size;  
9.     if(h <= (FD_SCREEN_MAIN_HEIGHT-20) && w <= (FD_SCREEN_MAIN_WIDTH-20)){  
10.         _size = CGSizeMake(w, h);  
11.     }else{  
12.       
13.         float b = (float)(FD_SCREEN_MAIN_WIDTH-20)/w < (float)(FD_SCREEN_MAIN_HEIGHT-20)/h? (float)(FD_SCREEN_MAIN_WIDTH-20)/w : (float)(FD_SCREEN_MAIN_HEIGHT-20)/h;  
14.         _size = CGSizeMake(b*w, b*h);  
15.     }  
16.       
17.     return _size;  
18. }  

[html]  view plain copy

1. /**  
2.  * 大图显示  
3.  */  
4. - (void)tapInImgView:(id)sender{  
5.       
6.     NSString *imgUrl;  
7.     if ([_postItem.con hasPrefix:@"http"]) {  
8.         imgUrl = _postItem.con;  
9.     }else{  
10.         imgUrl = [NSObject SDGetAttachImgAttachID:_postItem.atthID postID:_postItem.threadID];  
11.     }  
12.       
13.     if (imgUrl.length > 0 && _errorCode == NO) {  
14.         FullScreenImageView *fullView = [[FullScreenImageView alloc] initWithImage:_imgView.image inFrame:self.window.bounds withThumbnailImageFrame:[_imgView convertRect:_imgView.bounds toView:self.window] andOriginUrl:[NSURL URLWithString:imgUrl]];  
15.         [self.window addSubview:fullView];  
16.         [UIApplication sharedApplication].statusBarHidden = YES;  
17.     }  
18. }  

通过以上代码实现可以实现以下效果：

2.FTCoreText相对RTLabel和RCLabel相对新一些，能对复杂的Json格式中数据项进行定制
   像类似下图这样交果就比较灵活，部分代码实例如下

[html]  view plain copy

1. /**  
2.  * 初始化  
3.  */  
4. - (void)viewDidLoad  
5. {  
6.     [super viewDidLoad];  
7.       
8.     scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];  
9.     scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;  
10.     coreTextView = [[FTCoreTextView alloc] initWithFrame:CGRectMake(20, 20, 280, 0)];  
11.     coreTextView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;  
12.       
13.     //设置内容  
14.     [coreTextView setText:[self textForView]];  
15.       
16.     //设置样式  
17.     [coreTextView addStyles:[self coreTextStyle]];  
18.       
19.     //设置代理  
20.     [coreTextView setDelegate:self];  
21.       
22.     //设置内容和高度  
23.     [coreTextView fitToSuggestedHeight];  
24.   
25.     [scrollView addSubview:coreTextView];  
26.     [scrollView setContentSize:CGSizeMake(CGRectGetWidth(scrollView.bounds), CGRectGetHeight(coreTextView.frame) + 40)];  
27.       
28.     [self.view addSubview:scrollView];  
29. }  
30.   
31. /**  
32.  * 设置html中的内容样式  
33.  */  
34. - (NSArray *)coreTextStyle  
35. {  
36.     NSMutableArray *result = [NSMutableArray array];  
37.       
38.     FTCoreTextStyle *defaultStyle = [FTCoreTextStyle new];  
39.     defaultStyle.name = FTCoreTextTagDefault;    //thought the default name is already set to FTCoreTextTagDefault  
40.     defaultStyle.font = [UIFont fontWithName:@"TimesNewRomanPSMT" size:16.f];  
41.     defaultStyle.textAlignment = FTCoreTextAlignementJustified;  
42.     [result addObject:defaultStyle];  
43.       
44.       
45.     FTCoreTextStyle *titleStyle = [FTCoreTextStyle styleWithName:@"title"]; // using fast method  
46.     titleStyle.font = [UIFont fontWithName:@"TimesNewRomanPSMT" size:40.f];  
47.     titleStyle.paragraphInset = UIEdgeInsetsMake(0, 0, 25, 0);  
48.     titleStyle.textAlignment = FTCoreTextAlignementCenter;  
49.     [result addObject:titleStyle];  
50.       
51.     FTCoreTextStyle *imageStyle = [FTCoreTextStyle new];  
52.     imageStyle.paragraphInset = UIEdgeInsetsMake(0,0,0,0);  
53.     imageStyle.name = FTCoreTextTagImage;  
54.     imageStyle.textAlignment = FTCoreTextAlignementCenter;  
55.     [result addObject:imageStyle];  
56.     [imageStyle release];  
57.       
58.     FTCoreTextStyle *firstLetterStyle = [FTCoreTextStyle new];  
59.     firstLetterStyle.name = @"firstLetter";  
60.     firstLetterStyle.font = [UIFont fontWithName:@"TimesNewRomanPS-BoldMT" size:30.f];  
61.     [result addObject:firstLetterStyle];  
62.     [firstLetterStyle release];  
63.       
64.     FTCoreTextStyle *linkStyle = [defaultStyle copy];  
65.     linkStyle.name = FTCoreTextTagLink;  
66.     linkStyle.color = [UIColor orangeColor];  
67.     [result addObject:linkStyle];  
68.     [linkStyle release];  
69.       
70.     FTCoreTextStyle *subtitleStyle = [FTCoreTextStyle styleWithName:@"subtitle"];  
71.     subtitleStyle.font = [UIFont fontWithName:@"TimesNewRomanPS-BoldMT" size:25.f];  
72.     subtitleStyle.color = [UIColor brownColor];  
73.     subtitleStyle.paragraphInset = UIEdgeInsetsMake(10, 0, 10, 0);  
74.     [result addObject:subtitleStyle];  
75.       
76.     FTCoreTextStyle *bulletStyle = [defaultStyle copy];  
77.     bulletStyle.name = FTCoreTextTagBullet;  
78.     bulletStyle.bulletFont = [UIFont fontWithName:@"TimesNewRomanPSMT" size:16.f];  
79.     bulletStyle.bulletColor = [UIColor orangeColor];  
80.     bulletStyle.bulletCharacter = @"❧";  
81.     [result addObject:bulletStyle];  
82.     [bulletStyle release];  
83.       
84.     FTCoreTextStyle *italicStyle = [defaultStyle copy];  
85.     italicStyle.name = @"italic";  
86.     italicStyle.underlined = YES;  
87.     italicStyle.font = [UIFont fontWithName:@"TimesNewRomanPS-ItalicMT" size:16.f];  
88.     [result addObject:italicStyle];  
89.     [italicStyle release];  
90.       
91.     FTCoreTextStyle *boldStyle = [defaultStyle copy];  
92.     boldStyle.name = @"bold";  
93.     boldStyle.font = [UIFont fontWithName:@"TimesNewRomanPS-BoldMT" size:16.f];  
94.     [result addObject:boldStyle];  
95.     [boldStyle release];  
96.       
97.     FTCoreTextStyle *coloredStyle = [defaultStyle copy];  
98.     [coloredStyle setName:@"colored"];  
99.     [coloredStyle setColor:[UIColor redColor]];  
100.     [result addObject:coloredStyle];  
101.     [defaultStyle release];  
102.       
103.     return  result;  
104. }  
105.   
106.   
107.   
108. /**  
109.  * FTCoreTextViewDelegate  
110.  */  
111. - (void)coreTextView:(FTCoreTextView *)acoreTextView receivedTouchOnData:(NSDictionary *)data {  
112.       
113.     CGRect frame = CGRectFromString([data objectForKey:FTCoreTextDataFrame]);  
114.       
115.     if (CGRectEqualToRect(CGRectZero, frame)) return;  
116.       
117.     frame.origin.x -= 3;  
118.     frame.origin.y -= 1;  
119.     frame.size.width += 6;  
120.     frame.size.height += 6;  
121.     UIView *view = [[UIView alloc] initWithFrame:frame];  
122.     [view.layer setCornerRadius:3];  
123.     [view setBackgroundColor:[UIColor orangeColor]];  
124.     [view setAlpha:0];  
125.     [acoreTextView.superview addSubview:view];  
126.     [UIView animateWithDuration:0.2 animations:^{  
127.         [view setAlpha:0.4];  
128.     } completion:^(BOOL finished) {  
129.         [UIView animateWithDuration:0.5 animations:^{  
130.             [view setAlpha:0];  
131.         }];  
132.     }];  
133.       
134.     return;  
135.       
136.     NSURL *url = [data objectForKey:FTCoreTextDataURL];  
137.     if (!url) return;  
138.     [[UIApplication sharedApplication] openURL:url];  
139. }  

注:内容中的标签必须是定制，必要时需求用正则替换一下图片，如将:<img src="http://www.baidu.com/img/123.png">的图片url正则出来通过SDWebImage下载到本地

取出下载地址，在Library/Cacehes/download/kdlkaklklfkakfaasfklafalksf.png,替换后的格式如下:

[html]  view plain copy

1. <_image>app绝对路径/Library/Cacehes/download/kdlkaklklfkakfaasfklafalksf.png</_image>  

即可显示

3.有一种情况复杂情况下，使用上述三种RTLabel、RCLabel、FTCoreText都不会达到很好的控制，
   就是在内容中有大量网络图片，像UIView显示的大量数学公式类的图片，这种情况使用
  UIWebView结合CSS控制会达到比较好的效果如图,部分代码如下:

[html]  view plain copy

1. //预加载webView视图到_webViewAry  
2.         _webView = [[FDWebView alloc] initWithFrame:CGRectMake(FD_SCREEN_MAIN_WIDTH*i, 61, FD_SCREEN_MAIN_WIDTH, FD_SCREEN_SHOW_HEIGHT)];  
3.         [_webView setBackgroundColor:[UIColor whiteColor]];  
4.         _webView.tag = 2000+i;  
5.         [_webView setDataDetectorTypes:UIDataDetectorTypeNone];  
6.         [_webView setOpaque:YES];  
7.           
8.         //webView滚动条控制  
9.         [(UIScrollView *)[[_webView subviews] objectAtIndex:0] setBounces:NO];  
10.         _webView.scrollView.bounces = NO;  
11.         _webView.scrollView.alwaysBounceHorizontal = NO;  
12.         _webView.scrollView.showsHorizontalScrollIndicator = NO;  
13.         _webView.scrollView.showsVerticalScrollIndicator = YES;  
14.         [_webViewAry addObject:_webView];  

[html]  view plain copy

1. /**  
2.  * 核心考点图文混排处理  
3.  */  
4. - (void)setCoreTestValueForDic:(BookTopicObject *)aTopicObject autoHeight:(BOOL)autoHeight  
5. {  
6.     //汇总创建HTML主体  
7.     NSMutableString *_conString = [NSMutableString stringWithString:@"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /><meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' /><style type='text/css'>@import url('weibo.css');</style></head><body>"];  
8.       
9.     for (TopicSectionObject *_sectionObject in aTopicObject.sectionAry) {  
10.           
11.         if (![_sectionObject.text isEqualToString:@""]) {  
12.             NSString *content = [HtmlString transformString:_sectionObject.text];  
13.               
14.             //解析  
15.             [_conString appendFormat:@"<div class='titHead'><p class='title'>%@</p></div>", _sectionObject.title];  
16.       
17.             //描述  
18.             NSMutableString *_tmpStr = [NSMutableString stringWithString:content];  
19.             [_conString appendFormat:@"<div class='txtConts'>%@</div><div class='xdbox' style='height:40px;'></div>", _tmpStr];  
20.         }  
21.     }  
22.       
23.     //_conString = (NSMutableString *)[_conString stringByReplacingOccurrencesOfString:@"<br />" withString:@""];  
24.       
25.     //结尾  
26.     [_conString appendString:@"</body></html>"];  
27.       
28.     [self setHTMLForString:_conString];  
29.       
30.     //是否自适应高度  
31.     if (autoHeight) {  
32.           
33.         CGFloat _height = 0.0f;  
34.           
35.         //正文  
36.         _height += [_conString sizeWithFont:[UIFont systemFontOfSize:16] constrainedToSize:CGSizeMake(300, MAXFLOAT) lineBreakMode:NSLineBreakByWordWrapping].height;  
37.           
38.         [self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, _height)];  
39.     }  
40. }  

[html]  view plain copy

1. /**  
2.  * 格式化字符串  
3.  */  
4. + (NSString *)transformString:(NSString *)originalStr  
5. {  
6.     //originalStr = [NSString stringWithFormat:@"中国人<img src='b966133768a30e1cbddfcf5db8e2ca16'  />%@<img src='http://www.kankanews.com/ICkengine/wp-content/themes/wsxcm3.0/images/logo.png'  />",originalStr];  
7.       
8.     NSString *text = originalStr;  
9.       
10.     //获取图片url地址并保存  
11.     static NSString *_apiUrl;  
12.     if (_apiUrl == nil) {  
13.         _apiUrl = [[[NSObject SDGetConfig] objectForKey:@"apiUrl"] copy];  
14.     }  
15.       
16.     //解析img的src  
17.     NSString *regTags = @"<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>";  
18.       
19.     NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:regTags  
20.                                                                           options:NSRegularExpressionCaseInsensitive    // 还可以加一些选项，例如：不区分大小写  
21.                                                                             error:nil];  
22.       
23.     NSArray* match = [regex matchesInString:text options:0 range:NSMakeRange(0, [text length])];  
24.     if (match.count != 0)  
25.     {  
26.         NSMutableString *_targetImageHtml;  
27.         for (NSTextCheckingResult *matc in match)  
28.         {  
29.             NSRange range = [matc range];  
30.               
31.             //原图片img的html  
32.             NSString *_tmpString = [originalStr substringWithRange:range];  
33.               
34.             NSString *_regEx = @"<img[^>]+src=['\"](.*?)['\"][^>]*>";  
35.             NSString *_keyString = [_tmpString stringByReplacingOccurrencesOfRegex:_regEx withString:@"$1"];  
36.               
37.             if (![_keyString hasPrefix:@"http://"]) {  
38.                   
39.                 //新url  
40.                 _targetImageHtml = [NSMutableString stringWithFormat:@"<img src='%@/atth/m/%@_0_15.png' />", _apiUrl, _keyString];  
41.                   
42.                 //替换url  
43.                 text = [text stringByReplacingOccurrencesOfString:_tmpString withString:[NSString stringWithFormat:@"%@ ", _targetImageHtml]];  
44.             }else{  
45.                   
46.                 _targetImageHtml = [NSMutableString stringWithFormat:@"<img src='%@' />",  _keyString];  
47.                 text = [text stringByReplacingOccurrencesOfString:_tmpString withString:[NSString stringWithFormat:@"%@ ", _targetImageHtml]];  
48.             }  
49.         }  
50.     }  
51.   
52.     return text;  
53. }  

[html]  view plain copy

1. /**  
2.  * 显示html赋值数据  
3.  */  
4. -(void)setHTMLForString:(NSString *)string  
5. {  
6.     [self loadHTMLString:string baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle] resourcePath] isDirectory: YES]];  
7. }  

效果如下，文字和图片样式还得CSS控制一下，像对齐格式，图片位置等:

最后，以下各种显示图文混排的方式，得根据我们在开发app的实际的不同需求，再选择一个最佳方案
就OK了，图文混排中还要考虑cell内容显示效率的问题，图片最好采用异步多线程预下载处理，这样体验上
会更好一些。