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

要在页面中显示自己的布局,比如文字的字体和颜色、图文并排的样式,我们要用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就是采用类似的方法:

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

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

        在这个页面中,布局肯定是不确定,因为所有的文章都是由网易的网编用某种富文本编辑器编写的,虽然会对移动端做一些优化。而下方又有原生的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/ 。下面笔者就最近开发遇到的问题做一些总结。

       

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

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

        如上图所示,左图的布局中最上部是一个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

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

上一篇:android 创建view间关系


下一篇:移动端js弹出层滚动的时候 body层不可滚动的解决办法