UITableView+FDTemplateLayoutCell 框架学习（cell动态计算高度）

介绍

UITableView+FDTemplateLayoutCell 是一个由国人团队开发的优化计算 UITableViewCell 高度的轻量级框架（ GitHub 地址），由于实现逻辑简明清晰，代码也不复杂，非常适合作为新手学习其他著名却庞大的开源项目的“入门教材”。

开发者之一的阳神也通过一篇 博客介绍了 UITableViewCell 高度计算（尤其是 autoLayout 自动高度计算）的方方面面。总结一下的话就是：

1. iOS8 之前虽然采用 autoLayout 相比 frame layout 得手动计算已经简化了不少（设置 estimatedRowHeight 属性并对约束设置正确的 cell 的 contentView 执行 systemLayoutSizeFittingSize: 方法），但还是需要一些模式化步骤，同时还可能遇到一些蛋疼的问题比如 UILabel 折行时的高度计算；
2. iOS8 推出 self-sizing cell 后，一切都变得轻松无比——做好约束后，直接设置 estimatedRowHeight 就好了。然而事情并不简单，一来我们依然需要做 iOS7 的适配，二来 self-sizing 并不存在缓存机制，不论何时都会重新计算 cell 高度，导致 iOS8 下页面滑动时会有明显的卡顿。

因此，这个框架的目的，引用阳神的原话，就是“既有 iOS8 self-sizing 功能简单的 API，又可以达到 iOS7 流畅的滑动效果，还保持了最低支持 iOS6”。

注意：这篇文章只进行框架中最主要的 autoLayout 部分介绍，frame layout 部分请自行查看框架说明。

使用

1.引用 UITableView+FDTemplateLayoutCell.h 类；

2.如果是用代码或 XIB 创建的 cell，需要先进行注册（类似 UICollectionView）:

[objc]  view plain  copy

1. - (void)registerClass:(nullableClass)cellClassforCellReuseIdentifier:(NSString *)identifier;  
2. - (void)registerNib:(nullableUINib *)nibforCellReuseIdentifier:(NSString *)identifier;  

3.在 tableView: heightForRowAtIndexPath: 代理方法中调用以下三个方法之一完成高度获取：

[objc]  view plain  copy

1. /* 
2.    identifier 即 cell 的 identifier； 
3.    configuration block 中的代码应与数据源方法 tableView: cellForRowAtIndexPath: 中对 cell 的设置代码相同 
4.    方法内部将根据以上两个参数创建与 cell 对应的 template layout cell，这个 cell 只进行高度计算，不会显示到屏幕上 
5. */  
6.    
7.    
8. // 返回计算好的高度(无缓存)  
9. - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifierconfiguration:(void (^)(idcell))configuration;  
10.    
11.    
12. // 返回计算好的高度，并根据 indexPath 内部创建与之相应的二维数组缓存高度  
13. - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByIndexPath:(NSIndexPath *)indexPathconfiguration:(void (^)(idcell))configuration;  
14.    
15.    
16. // 返回计算好的高度，内部创建一个字典缓存高度并由使用者指定 key  
17. - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByKey:(id<NSCopying>)keyconfiguration:(void (^)(idcell))configuration;  

一般来说 cacheByIndexPath: 方法最为“傻瓜”，可以直接搞定所用问题。cacheByKey: 方法稍显复杂（需要关注数据刷新），但在缓存机制上相比 cacheByIndexPath: 方法更为高效。因此，像类似微博、新闻这种会拥有唯一标识的 cell 数据模型，更建议使用cacheByKey: 方法。

4.数据源变动时的缓存处理是个值得关注的问题。

对于 cacheByIndexPath: 方法，框架内对 9 个触发 UITableView 刷新机制的公有方法分别进行了处理，保证缓存数组的正确；同时，还提供了一个 UITableView 分类方法：

[objc]  view plain  copy

1. - (void)fd_reloadDataWithoutInvalidateIndexPathHeightCache;  

用于需要刷新数据但不想移除原有缓存数据（框架内对 reloadData 方法的处理是清空缓存）时调用，比如常见的“下拉加载更多数据”操作。

对于 cacheByKey: 方法，当 cell 高度发生改变时，必须手动处理：

[objc]  view plain  copy

1. // 移除 key 对应的高度缓存  
2. [tableView.fd_keyedHeightCacheinvalidateHeightForKey:key];  
3. // 移除所有高度缓存  
4. [tableView.fd_keyedHeightCacheinvalidateAllHeightCache];  

如果需要查看 debug 打印信息，设置 fd_debugLogEnabled 属性：

[objc]  view plain  copy

1. tableView.fd_debugLogEnabled = YES;  

框架也为 UITableViewHeaderFooterView 设计了相应方法，因为和 UITableViewCell 相似，这里就不另行介绍了。

框架分析

由于采用了分类机制，因此框架中大量使用 runtime 的关联对象（Associated Object）进行公有和私有变量的实现，不了解的童鞋可以网上搜索一下相关概念。

结构

框架提供了 4 个类，其中 UITableView+FDTemplateLayoutCellDebug 类用于打印 debug 信息，并无其它作用。主要功能由另外 3 个类提供。

• UITableView+FDTemplateLayoutCell：主类，提供高度获取方法；
• UITableView+FDIndexPathHeightCache：创建了一个用于 cacheByIndexPath: 方法的缓存类 FDIndexPathHeightCache；
• UITableView+FDKeyedHeightCache：创建了一个用于 cacheByKey: 方法的缓存类 FDKeyedHeightCache。

高度获取

流程

我们直接以 cacheByIndexPath: 方法源码为例进行了解（cacheByKey: 方法的实现大同小异）

[objc]  view plain  copy

1. - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByIndexPath:(NSIndexPath *)indexPathconfiguration:(void (^)(idcell))configuration {  
2.    
3.     // 1. 如果 identifier 和 indexPath 为空，返回高度为 0  
4.     if (!identifier || !indexPath) {  
5.         return 0;  
6.     }  
7.    
8.     // 2. 通过 FDIndexPathHeightCache 类声明的方法检查是否存在相应缓存  
9.     if ([self.fd_indexPathHeightCacheexistsHeightAtIndexPath:indexPath]) {  
10.         // 打印 debug 信息  
11.         [self fd_debugLog:[NSStringstringWithFormat:@"hit cache by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @([self.fd_indexPathHeightCacheheightForIndexPath:indexPath])]];  
12.         // 提取并返回对应缓存中的额高度  
13.         return [self.fd_indexPathHeightCacheheightForIndexPath:indexPath];  
14.     }  
15.    
16.     // 3. 如果没有缓存，通过 fd_heightForCellWithIdentifier: configuration: 方法计算获得 cell 高度  
17.     CGFloatheight = [self fd_heightForCellWithIdentifier:identifierconfiguration:configuration];  
18.    
19.     // 4. 通过 FDIndexPathHeightCache 类声明的方法将高度存入缓存  
20.     [self.fd_indexPathHeightCachecacheHeight:heightbyIndexPath:indexPath];  
21.     // 打印 debug 信息  
22.     [self fd_debugLog:[NSStringstringWithFormat: @"cached by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @(height)]];  
23.    
24.     return height;  
25. }  

缓存相关部分将在下面介绍，这里着重了解一下如何计算获得 cell 高度。

高度计算

fd_heightForCellWithIdentifier: configuration: 方法会根据 identifier 以及 configuration block 提供一个和 cell 布局相同的 template layout cell，并将其传入 fd_systemFittingHeightForConfiguratedCell: 这个私有方法返回计算出的高度。

fd_systemFittingHeightForConfiguratedCell: 方法明确给出了计算流程的注释：

If not using auto layout, you have to override “-sizeThatFits:” to provide a fitting size by yourself. This is the same height calculation passes used in iOS8 self-sizing cell’s implementation.

1. Try “- systemLayoutSizeFittingSize:” first
2. Warning once if step 1 still returns 0 when using AutoLayout
3. Try “- sizeThatFits:” if step 1 returns 0
4. Use a valid height or default row height (44) if not exist one

下面给出一些关键点的代码：

关于 UILabel 的折行

框架的做法相当直接：获取当前 contentView 的宽度并添加为其约束，限制 UILabel 水平方向的展开，计算完成后移除。

    - 获取当前 contentView 的宽度：

[objc]  view plain  copy

1. CGFloatcontentViewWidth = CGRectGetWidth(self.frame);  
2. // 考虑存在 accessoryView 或者 accessoryType 的情况  
3. if (cell.accessoryView) {  
4.     contentViewWidth -= 16 + CGRectGetWidth(cell.accessoryView.frame);  
5. } else {  
6.     static const CGFloatsystemAccessoryWidths[] = {  
7.         [UITableViewCellAccessoryNone] = 0,  
8.         [UITableViewCellAccessoryDisclosureIndicator] = 34,  
9.         [UITableViewCellAccessoryDetailDisclosureButton] = 68,  
10.         [UITableViewCellAccessoryCheckmark] = 40,  
11.         [UITableViewCellAccessoryDetailButton] = 48  
12.     };  
13.     contentViewWidth -= systemAccessoryWidths[cell.accessoryType];  
14. }  

    - 添加约束并进行高度计算：

[objc]  view plain  copy

1. // 添加约束  
2. NSLayoutConstraint *widthFenceConstraint = [NSLayoutConstraintconstraintWithItem:cell.contentViewattribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:nilattribute:NSLayoutAttributeNotAnAttributemultiplier:1.0 constant:contentViewWidth];  
3. [cell.contentViewaddConstraint:widthFenceConstraint];  
4. // 计算高度  
5. fittingHeight = [cell.contentViewsystemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;  
6. // 移除约束  
7. [cell.contentViewremoveConstraint:widthFenceConstraint];  

注意分格线高度

这也是非常容易遗漏的一点：

[objc]  view plain  copy

1. // Add 1px extra space for separator line if needed, simulating default UITableViewCell.  
2. if (self.separatorStyle != UITableViewCellSeparatorStyleNone) {  
3.     fittingHeight += 1.0 / [UIScreenmainScreen].scale;  
4. }  

缓存

FDIndexPathHeightCache

外部接口：

[objc]  view plain  copy

1. // 当前 indexPath 是否存在缓存  
2. - (BOOL)existsHeightAtIndexPath:(NSIndexPath *)indexPath;  
3. // 存入缓存  
4. - (void)cacheHeight:(CGFloat)heightbyIndexPath:(NSIndexPath *)indexPath;  
5. // 从缓存读取高度  
6. - (CGFloat)heightForIndexPath:(NSIndexPath *)indexPath;  
7. // 移除指定 indexPath 的缓存  
8. - (void)invalidateHeightAtIndexPath:(NSIndexPath *)indexPath;  
9. // 移除所有缓存  
10. - (void)invalidateAllHeightCache;  

其内部针对横屏和竖屏声明了 2 个以 indexPath 为索引的二维数组来存储高度：

[objc]  view plain  copy

1. typedef NSMutableArray<NSMutableArray<NSNumber *> *> FDIndexPathHeightsBySection;  
2.    
3. @interface FDIndexPathHeightCache ()  
4. @property (nonatomic, strong) FDIndexPathHeightsBySection *heightsBySectionForPortrait;  
5. @property (nonatomic, strong) FDIndexPathHeightsBySection *heightsBySectionForLandscape;  
6. @end  

更新处理

框架声明了一个 tableView 分类 UITableView (FDIndexPathHeightCacheInvalidation)，利用 runtime 的 method_exchangeImplementations 函数对 UITableView 中触发刷新的方法做了替换，以进行相应的缓存调整：

[objc]  view plain  copy

1. @implementationUITableView (FDIndexPathHeightCacheInvalidation)  
2.    
3. + (void)load {  
4.     // UITableView 中所有触发刷新的公共方法  
5.     SELselectors[] = {  
6.         @selector(reloadData),  
7.         @selector(insertSections:withRowAnimation:),  
8.         @selector(deleteSections:withRowAnimation:),  
9.         @selector(reloadSections:withRowAnimation:),  
10.         @selector(moveSection:toSection:),  
11.         @selector(insertRowsAtIndexPaths:withRowAnimation:),  
12.         @selector(deleteRowsAtIndexPaths:withRowAnimation:),  
13.         @selector(reloadRowsAtIndexPaths:withRowAnimation:),  
14.         @selector(moveRowAtIndexPath:toIndexPath:)  
15.     };  
16.    
17.     // 用分类中以“fd_”为前缀的方法替换  
18.     for (NSUIntegerindex = 0; index < sizeof(selectors) / sizeof(SEL); ++index) {  
19.         SELoriginalSelector = selectors[index];  
20.         SELswizzledSelector = NSSelectorFromString([@"fd_" stringByAppendingString:NSStringFromSelector(originalSelector)]);  
21.         MethodoriginalMethod = class_getInstanceMethod(self, originalSelector);  
22.         MethodswizzledMethod = class_getInstanceMethod(self, swizzledSelector);  
23.         method_exchangeImplementations(originalMethod, swizzledMethod);  
24.     }  
25. }  

FDKeyedHeightCache

相比于 FDIndexPathHeightCache 中较为繁琐的数组操作，FDKeyedHeightCache 显得简洁了许多（当然代价是高度变化时的缓存操作得使用者亲力亲为）。外部接口：

[objc]  view plain  copy

1. - (BOOL)existsHeightForKey:(id<NSCopying>)key;  
2. - (void)cacheHeight:(CGFloat)heightbyKey:(id<NSCopying>)key;  
3. - (CGFloat)heightForKey:(id<NSCopying>)key;  
4.    
5. // Invalidation  
6. - (void)invalidateHeightForKey:(id<NSCopying>)key;  
7. - (void)invalidateAllHeightCache;  

内部采用以 key 为索引的字典存储高度：

[objc]  view plain  copy

1. @interface FDKeyedHeightCache ()  
2. @property (nonatomic, strong) NSMutableDictionary<id<NSCopying>, NSNumber *> *mutableHeightsByKeyForPortrait;  
3. @property (nonatomic, strong) NSMutableDictionary<id<NSCopying>, NSNumber *> *mutableHeightsByKeyForLandscape;  
4. @end  

由于采用字典缓存，自然不用关心 cell 插入、删除、移动等造成的缓存数组排列问题，但是当 cell 高度发生改变时，我们也无法像数组那样根据 IndexPath 索引到对应的缓存，因此只能像上文“使用”部分说明的一样，进行手动处理。

原文>>  http://blog.qiji.tech/archives/9538