UITableView+FDTemplateLayoutCell 框架学习

介绍

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):

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

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<NSCopying>)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];

    如果需要查看 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) {
            return 0;
        }
     
        // 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 = [self fd_heightForCellWithIdentifier:identifierconfiguration:configuration];
     
        // 4. 通过 FDIndexPathHeightCache 类声明的方法将高度存入缓存
        [self.fd_indexPathHeightCachecacheHeight:heightbyIndexPath:indexPath];
        // 打印 debug 信息
        [self fd_debugLog:[NSStringstringWithFormat: @"cached by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @(height)]];
     
        return height;
    }

    缓存相关部分将在下面介绍,这里着重了解一下如何计算获得 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 的宽度:

    CGFloatcontentViewWidth = CGRectGetWidth(self.frame);
    // 考虑存在 accessoryView 或者 accessoryType 的情况
    if (cell.accessoryView) {
        contentViewWidth -= 16 + CGRectGetWidth(cell.accessoryView.frame);
    } else {
        static const CGFloatsystemAccessoryWidths[] = {
            [UITableViewCellAccessoryNone] = 0,
            [UITableViewCellAccessoryDisclosureIndicator] = 34,
            [UITableViewCellAccessoryDetailDisclosureButton] = 68,
            [UITableViewCellAccessoryCheckmark] = 40,
            [UITableViewCellAccessoryDetailButton] = 48
        };
        contentViewWidth -= systemAccessoryWidths[cell.accessoryType];
    }

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

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

注意分格线高度

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

// Add 1px extra space for separator line if needed, simulating default UITableViewCell.
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;
 
@interface FDIndexPathHeightCache ()
@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<NSCopying>)key;
- (void)cacheHeight:(CGFloat)heightbyKey:(id<NSCopying>)key;
- (CGFloat)heightForKey:(id<NSCopying>)key;
 
// Invalidation
- (void)invalidateHeightForKey:(id<NSCopying>)key;
- (void)invalidateAllHeightCache;

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

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

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



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


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在UITableView的section中添加数据,你需要先创建一个包含所需数据的数组。然后,在UITableViewDataSource协议中实现以下方法: 1. numberOfSections(in tableView: UITableView) -> Int:返回表格中的section数。 2. tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int:返回指定section中的行数。 3. tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell:返回指定indexPath的UITableViewCell实例。 例如,假设你有一个包含多个section的UITableView,每个section都包含一个字符串数组。以下是一个示例代码: ``` class ViewController: UIViewController, UITableViewDataSource { var data: [[String]] = [["item 1", "item 2"], ["item 3", "item 4", "item 5"]] @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() tableView.dataSource = self } // MARK: - UITableViewDataSource func numberOfSections(in tableView: UITableView) -> Int { return data.count } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return data[section].count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) cell.textLabel?.text = data[indexPath.section][indexPath.row] return cell } } ``` 在这个例子中,我们创建了一个包含两个section的UITableView。每个section都有一个字符串数组,我们将其存储在data数组中。在numberOfSections方法中,我们返回data数组的数量,即section的数量。在tableView(_:numberOfRowsInSection:)方法中,我们返回特定section中的行数。最后,在tableView(_:cellForRowAt:)方法中,我们获取特定indexPath的字符串并将其显示在UITableViewCell中。 注意,在上述示例代码中,我们将UITableViewCell标识符设置为“Cell”,你需要确保在Storyboard或xib文件中对应的UITableViewCell的标识符也设置为“Cell”。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值