<原>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不是創建出來的  而是直接從緩存中提取 的  這也是為什么  不會出現加載延遲的原因

 

原創博文，未經作者允許，不允許轉載