WechatIMG4.jpeg

Chameleon

Chameleon用于将 iOS 的功能迁移到macOS上 并且在其中为 macOS 实现了一套与 iOS UIKit 同名的框架
并且其代码为开源. 所以我们可以来研究一下思路

首先 下载Chameleon 然后打开 UIKit 项目

K

UITableView 的初始化方法

当我们定义一个 UITableView 对象的时候，需要对这个对象进行初始化。最常用的方法莫过于 - (id)initWithFrame:(CGRect)frame style:(UITableViewStyle)theStyle。下面跟着这个初始化入口，逐渐来分析代码：

- (id)initWithFrame:(CGRect)frame style:(UITableViewStyle)theStyle
{
    if ((self=[super initWithFrame:frame])) {
        // 确定 style
        _style = theStyle;
        // cell 缓存字典
        _cachedCells = [[NSMutableDictionary alloc] init];
        // section 缓存数组
        _sections = [[NSMutableArray alloc] init];
        // 复用 cell 可变集合
        _reusableCells = [[NSMutableSet alloc] init];

        // 基本属性设置
        self.separatorColor = [UIColor colorWithRed:.88f green:.88f blue:.88f alpha:1];
        self.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
        self.showsHorizontalScrollIndicator = NO;
        self.allowsSelection = YES;
        self.allowsSelectionDuringEditing = NO;
        self.sectionHeaderHeight = self.sectionFooterHeight = 22;
        self.alwaysBounceVertical = YES;

        if (_style == UITableViewStylePlain) {
            self.backgroundColor = [UIColor whiteColor];
        }
        // 加入 Layout 标记，进行手动触发布局设置
        [self _setNeedsReload];
    }
    return self;
}

在初始化代码中就看到了重点，_cachedCells、_sections 和 _reusableCells 无疑是复用的核心成员。

来 继续代码跟踪

我们先来查看一下 _setNeedsReload 方法中做了什么：

- (void)_setNeedsReload
{
    _needsReload = YES;
    [self setNeedsLayout];
}

首先先对 _needsReload 进行标记，之后调用了 setNeedsLayout 方法。对于 UIView的 setNeedsLayout 方法，在调用后 Runloop 会在即将到来的周期中来检测 displayIfNeeded 标记，如果为 YES 则会进行 drawRect
视图重绘。作为 Apple UIKit层中的基础 Class，在属性变化后都会进行一次视图重绘的过程。这个属性过程的变化即为对象的初始化加载以及手势交互过程。这也就是官方文档中的 The Runtime Interaction Model。

image.png

当 Runloop 到来时，开始重绘过程即调用 layoutSubViews 方法。在 UITableView 中这个方法已经被重写过：

- (void)layoutSubviews
{
    // 会在初始化的末尾手动调用重绘过程
    // 并且 UITableView 是 UIScrollView 的继承，会接受手势
    // 所以在滑动 UITableView 的时候也会调用
    _backgroundView.frame = self.bounds;
    // 根据标记确定是否执行数据更新操作
    [self _reloadDataIfNeeded];
    [self _layoutTableView];
    [super layoutSubviews];
}

接下来我们开始查看 _reloadDataIfNeeded 以及 reloadData 方法：

- (void)_reloadDataIfNeeded {
    // 查询 _needsReload 标记
    if (_needsReload) {
        [self reloadData];
    }
}

- (void)reloadData {
    // 清除之前的缓存并删除 Cell
    [[_cachedCells allValues] makeObjectsPerformSelector:@selector(removeFromSuperview)];
    [_cachedCells removeAllObjects];

    // 复用 Cell Set 也进行删除操作
    [_reusableCells makeObjectsPerformSelector:@selector(removeFromSuperview)];
    [_reusableCells removeAllObjects];

    // 删除选择的 Cell
    _selectedRow = nil;
    // 删除被高亮的 Cell
    _highlightedRow = nil;

    // 更新缓存中状态
    [self _updateSectionsCache];
    // 设置 Size
    [self _setContentSize];

    _needsReload = NO;
}

当 reloadData 方法被触发时，UITableView 默认为在这个 UITableView 中的数据将会全部发生变化。测试之前遗留下的缓存列表以及复用列表全部都丧失了利用性。为了避免出现悬挂指针的情况（有可能某个 cell 被其他的视图进行了引用），我们需要对每个 cell 进行 removeFromSuperview 处理，这个处理即针对于容器 UITableView，又对其他的引用做出保障。然后我们更新当前 tableView 中的两个缓存容器，_reusableCells 和 _cachedCells，以及其他需要重置的成员属性。

最关键的地方到了，缓存状态的更新方法 _updateSectionsCache，其中涉及到数据如何存储、如何复用的操作

- (void)_updateSectionsCache {
    // 使用 dataSource 来创建缓存容器
    // 如果没有 dataSource 则放弃重用操作
    // 在这个逆向工程中并没有对 header 进行缓存操作，但是 Apple 的 UIKit 中一定也做到了
    // 真正的 UIKit 中应该会获取更多的数据进行存储，并实现了 TableView 中所有视图的复用

    // 先移除每个 Section 的 Header 和 Footer 视图
    for (UITableViewSection *previousSectionRecord in _sections) {
        [previousSectionRecord.headerView removeFromSuperview];
        [previousSectionRecord.footerView removeFromSuperview];
    }

    // 清除旧缓存，对容器进行初始化操作
    [_sections removeAllObjects];

    if (_dataSource) {
        // 根据 dataSource 计算高度和偏移量
        const CGFloat defaultRowHeight = _rowHeight ?: _UITableViewDefaultRowHeight;
        // 获取 Section 数目
        const NSInteger numberOfSections = [self numberOfSections];
        for (NSInteger section=0; section<numberOfSections; section++) {
            const NSInteger numberOfRowsInSection = [self numberOfRowsInSection:section];

    
  UITableViewSection *sectionRecord = [[UITableViewSection alloc] init];
  sectionRecord.headerTitle = _dataSourceHas.titleForHeaderInSection? [self.dataSource tableView:self titleForHeaderInSection:section] : nil;
  sectionRecord.footerTitle = _dataSourceHas.titleForFooterInSection? [self.dataSource tableView:self titleForFooterInSection:section] : nil;

  sectionRecord.headerHeight = _delegateHas.heightForHeaderInSection? [self.delegate tableView:self heightForHeaderInSection:section] : _sectionHeaderHeight;
  sectionRecord.footerHeight = _delegateHas.heightForFooterInSection ? [self.delegate tableView:self heightForFooterInSection:section] : _sectionFooterHeight;

  sectionRecord.headerView = (sectionRecord.headerHeight > 0 && _delegateHas.viewForHeaderInSection)? [self.delegate tableView:self viewForHeaderInSection:section] : nil;
  sectionRecord.footerView = (sectionRecord.footerHeight > 0 && _delegateHas.viewForFooterInSection)? [self.delegate tableView:self viewForFooterInSection:section] : nil;

     // 先初始化一个默认的 headerView ，如果没有直接设置 headerView 就直接更换标题
            if (!sectionRecord.headerView && sectionRecord.headerHeight > 0 && sectionRecord.headerTitle) {
                sectionRecord.headerView = [UITableViewSectionLabel sectionLabelWithTitle:sectionRecord.headerTitle];
            }

        // Footer 也做相同的处理
            if (!sectionRecord.footerView && sectionRecord.footerHeight > 0 && sectionRecord.footerTitle) {
                sectionRecord.footerView = [UITableViewSectionLabel sectionLabelWithTitle:sectionRecord.footerTitle];
            }

   if (sectionRecord.headerView) {
                [self addSubview:sectionRecord.headerView];
            } else {
                sectionRecord.headerHeight = 0;
            }

            if (sectionRecord.footerView) {
                [self addSubview:sectionRecord.footerView];
            } else {
                sectionRecord.footerHeight = 0;
            }

 // 为高度数组动态开辟空间
            CGFloat *rowHeights = malloc(numberOfRowsInSection * sizeof(CGFloat));
            // 初始化总高度
            CGFloat totalRowsHeight = 0;

            for (NSInteger row=0; row<numberOfRowsInSection; row++) {
                // 获取 Cell 高度，未设置则使用默认高度
                const CGFloat rowHeight = _delegateHas.heightForRowAtIndexPath? [self.delegate tableView:self heightForRowAtIndexPath:[NSIndexPath indexPathForRow:row inSection:section]] : defaultRowHeight;
                // 记录高度
                rowHeights[row] = rowHeight;
                // 总高度统计
                totalRowsHeight += rowHeight;
            }

   sectionRecord.rowsHeight = totalRowsHeight;
            [sectionRecord setNumberOfRows:numberOfRowsInSection withHeights:rowHeights];
            free(rowHeights);

            // 缓存高度记录
            [_sections addObject:sectionRecord];
        }
    }
}

我们发现在 _updateSectionsCache 更新缓存状态的过程中对 _sections 中的数据全部清除。之后缓存了更新后的所有 Section 数据。那么这些数据有什么利用价值呢？继续来看布局更新操作。

- (void)_layoutTableView {

    // 在需要渲染时放置需要的 Header 和 Cell
    // 缓存所有出现的单元格，并添加至复用容器
    // 之后那些不显示但是已经出现的 Cell 将会被复用

    // 获取容器视图相对于父类视图的尺寸及坐标
    const CGSize boundsSize = self.bounds.size;
    // 获取向下滑动偏移量
    const CGFloat contentOffset = self.contentOffset.y;
    // 获取可视矩形框的尺寸
    const CGRect visibleBounds = CGRectMake(0,contentOffset,boundsSize.width,boundsSize.height);
    // 表高纪录值
    CGFloat tableHeight = 0;
    // 如果有 header 则需要额外计算
    if (_tableHeaderView) {
        CGRect tableHeaderFrame = _tableHeaderView.frame;
        tableHeaderFrame.origin = CGPointZero;
        tableHeaderFrame.size.width = boundsSize.width;
        _tableHeaderView.frame = tableHeaderFrame;
        tableHeight += tableHeaderFrame.size.height;
    }

    // availableCell 记录当前正在显示的 Cell
    // 在滑出显示区之后将添加至 _reusableCells
    NSMutableDictionary *availableCells = [_cachedCells mutableCopy];
    const NSInteger numberOfSections = [_sections count];
    [_cachedCells removeAllObjects];

 // 滑动列表，更新当前显示容器
    for (NSInteger section=0; section<numberOfSections; section++) {
        CGRect sectionRect = [self rectForSection:section];
        tableHeight += sectionRect.size.height;
        if (CGRectIntersectsRect(sectionRect, visibleBounds)) {
            const CGRect headerRect = [self rectForHeaderInSection:section];
            const CGRect footerRect = [self rectForFooterInSection:section];
            UITableViewSection *sectionRecord = [_sections objectAtIndex:section];
            const NSInteger numberOfRows = sectionRecord.numberOfRows;

            if (sectionRecord.headerView) {
                sectionRecord.headerView.frame = headerRect;
            }

            if (sectionRecord.footerView) {
                sectionRecord.footerView.frame = footerRect;
            }

  for (NSInteger row=0; row<numberOfRows; row++) {
                // 构造 indexPath 为代理方法准备
                NSIndexPath *indexPath = [NSIndexPath indexPathForRow:row inSection:section];
                // 获取第 row 个坐标位置
                CGRect rowRect = [self rectForRowAtIndexPath:indexPath];
                // 判断当前 Cell 是否与显示区域相交
                if (CGRectIntersectsRect(rowRect,visibleBounds) && rowRect.size.height > 0) {
                    // 首先查看 availableCells 中是否已经有了当前 Cell 的存储
                    // 如果没有，则请求 tableView 的代理方法获取 Cell
                    UITableViewCell *cell = [availableCells objectForKey:indexPath] ?: [self.dataSource tableView:self cellForRowAtIndexPath:indexPath];
                    // 由于碰撞检测生效，则按照逻辑需要更新 availableCells 字典
                    if (cell) {
                        // 获取到 Cell 后，将其进行缓存操作
                        [_cachedCells setObject:cell forKey:indexPath];
                        [availableCells removeObjectForKey:indexPath];
                        cell.highlighted = [_highlightedRow isEqual:indexPath];
                        cell.selected = [_selectedRow isEqual:indexPath];
                        cell.frame = rowRect;
                        cell.backgroundColor = self.backgroundColor;
                        [cell _setSeparatorStyle:_separatorStyle color:_separatorColor];
                        [self addSubview:cell];
                    }
                }
            }
        }
    }

    // 将已经退出屏幕且定义 reuseIdentifier 的 Cell 加入可复用 Cell 容器中
    for (UITableViewCell *cell in [availableCells allValues]) {
        if (cell.reuseIdentifier) {
            [_reusableCells addObject:cell];
        } else {
            [cell removeFromSuperview];
        }
    }


    // 不能复用的 Cell 会直接销毁，可复用的 Cell 会存储在 _reusableCells
    // 确保所有的可用（未出现在屏幕上）的复用单元格在 availableCells 中
    // 这样缓存的目的之一是确保动画的流畅性。在动画的帧上都会对显示部分进行处理，重新计算可见 Cell。
    // 如果直接删除掉所有未出现在屏幕上的单元格，在视觉上会观察到突然消失的动作
    // 整体动画具有跳跃性而显得不流畅
    // 把在可视区的 Cell（但不在屏幕上）已经被回收为可复用的 Cell 从视图中移除
    NSArray* allCachedCells = [_cachedCells allValues];
    for (UITableViewCell *cell in _reusableCells) {
        if (CGRectIntersectsRect(cell.frame,visibleBounds) && ![allCachedCells containsObject: cell]) {
            [cell removeFromSuperview];
        }
    }

    if (_tableFooterView) {
        CGRect tableFooterFrame = _tableFooterView.frame;
        tableFooterFrame.origin = CGPointMake(0,tableHeight);
        tableFooterFrame.size.width = boundsSize.width;
        _tableFooterView.frame = tableFooterFrame;
    }
}

如果你已经对 UITableView 的缓存机制有所了解，那么你在阅读完代码之后会对其有更深刻的认识。如果看完代码还是一头雾水，那么请继续看下面的分析。

Cell 复用 的三个阶段

1 布局方法触发阶段

在用户触摸屏幕后，硬件报告触摸时间传递至 UIKit 框架，之后 UIKit 将触摸事件打包成 UIEvent 对象，分发至指定视图。这时候其视图就会做出相应，并调用 setNeedsLayout 方法告诉视图及其子视图需要进行布局更新。此时，setNeedsLayout 被调用，也就变为 Cell 复用场景的入口。

image.png

2缓存 Cell 高度信息阶段

当视图加载后，由 UIKit 调用布局方法 layoutSubviews 从而进入缓存 Cell 高度阶段 _updateSectionsCache。在这个阶段，通过代理方法 heightForRowAtIndexPath: 获取每一个 Cell 的高度，并将高度信息缓存起来。这其中的高度信息由 UITableViewSection 的一个实例 sectionRecord 进行存储，其中以 section 为单位，存储每个 section 中各个 Cell 的高度、Cell 的数量、以及 section 的总高度、footer 和 header 高度这些信息。这一部分的信息采集是为了在 Cell 复用的核心部分，Cell 的 Rect 尺寸与 tableView 尺寸计算边界情况建立数据基础。

image.png

3 复用 Cell 的核心处理阶段

我们要关注三个存储容器的变化情况：

• NSMutableDictionary 类型 _cachedCells：用来存储当前屏幕上所有 Cell 与其对应的 indexPath。以键值对的关系进行存储。
• NSMutableDictionary 类型 availableCells：当列表发生滑动的时候，部分 Cell 从屏幕移出，这个容器会对 _cachedCells 进行拷贝，然后将屏幕上此时的 Cell 全部去除。即最终取出所有退出屏幕的 Cell。
• NSMutableSet 类型 _reusableCells：用来收集曾经出现过此时未出现在屏幕上的 Cell。当再出滑入主屏幕时，则直接使用其中的对象根据 CGRectIntersectsRect Rect 碰撞试验进行复用。

在整个核心复用阶段，这三个容器都充当着很重要的角色。我们给出以下的场景实例，例如下图的一个场景，图 ① 为页面刚刚载入的阶段，图 ② 为用户向下滑动一个单元格时的状态：

image.png

当到状态 ② 的时候，我们发现 _reusableCells 容器中，已经出现了状态 ① 中已经退出屏幕的 Cell 0。而当我们重新将 Cell 0 滑入界面的时候，在系统 addView 渲染阶段，会直接将 _reusableCells 中的 Cell 0 立即取出进行渲染，从而代替创建新的实例再进行渲染，简化了时间与性能上的开销。

UITableView 的其他细节优化

复用容器数据类型 NSMutableSet

在三个重要的容器中，只有 _reusableCells 使用了 NSMutableSet。这是因为我们在每一次对于 _cachedCells 中的 Cell 进行遍历并在屏幕上渲染时，都需要在 _reusableCells 进行一次扫描。而且当一个页面反复的上下滑动时，_reusableCells 的检索复杂度是相当庞大的。为了确保这一情况下滑动的流畅性，Apple 在设计时不得不将检索复杂度最小化。并且这个复杂度要是非抖动的，不能给体验造成太大的不稳定性。

高度缓存容器 _sections

在每次布局方法触发阶段，由于 Cell 的状态发生了变化。在对 Cell 复用容器的修改之前，首先要做的一件事是以 Section 为单位对所有的 Cell 进行缓存高度。从这里可以看出 UITableView 设计师的细节。 Cell 的高度在 UITableView 中充当着十分重要的角色，一下列表是需要使用高度的方法：

• (CGFloat)_offsetForSection:(NSInteger)index：计算指定 Cell 的滑动偏移量。
• (CGRect)rectForSection:(NSInteger)section：返回某个 Section 的整体 Rect。
• (CGRect)rectForHeaderInSection:(NSInteger)section：返回某个 Header 的 Rect。
• (CGRect)rectForFooterInSection:(NSInteger)section：返回某个 Footer 的 Rect。
• (CGRect)rectForRowAtIndexPath:(NSIndexPath *)indexPath：返回某个 Cell 的 Rect。
• (NSArray *)indexPathsForRowsInRect:(CGRect)rect：返回 Rect 列表。
• (void)_setContentSize：根据高度计算 UITableView 中实际内容的 Size。
  一次

参考

• Chameleon
• 《iOS 成长之路》