<原>DTCoreText学习(三)－自定义DTAttributedTextCell

原创博文，未经作者允许，不允许转载

DTCoreText自带的DTAttributedTextCell在显示html的时候  会占用整个cell的大小，当我们需要的形式比较灵活的时候，或者想在cell上自定义添加更多的东西的时候  DTAttributedTextCell 就会变的不够用 需要我门根据DTAttributedTextCell的原理，自己写一个cell  

例如 我们希望cell左边是一个图片，然后右边剩下的区域是一个DTAttributedTextContentView用来显示html 这个图片在点击cell的时候会改变

步骤

1.首先 仍然是将DTCoreText添加到我们自己的工程文件中

2.创建UITableViewCell的子类 MyCell.h MyCell.m

MyCell.h

@interface MyCell : UITableViewCell
{
   
     IBOutlet UIImageView *imageView;
     IBOutlet DTAttributedTextContentView *_attributedTextContextView;
}

@property(nonatomic,retain)UIImageView *imageView;

@property (nonatomic, strong) NSAttributedString *attributedString;
@property (nonatomic, readonly) DTAttributedTextContentView *attributedTextContextView;
- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier accessoryType:(UITableViewCellAccessoryType)accessoryType;

- (void)setHTMLString:(NSString *)html;

- (CGFloat)requiredRowHeightInTableView:(UITableView *)tableView;

@end

storyboard中 左边是图片  右边是UIView  将其class设为DTAttributedTextContentView  

将cell的class设置为MyCell

并且 都与MyCell进行连接

这样当我们调用mycell的 setHTMLString:(NSString*)html方法时候  实际上是在设置右边的attributedTextContextView.attributedString  为我们解析过后的string  然后显示出来

MyCell.m

直接将DTAttributedTextCell.m中的所有代码代码复制过来即可 但是要更改几处地方

#import "MyCell.h"
#import "DTCoreText.h"
#import "DTAttributedTextCell.h"
@implementation MyCell
{
    
    NSAttributedString *_attributedString;
    //DTAttributedTextContentView *_attributedTextContextView;   //改动1
    
    NSUInteger _htmlHash; // preserved hash to avoid relayouting for same HTML
}
@synthesize attributedString = _attributedString;
@synthesize attributedTextContextView = _attributedTextContextView;

@synthesize imageView;   //添加这一句  改动2

在.m文件中 ｛｝中的属性是私有属性  由于我们在MyCell.h中声明了 DTAttributedTextContentView *_attributedTextContextView;   所以这里不用再次声明

 

- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier accessoryType:(UITableViewCellAccessoryType)accessoryType
{
    self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
    if (self) 
    {
        // don't know size jetzt because there's no string in it
        
        //_attributedTextContextView = [[DTAttributedTextContentView alloc] init];
        //_attributedTextContextView.frame=CGRectMake(100, 100, 40, 50);
        
        _attributedTextContextView.edgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);
        
    //    [self.contentView addSubview:_attributedTextContextView];
       
        
        
        
    }
    return self;
}

这里面注释掉的代码是 原来的cell  由于DTAttributedTextCell 没有用storyboard或者 xib 所以 它上面的

DTAttributedTextContentView 是用代码  在初始化的时候 addSubView上去的  我们的MyCell 是用storyboard显式创建的

所以这里面不用这些初始化代码  

这时需要更改的几个地方 其他的直接复制过来即可

3.在tableView中引用MyCell

这里只贴出关键部分代码

- (void)configureCell:(MyCell *)cell forIndexPath:(NSIndexPath *)indexPath
{
    
    NSString *html=[array objectAtIndex:indexPath.row];
    [cell setHTMLString:html];
    cell.imageView.image=[UIImage imageNamed:@"XX"];
    
    cell.attributedTextContextView.shouldDrawImages = YES;
}

- (MyCell *)tableView:(UITableView *)tableView preparedCellForIndexPath:(NSIndexPath *)indexPath
{
        //DTCoreTest Demo 中的源代码  这里将 其注释掉 
    //static NSString *cellIdentifier = @"name";
    
    if (!cellCache)
    {
        cellCache = [[NSCache alloc] init];
    }
    
    // workaround for iOS 5 bug
    NSString *key = [NSString stringWithFormat:@"%d-%d", indexPath.section, indexPath.row];
    
    MyCell *cell = [cellCache objectForKey:key];
    
    if (!cell)
    { 
        // reuse does not work for variable height
        //cell = (DTAttributedTextCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
        
        if (!cell)
        {
                        //DTCoreTest Demo 中的源代码  这里将 其注释掉 
            //cell = [[MyCell alloc] initWithReuseIdentifier:cellIdentifier accessoryType:UITableViewCellAccessoryDisclosureIndicator];
            //这一句是引用我们自定义的cell的重点代码
            cell=[tableView dequeueReusableCellWithIdentifier:@"name"];
           
            
        }
        
        // cache it
        [cellCache setObject:cell forKey:key];
    }
    
    [self configureCell:cell forIndexPath:indexPath];
    
    return cell;
}

// disable this method to get static height = better performance
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    MyCell *cell = (MyCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
    //下面一句是非常重要的一句代码
    return  cell.attributedTextContextView.frame.size.height+10;
   //DTCoreTest Demo 中的源代码  这里将 其注释掉 改为上面一句
    //return [cell requiredRowHeightInTableView:tableView];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    MyCell *cell = (MyCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
    
    return cell;
}

填充数据方面的代码比较简单  这里就不贴出来了

这时后点击运行  显示如下图所示

很明显出现了错误，  DTAttributedTextContentView 仍然占据整个cell   而imageView  就是那个A  显示的位置正确 但却因为

DTAttributedTextContentView 占据整个cell  而导致其覆盖在上面  并没有按照我们设计布局的  左边显示 A  右边显示html

但是有一点是确定的     自适应高度没有问题

我们先来分析一下tableView中 那些关键代码的  运行流程

首先调用

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    MyCell *cell = (MyCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
     
    return  cell.attributedTextContextView.frame.size.height+10;
   
    //return [cell requiredRowHeightInTableView:tableView];
}

来确定每一个cell的高度  

在这里面继续调用

- (MyCell *)tableView:(UITableView *)tableView preparedCellForIndexPath:(NSIndexPath *)indexPath
{
    //static NSString *cellIdentifier = @"name";
    
    if (!cellCache)
    {
        cellCache = [[NSCache alloc] init];
    }
    
    // workaround for iOS 5 bug
    NSString *key = [NSString stringWithFormat:@"%d-%d", indexPath.section, indexPath.row];
    
    MyCell *cell = [cellCache objectForKey:key];
    
    if (!cell)
    {
        // reuse does not work for variable height
        //cell = (DTAttributedTextCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
        
        if (!cell)
        {
            //cell = [[MyCell alloc] initWithReuseIdentifier:cellIdentifier accessoryType:UITableViewCellAccessoryDisclosureIndicator];
            cell=[tableView dequeueReusableCellWithIdentifier:@"name"];
           
            
        }
        
        // cache it
        [cellCache setObject:cell forKey:key];
    }
    
    [self configureCell:cell forIndexPath:indexPath];
    
    return cell;
}

这个方法中 有两句核心代码  其他的都是一些缓存相关 看一下代码很好理解

cell=[tableView dequeueReusableCellWithIdentifier:@"name"];

[self configureCell:cell forIndexPath:indexPath];

第一句  是在缓存中没有可取的 cell的时候 从tableView的可重用队列中取出一个cell实例（可参考《自定义UITableViewCell的理解一文》）

第二句 是配置cell  接下来看看  这个方法的代码

- (void)configureCell:(MyCell *)cell forIndexPath:(NSIndexPath *)indexPath
{
    
    NSString *html=[array objectAtIndex:indexPath.row];
    [cell setHTMLString:html];
    cell.imageView.image=[UIImage imageNamed:@"xxx"];7     
    cell.attributedTextContextView.shouldDrawImages = YES;
}

这里面是初始化cell上的图片 以及DTAttributedTextContentView

核心代码是[cell setHTMLString:html];  前面有介绍 

通过单步跟踪调试  跟踪以后的调用流程

这里先进入setHTMLString

- (void)setHTMLString:(NSString *)html
{
    // we don't preserve the html but compare it's hash
    NSUInteger newHash = [html hash];
    
    if (newHash == _htmlHash)
    {
        return;
    }
    
    _htmlHash = newHash;
    
    NSData *data = [html dataUsingEncoding:NSUTF8StringEncoding];
    NSAttributedString *string = [[NSAttributedString alloc] initWithHTML:data documentAttributes:NULL];
    self.attributedString = string;
}

这一段的核心代码是最后一句   前面大部分都是对html的处理 包括解析等等 如果单步跟踪进入

会发现  

NSAttributedString *string = [[NSAttributedString alloc] initWithHTML:data documentAttributes:NULL];调用的很

深 很深 里面包括对html的各种处理  解析 等等  

在跟踪的时候发现了设置 显示的html的字体大小的方法  

在DTHTMLAttributedStringBuilder.m中 的 buildString方法中 找到textScale  变量  更改其值变能更改显示在cell上的字体的大小 

接着调用最后一句 self.attributedString = string  由于MyCell.m重写了setAttributedString 方法所以调用之

- (void)setAttributedString:(NSAttributedString *)attributedString
{
    if (_attributedString != attributedString)
    {
        _attributedString = attributedString;
        
        // passthrough
        _attributedTextContextView.attributedString = _attributedString;
    }
}

很显然 这里面的最后一句是最重要的代码  只要设置DTAttributedTextContentView 的attributedString 为解析好的要显示的

html   便能直接显示出来

这里继续单步跟踪进入  会进入DTAttributedTextContentView 的一系列方法中  而这些方法是揭开 为什么没有按照我门设计的布局显示的线索

DTAttributedTextContentView.m

- (void)setAttributedString:(NSAttributedString *)string
{
    if (_attributedString != string)
    {
        
        _attributedString = [string copy];
        
        // new layout invalidates all positions for custom views
        [self removeAllCustomViews];
        
        [self relayoutText];
    }
}

我门关心的是为什么我们设计的DTAttributedTextContentView  是在左边的区域  但是 运行的时候却充满正的cell  这肯定与

最后一句代码有关   relayoutText

继续跟踪  进入了最重要的方法  也是解决问题的关键方法  relayoutText

 

- (void)relayoutText
{
    // Make sure we actually have a superview before attempting to relayout the text.
    if (self.superview) {
        // need new layouter
        self.layouter = nil;
        self.layoutFrame = nil;
        
        // remove all links because they might have merged or split
        [self removeAllCustomViewsForLinks];
        
        if (_attributedString)
        {
            // triggers new layout
            
            CGSize neededSize = [self sizeThatFits:self.bounds.size];
           
            // set frame to fit text preserving origin
            // call super to avoid endless loop
            [self willChangeValueForKey:@"frame"];
            super.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, neededSize.width, neededSize.height);
            
            
            [self didChangeValueForKey:@"frame"];
        }
        
        [self setNeedsDisplay];
        [self setNeedsLayout];
    }
}

分析这段代码 我们看出 

CGSize neededSize = [self sizeThatFits:self.bounds.size];

super.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, neededSize.width, neededSize.height);

这两句是关键代码    设置尺寸的话应该是在这两句完成

首先第句话  得到了  neededSize(需求的尺寸  即显示自己的完整html需要的尺寸) 

第二句 利用得到的neededSize 设置 super.frame  出问题 应该是在  第一句得到的 neededSize 有问题

经过NSlog 打印 neededSize 的值后  确实  是得到的neededSize.width为整个cell的 宽度 进而 设置super.frame 为整个cell的

宽度   

跟踪第一句代码  进入sizeThatFits方法

- (CGSize)sizeThatFits:(CGSize)size
{
    if (size.width==0)
    {
        size.width = self.bounds.size.width;
    }
    
    CGSize neededSize = CGSizeMake(size.width, CGRectGetMaxY(self.layoutFrame.frame) + edgeInsets.bottom);
    
    
    return neededSize;
}

我们注意到 sizeThatFits 这个方法 需要传入一个参数(CGSize)   这里面  利用这个参数size.width 作为 

DTAttributedTextContentView 的宽度  也就是用来显示html的DTAttributedTextContentView的宽度为size.width

然后根据这个宽度 以及html  计算出DTAttributedTextContentView的高度    计算高度的所有代码全部在

CGRectGetMaxY(self.layoutFrame.frame) + edgeInsets.bottom  中   

我们只需要知道   如果我们传入的size 的宽度越宽 计算出来的 高度会越小，反之亦然，最后得到的neededSize 包含了我们规定的宽度  以及计算的高度

在这里NSLog size.width 发现 传入的宽度是 整个cell的宽度

回到上一层方法relayoutText 

CGSize neededSize = [self sizeThatFits:self.bounds.size];   传入的值是 self.bounds.size

NSlog后确实 self.bounds.size.width 为整个cell的宽度

所以得到的 neededSize  宽度为整个cell的宽度  

最后设置super.frame  的时候 便充满了整个cell

解决办法：CGSize neededSize = [self sizeThatFits:self.bounds.size];这一句代码传入正确的size  可以去storyboard中看一下 自己设置的 DTAttributedTextContentView 的宽度  以及高度  然后创建一个size 传入 方法中

最后要注意的一点

super.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, neededSize.width, neededSize.height);

改为

self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, neededSize.width, neededSize.height);

方法中的self.frame.origin.x ＝0；  所以 要想实现  我们设计的效果  这里不能为0   为0的话会紧挨着右边   比如cell宽度

为1024    DTAttributedTextContentView 的宽度为 824   那么 用200  替代self.frame.origin.x即可

修改后的代码

- (void)relayoutText
{
    // Make sure we actually have a superview before attempting to relayout the text.
    if (self.superview) {
        // need new layouter
        self.layouter = nil;
        self.layoutFrame = nil;
        //NSLog(@"%f",self.frame.size.width);
        // remove all links because they might have merged or split
        [self removeAllCustomViewsForLinks];
        
        if (_attributedString)
        {
            // triggers new layout
            CGSize size=CGSizeMake(612, 44);
            
            CGSize neededSize = [self sizeThatFits:size];
           
            // set frame to fit text preserving origin
            // call super to avoid endless loop
            [self willChangeValueForKey:@"frame"];
          
            self.frame=CGRectMake(156, self.frame.origin.y, neededSize.width, neededSize.height);
            
            [self didChangeValueForKey:@"frame"];
        }
        
        [self setNeedsDisplay];
        [self setNeedsLayout];
    }
}

这样便实现了我们的需求

截至到目前分析的这么多方法  只是从

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    MyCell *cell = (MyCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
     
    return  cell.attributedTextContextView.frame.size.height+10;
   
    //return [cell requiredRowHeightInTableView:tableView];
}

中第一句代码一路调用 深入分析的   

当第一句代码最后深入调用结束  回到这里的时候 很显然  我们已经计算出了neededSize 并且将

DTAttributedTextContentView 的frame的大小也设置为合适的大小  然后  下一句

return cell.attributedTextContextView.frame.size.height+10;

通过直接读取 便可获得合适的高度给cell  

到目前为止  甚至没有执行

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 

方法 但是 已经把所有的html显示了一遍 

当tableView 运行到

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    MyCell *cell = (MyCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];
    
    return cell;
}

方法时   与heightForRowAtIndexPath:  方法是记本相同的   只不过 这次在

MyCell *cell = (MyCell *)[self tableView:tableView preparedCellForIndexPath:indexPath];

方法中 cell不是创建出来的  而是直接从缓存中提取 的  这也是为什么  不会出现加载延迟的原因

原创博文，未经作者允许，不允许转载