OS开发小记：iOS富文本框架DTCoreText在UITableView上的使用

Posted 2021-02-05 zzfx

要在页面中显示自己的布局，比如文字的字体和颜色、图文并排的样式，我们要用iOS SDK的原生UI在app本地搭建，如果一个页面需要在服务器端获取数据的话，我们也要在本地搭建好固定的布局，解析服务器传回的Json数据去进行填充。但是如果一个页面的布局是不固定的话，比如一个web页面，用HTML与CSS封装，我们通常会使用UIWebView进行处理。但是这样处理等于是是把某一个页面纯粹当成了Web页面进行渲染，在移动app开发中，这样的情况被称为“非原生”，不仅会失去渲染速度和交互体验，当一个页面上既有服务器传回的HTML与CSS样式又有原生的UI控件时，UIWebView就会变得特别不好处理，与其他UI控件间的通信也显得很不协调。

        UIWebView处理不好这种问题的原因，是因为它遵循浏览器解析web页面的方式：即逐句解析 。这种解析方式类似于解释型语言，或称脚本语言，只需要下载整段代码中的一部分代码就可以渲染出效果。这不同于一般意义上的编译型语言，如C、C++、Objective-C等，它是在运行的阶段去进行翻译，因此会丧失很多的效率。此外，苹果还为它的webview提供了很多强大的功能，除了最基本的渲染网页上的文字、图片、视频以及交互外，它甚至还可以直接渲染doc、pdf、excel、ppt等一系列常用的文件格式。这么强大的一个控件对系统资源的占用可想而知。

         解决这个问题的办法是：把Html+Css字符串直接由服务器传到本地，调用iOS/OS X底层的渲染引擎CoreText去进行渲染。换句话说，这种渲染方式是轻量级的，它去掉了许多Web渲染的繁杂步骤和功能，直接根据Html+Css去渲染图片、文字的样式。当然，根据你的需求，你也可以决定是否处理超链接和显示视频等。

        如下图所示，网易新闻客户端等很多流行的app就是采用类似的方法：

        在这个页面中，布局肯定是不确定，因为所有的文章都是由网易的网编用某种富文本编辑器编写的，虽然会对移动端做一些优化。而下方又有原生的UITableViewCell（评论、其他新闻）以及UIButton等控件，在这种情况下用一个WebView嵌入肯定是不恰当的。

        非常感谢来自澳洲的Oliver Drobnik，秉着开源和分享的精神，为我们提供了完美的框架——DTCoreText。DTCoreText就是笔者所要使用的这种轻量级的Html+Css样式的解析框架。

        以下是在GitHub上的地址以及文档：

            GitHub：https://github.com/Cocoanetics/DTCoreText

            接口文档说明：https://docs.cocoanetics.com/DTCoreText/

        笔者推荐用CocoaPods对DTCoreText进行导入。因为在GitHub上下载的demo中会缺一个子工程：DTFoundation。你还得把这个子工程导入到原工程中。另外如果你想研究以下DTCoreText的底层实现，可以看看下面这篇文章：http://blog.cnbang.net/tech/2630/ 。下面笔者就最近开发遇到的问题做一些总结。

       

        如上图所示，左图的布局中最上部是一个UIImageView，下面是一个分Section的UITableView，包括右图所示的显示评论条目的tableview。下部的评论框是一个单独的UIView控件。在第二个cell中能看到带样式的文字和图片，这个cell就是使用了DTCoreText的结果。在这里，主要是使用

        以下是部分核心代码：

• @interface DiscoverDetailViewController ()<DiscoverDetailTableViewCellDelegate,DTAttributedTextContentViewDelegate>
•     BOOL _useStaticRowHeight;
• //    NSArray *_snippets;
• NSString * const AttributedTextCellReuseIdentifier = @"AttributedTextCellReuseIdentifier";

 

cellCache类似于tableview的缓存池，用于存放已经生成过的cell

• - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
•     else if (indexPath.section == 2)
•         DTAttributedTextCell *dtcell = (DTAttributedTextCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];

 

在上面这个确定cell的方法中，省略号部分是其他没有用到DTAttributedTextCell的处理逻辑，可以不破坏这些逻辑，而在你指定的某个indexpath中用到DTCoreText的处理逻辑：类似于tableview的缓存池一样的处理方法。

 

• - (DTAttributedTextCell *)tableView:(UITableView *)tableView preparedCellForIndexPath:(NSIndexPath *)indexPath
•     // workaround for ios 5 bug
•     NSString *key = [NSString stringWithFormat:@"%ld-%ld", (long)indexPath.section, (long)indexPath.row];
•     DTAttributedTextCell *cell = [cellCache objectForKey:key];
•         if ([self _canReuseCells])
•             cell = (DTAttributedTextCell *)[tableView dequeueReusableCellWithIdentifier:AttributedTextCellReuseIdentifier];
•             cell = [[DTAttributedTextCell alloc] initWithReuseIdentifier:AttributedTextCellReuseIdentifier];
•         cell.accessoryType = UITableViewCellAccessoryNone;
•         cell.hasFixedRowHeight = _useStaticRowHeight;
•         // cache it, if there is a cache
•         [cellCache setObject:cell forKey:key];
•     [self configureCell:cell forIndexPath:indexPath];
• - (void)configureCell:(DTAttributedTextCell *)cell forIndexPath:(NSIndexPath *)indexPath
• //    NSDictionary *snippet = [_snippets objectAtIndex:indexPath.row];
•     NSString *html = [_dataDictionary objectForKey:@"content"];
•     [cell setHTMLString:html];
•     [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
•     cell.attributedTextContextView.shouldDrawImages = YES;
•     cell.attributedTextContextView.delegate = self;
•     cell.attributedTextContextView.backgroundColor = [ANGUIColorPlus colorWithHexString:@"#efeff4"];

• - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
•     else if(section == 2)
•         DTAttributedTextCell *cell = (DTAttributedTextCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
•         return [cell requiredRowHeightInTableView:tableView];

 

 

       看到上面这三个方法，笔者感觉非常熟悉，DTCoreText非常遵循UITableView原本的设计方法，对cell的重用管理做得很好。而且，关于确定高度的方法DTAttributedTextCell也给出了一个封装好的自适应高度的方法，使用起来非常方便。

 

•     // reuse does not work for variable height
•     if ([self respondsToSelector:@selector(tableView:heightForRowAtIndexPath:)])
•     // only reuse cells with fixed height

 

       上面这个方法用于判断适应当前高度的cell是否可重用，如果可以重用就不需要重新加载了。

       此外，如果要加载图片，还需要实现下面这个代理方法：

• #pragma mark - DTAttributedTextContentViewDelegate
• - (UIView *)attributedTextContentView:(DTAttributedTextContentView *)attributedTextContentView viewForAttachment:(DTTextAttachment *)attachment frame:(CGRect)frame{
•     if([attachment isKindOfClass:[DTImageTextAttachment class]]){
•         CGFloat aspectRatio = frame.size.height / frame.size.width;
•         CGFloat width = dUISize_Screen_Width - 16*2;
•         CGFloat height = width * aspectRatio;     
•         UIView *View = [[UIView alloc] initWithFrame:frame];
•         UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,width,height)];
•         imageView.backgroundColor = [UIColor grayColor];
•         [imageView sd_setImageWithURL:attachment.contentURL placeholderImage:dImage_loadPicDefault_LongSquare options:EMSDWebImageProgressiveDownload];
•         imageView.canClick = YES;
•         imageView.contentMode = UIViewContentModeScaleAspectFit;
•         [View addSubview:imageView];

 

          这个代理方法会根据当前要显示图片的url和frame返回一个用于显示图片的UIView。笔者在这里使用SDWebImage作为显示网络图片的方式。然后添加一个UIImageView在View上，这样做可以根据屏幕的大小按比例缩放要显示的图片，以适应显示。

 

            以上就是实现在UITableView上使用DTCoreText的主要过程。加载的过程很快，滑动时也不会实现卡顿，很流畅。

 

https://blog.csdn.net/lala2231/article/details/50780842