如何写好一个UITableView

506 查看

本文是直播分享的简单文字整理，直播共分为上、下两部分。第一部分：优酷 Or YouTube，第二部分：优酷

Demo 地址：KtTableView

如果你觉得 UITableViewDelegate 和 UITableViewDataSource 这两个协议中有大量方法每次都是复制粘贴，实现起来大同小异；如果你觉得发起网络请求并解析数据需要一大段代码，加上刷新和加载后简直复杂度爆表，如果你想知道为什么下面的代码可以满足上述所有要求：

解耦后的VC

系好安全带，上车！

MVC

在讨论解耦之前，我们要弄明白 MVC 的核心：控制器（以下简称 C）负责模型（以下简称 M）和视图（以下简称 V）的交互。

这里所说的 M，通常不是一个单独的类，很多情况下它是由多个类构成的一个层。最上层的通常是以 Model 结尾的类，它直接被 C 持有。Model 类还可以持有两个对象：

Item：它是实际存储数据的对象。它可以理解为一个字典，和 V 中的属性一一对应
Cache：它可以缓存自己的 Item（如果有很多）

常见的误区：

一般情况下数据的处理会放在 M 而不是 C（C 只做不能复用的事）
解耦不只是把一段代码拿到外面去。而是关注是否能合并重复代码，并且有良好的拖展性。

原始版

在 C 中，我们创建 UITableView 对象，然后将它的数据源和代理设置为自己。也就是自己管理着 UI 逻辑和数据存取的逻辑。在这种架构下，主要存在这些问题：

违背 MVC 模式，现在是 V 持有 C 和 M。
C 管理了全部逻辑，耦合太严重。
其实绝大多数 UI 相关都是由 Cell 而不是 UITableView 自身完成的。

为了解决这些问题，我们首先弄明白，数据源和代理分别做了那些事。

数据源

它有两个必须实现的代理方法：

1 2	- (NSInteger)tableView:(UITableView )tableView numberOfRowsInSection:(NSInteger)section; - (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath )indexPath;

简单来说，只要实现了这个两个方法，一个简单的 UITableView 对象就算是完成了。

除此以外，它还负责管理 section 的数量，标题，某一个 cell 的编辑和移动等。

代理

代理主要涉及以下几个方面的内容：

cell、headerView 等展示前、后的回调。
cell、headerView 等的高度，点击事件。

最常用的也是两个方法：

1 2	- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath; - (void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath;

提醒：绝大多数代理方法都有一个 indexPath 参数

优化数据源

最简单的思路是单独把数据源拿出来作为一个对象。

这种写法有一定的解耦作用，同时可以有效减少 C 中的代码量。然而总代码量会上升。我们的目标是减少不必要的代码。

比如获取每一个 section 的行数，它的实现逻辑总是高度类似。然而由于数据源的具体实现方式不统一，所以每个数据源都要重新实现一遍。

SectionObject

首先我们来思考一个问题，数据源作为 M，它持有的 Item 长什么样？答案是一个二维数组，每个元素保存了一个 section 所需要的全部信息。因此除了有自己的数组（给cell用）外，还有 section 的标题等，我们把这样的元素命名为 SectionObject：

@interface KtTableViewSectionObject : NSObject

@property (nonatomic, copy) NSString *headerTitle; // UITableDataSource 协议中的 titleForHeaderInSection 方法可能会用到

@property (nonatomic, copy) NSString *footerTitle; // UITableDataSource 协议中的 titleForFooterInSection 方法可能会用到

@property (nonatomic, retain) NSMutableArray *items;

- (instancetype)initWithItemArray:(NSMutableArray *)items;

@end

Item

其中的 items 数组，应该存储了每个 cell 所需要的 Item，考虑到 Cell 的特点，基类的 BaseItem 可以设计成这样：

@interface KtTableViewBaseItem : NSObject

@property (nonatomic, retain) NSString *itemIdentifier;

@property (nonatomic, retain) UIImage *itemImage;

@property (nonatomic, retain) NSString *itemTitle;

@property (nonatomic, retain) NSString *itemSubtitle;

@property (nonatomic, retain) UIImage *itemAccessoryImage;

- (instancetype)initWithImage:(UIImage *)image Title:(NSString *)title SubTitle:(NSString *)subTitle AccessoryImage:(UIImage *)accessoryImage;

@end

父类实现代码

规定好了统一的数据存储格式以后，我们就可以考虑在基类中完成某些方法了。以 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 方法为例，它可以这样实现：

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

if (self.sections.count > section) {

KtTableViewSectionObject *sectionObject = [self.sections objectAtIndex:section];

return sectionObject.items.count;

}

return 0;

}

比较困难的是创建 cell，因为我们不知道 cell 的类型，自然也就无法调用 alloc 方法。除此以外，cell 除了创建，还需要设置 UI，这些都是数据源不应该做的事。

这两个问题的解决方案如下：

定义一个协议，父类返回基类 Cell，子类视情况返回合适的类型。
为 Cell 添加一个 setObject 方法，用于解析 Item 并更新 UI。

优势

经过这一番折腾，好处是相当明显的：

子类的数据源只需要实现 cellClassForObject 方法即可。原来的数据源方法已经在父类中被统一实现了。
每一个 Cell 只要写好自己的 setObject 方法，然后坐等自己被创建，被调用这个方法即可。
子类通过 objectForRowAtIndexPath 方法可以快速获取 item，不用重写。

对照 demo（SHA-1：6475496），感受一下效果。

优化代理

我们以之前所说的，代理协议中常用的两个方法为例，看看怎么进行优化与解耦。

首先是计算高度，这个逻辑并不一定在 C 完成，由于涉及到 UI，所以由 Cell 负责实现即可。而计算高度的依据就是 Object，所以我们给基类的 Cell 加上一个类方法：

մ理，直播共分为上、下两部分。第一部分：优酷 Or YouTube，第二部分：优酷

Demo 地址：KtTableView

解耦后的VC

系好安全带，上车！

MVC

在讨论解耦之前，我们要弄明白 MVC 的核心：控制器（以下简称 C）负责模型（以下简称 M）和视图（以下简称 V）的交互。

Item：它是实际存储数据的对象。它可以理解为一个字典，和 V 中的属性一一对应
Cache：它可以缓存自己的 Item（如果有很多）

常见的误区：

一般情况下数据的处理会放在 M 而不是 C（C 只做不能复用的事）
解耦不只是把一段代码拿到外面去。而是关注是否能合并重复代码，并且有良好的拖展性。

原始版

违背 MVC 模式，现在是 V 持有 C 和 M。
C 管理了全部逻辑，耦合太严重。
其实绝大多数 UI 相关都是由 Cell 而不是 UITableView 自身完成的。

为了解决这些问题，我们首先弄明白，数据源和代理分别做了那些事。

数据源

它有两个必须实现的代理方法：

1 2	- (NSInteger)tableView:(UITableView )tableView numberOfRowsInSection:(NSInteger)section; - (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath )indexPath;

简单来说，只要实现了这个两个方法，一个简单的 UITableView 对象就算是完成了。

除此以外，它还负责管理 section 的数量，标题，某一个 cell 的编辑和移动等。

代理

代理主要涉及以下几个方面的内容：

cell、headerView 等展示前、后的回调。
cell、headerView 等的高度，点击事件。

最常用的也是两个方法：

1 2	- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath; - (void)tableView:(UITableView )tableView didSelectRowAtIndexPath:(NSIndexPath )indexPath;

提醒：绝大多数代理方法都有一个 indexPath 参数

优化数据源

最简单的思路是单独把数据源拿出来作为一个对象。

这种写法有一定的解耦作用，同时可以有效减少 C 中的代码量。然而总代码量会上升。我们的目标是减少不必要的代码。

比如获取每一个 section 的行数，它的实现逻辑总是高度类似。然而由于数据源的具体实现方式不统一，所以每个数据源都要重新实现一遍。

SectionObject

@interface KtTableViewSectionObject : NSObject

@property (nonatomic, copy) NSString *headerTitle; // UITableDataSource 协议中的 titleForHeaderInSection 方法可能会用到

@property (nonatomic, copy) NSString *footerTitle; // UITableDataSource 协议中的 titleForFooterInSection 方法可能会用到

@property (nonatomic, retain) NSMutableArray *items;

- (instancetype)initWithItemArray:(NSMutableArray *)items;

@end

Item

其中的 items 数组，应该存储了每个 cell 所需要的 Item，考虑到 Cell 的特点，基类的 BaseItem 可以设计成这样：

@interface KtTableViewBaseItem : NSObject

@property (nonatomic, retain) NSString *itemIdentifier;

@property (nonatomic, retain) UIImage *itemImage;

@property (nonatomic, retain) NSString *itemTitle;

@property (nonatomic, retain) NSString *itemSubtitle;

@property (nonatomic, retain) UIImage *itemAccessoryImage;

- (instancetype)initWithImage:(UIImage *)image Title:(NSString *)title SubTitle:(NSString *)subTitle AccessoryImage:(UIImage *)accessoryImage;

@end

父类实现代码

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

if (self.sections.count > section) {

KtTableViewSectionObject *sectionObject = [self.sections objectAtIndex:section];

return sectionObject.items.count;

}

return 0;

}

这两个问题的解决方案如下：

定义一个协议，父类返回基类 Cell，子类视情况返回合适的类型。
为 Cell 添加一个 setObject 方法，用于解析 Item 并更新 UI。

优势

经过这一番折腾，好处是相当明显的：

子类的数据源只需要实现 cellClassForObject 方法即可。原来的数据源方法已经在父类中被统一实现了。
每一个 Cell 只要写好自己的 setObject 方法，然后坐等自己被创建，被调用这个方法即可。