iOS 第三方库计算cell高度 UITableView+FDTemplateLayoutCell 入门

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

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

iOS8 之前虽然采用 autoLayout 相比 frame layout 得手动计算已经简化了不少(设置estimatedRowHeight 属性并对约束设置正确的 cell 的 contentView 执行systemLayoutSizeFittingSize: 方法),但还是需要一些模式化步骤,同时还可能遇到一些蛋疼的问题比如 UILabel折行时的高度计算;

iOS8 推出 self-sizing cell 后,一切都变得轻松无比——做好约束后,直接设置estimatedRowHeight 就好了。然而事情并不简单,一来我们依然需要做 iOS7 的适配,二来 self-sizing并不存在缓存机制,不论何时都会重新计算 cell 高度,导致 iOS8 下页面滑动时会有明显的卡顿。

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

使用

一、cocoapods导入

GitHub转送门  

pod 'UITableView+FDTemplateLayoutCell’

二、使用

1、引用 UITableView+FDTemplateLayoutCell.h 类;

2、如果是用代码或 XIB 创建的 cell,需要先进行注册(类似 UICollectionView):

- (void)registerClass:(nullableClass)cellClassforCellReuseIdentifier:(NSString *)identifier;

- (void)registerNib:(nullableUINib *)nibforCellReuseIdentifier:(NSString *)identifier;  //XIB

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

/*

identifier 即 cell 的 identifier;

configuration block 中的代码应与数据源方法 tableView: cellForRowAtIndexPath: 中对 cell 的设置代码相同

方法内部将根据以上两个参数创建与 cell 对应的 template layout cell,这个 cell 只进行高度计算,不会显示到屏幕上

*/

// 返回计算好的高度(无缓存)

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifierconfiguration:(void (^)(idcell))configuration;

// 返回计算好的高度,并根据 indexPath 内部创建与之相应的二维数组缓存高度

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByIndexPath:(NSIndexPath *)indexPathconfiguration:(void (^)(idcell))configuration;

// 返回计算好的高度,内部创建一个字典缓存高度并由使用者指定 key

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByKey:(id)keyconfiguration:(void (^)(idcell))configuration;

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

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

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

- (void)fd_reloadDataWithoutInvalidateIndexPathHeightCache;

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

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

// 移除 key 对应的高度缓存

[tableView.fd_keyedHeightCacheinvalidateHeightForKey:key];

// 移除所有高度缓存

[tableView.fd_keyedHeightCacheinvalidateAllHeightCache];

5、如果需要查看 debug 打印信息,设置 fd_debugLogEnabled 属性:

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: 方法的实现大同小异)。

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByIndexPath:(NSIndexPath *)indexPathconfiguration:(void(^)(idcell))configuration {

// 1. 如果 identifier 和 indexPath 为空,返回高度为 0

if(!identifier || !indexPath) {

return0;   

}

// 2. 通过 FDIndexPathHeightCache 类声明的方法检查是否存在相应缓存

if([self.fd_indexPathHeightCacheexistsHeightAtIndexPath:indexPath]) {

// 打印 debug 信息

[self fd_debugLog:[NSStringstringWithFormat:@"hit cache by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @([self.fd_indexPathHeightCacheheightForIndexPath:indexPath])]];

// 提取并返回对应缓存中的额高度

return[self.fd_indexPathHeightCacheheightForIndexPath:indexPath];   

}

// 3. 如果没有缓存,通过 fd_heightForCellWithIdentifier: configuration: 方法计算获得 cell 高度

CGFloatheight = [selffd_heightForCellWithIdentifier:identifierconfiguration:configuration];

// 4. 通过 FDIndexPathHeightCache 类声明的方法将高度存入缓存

[self.fd_indexPathHeightCache cacheHeight:heightbyIndexPath:indexPath];

// 打印 debug 信息

[self fd_debugLog:[NSStringstringWithFormat:@"cached by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @(height)]];

returnheight;

}

高度计算

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


关于 UILabel 的折行

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

获取当前 contentView 的宽度:

CGFloatcontentViewWidth=CGRectGetWidth(self.frame);

// 考虑存在 accessoryView 或者 accessoryType 的情况

if(cell.accessoryView) {   

contentViewWidth -=16+CGRectGetWidth(cell.accessoryView.frame);

}else{

staticconstCGFloatsystemAccessoryWidths[] = {        [UITableViewCellAccessoryNone] =0,        [UITableViewCellAccessoryDisclosureIndicator] =34,        [UITableViewCellAccessoryDetailDisclosureButton] =68,        [UITableViewCellAccessoryCheckmark] =40,        [UITableViewCellAccessoryDetailButton] =48

};   

contentViewWidth -= systemAccessoryWidths[cell.accessoryType];

}

添加约束并进行高度计算:

// 添加约束

NSLayoutConstraint *widthFenceConstraint = [NSLayoutConstraint constraintWithItem:cell.contentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nilattribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:contentViewWidth];

[cell.contentView addConstraint:widthFenceConstraint];

// 计算高度

fittingHeight = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;

// 移除约束

[cell.contentView removeConstraint:widthFenceConstraint];

注意分格线高度,这也是非常容易遗漏的一点:

// Add1px extra spaceforseparator lineifneeded, simulatingdefaultUITableViewCell.

if(self.separatorStyle != UITableViewCellSeparatorStyleNone) {   

fittingHeight +=1.0/ [UIScreenmainScreen].scale;

}

缓存 FDIndexPathHeightCache

外部接口:

// 当前 indexPath 是否存在缓存

-(BOOL)existsHeightAtIndexPath:(NSIndexPath*)indexPath;

// 存入缓存

-(void)cacheHeight:(CGFloat)heightbyIndexPath:(NSIndexPath*)indexPath;

// 从缓存读取高度

-(CGFloat)heightForIndexPath:(NSIndexPath*)indexPath;

// 移除指定 indexPath 的缓存

-(void)invalidateHeightAtIndexPath:(NSIndexPath*)indexPath;

// 移除所有缓存

-(void)invalidateAllHeightCache;

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

typedef NSMutableArray<NSMutableArray<>NSnumber *>*> FDIndexPathHeightsBySection;

@interfaceFDIndexPathHeightCache()

@property(nonatomic,strong) FDIndexPathHeightsBySection *heightsBySectionForPortrait;

@property(nonatomic,strong) FDIndexPathHeightsBySection *heightsBySectionForLandscape;

@end

更新处理

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

@implementationUITableView(FDIndexPathHeightCacheInvalidation)

+ (void)load {

// UITableView 中所有触发刷新的公共方法

SELselectors[] = {

@selector(reloadData),

@selector(insertSections:withRowAnimation:),

@selector(deleteSections:withRowAnimation:),

@selector(reloadSections:withRowAnimation:),

@selector(moveSection:toSection:),

@selector(insertRowsAtIndexPaths:withRowAnimation:),

@selector(deleteRowsAtIndexPaths:withRowAnimation:),

@selector(reloadRowsAtIndexPaths:withRowAnimation:),

@selector(moveRowAtIndexPath:toIndexPath:)   

};

// 用分类中以“fd_”为前缀的方法替换

for(NSUIntegerindex =0; index < sizeof(selectors) / sizeof(SEL); ++index) {       

SELoriginalSelector = selectors[index];       

SELswizzledSelector = NSSelectorFromString([@"fd_" stringByAppendingString:NSStringFromSelector(originalSelector)]);

MethodoriginalMethod = class_getInstanceMethod(self, originalSelector);       

MethodswizzledMethod = class_getInstanceMethod(self, swizzledSelector);       

method_exchangeImplementations(originalMethod, swizzledMethod);   

}

}

FDKeyedHeightCache

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

- (BOOL)existsHeightForKey:(id)key;

- (void)cacheHeight:(CGFloat)heightbyKey:(id)key;

- (CGFloat)heightForKey:(id)key;

// Invalidation

- (void)invalidateHeightForKey:(id)key;

- (void)invalidateAllHeightCache;

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

@interfaceFDKeyedHeightCache()

@property(nonatomic,strong)NSMutableDictionary<id<NSCpying>,NSNumber*> *mutableHeightsByKeyForPortrait;

@property(nonatomic,strong)NSMutableDictionary<id<NsCopying>,NSNumber*> *mutableHeightsByKeyForLandscape;

@end

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容